到達網頁越快通常可以促成更多轉換,而 AMP 是建立引人入勝 Google Ads 到達網頁且載入速度更快的好方法。amp.dev 為網頁開發人員提供所需資源,協助他們建立吸引人且成效良好的網頁。 這份逐步指南將說明如何在 AMP 網頁中使用 Google Ads 和其他廣告技術。
步驟 1:建立及驗證 AMP 網頁
建立 AMP 網頁
如要瞭解如何建立基本 AMP 網頁,請先參閱 AMP 專案的「建立您的第一個 AMP 網頁」教學課程。如需更多實作指南,請完成「將 HTML 轉換為 AMP」和「新增進階 AMP 功能」教學課程。如需 AMP 元件的程式碼範例和範本,請參閱 AMP 網站範例和 AMP 範本。
以下清單說明 AMP 網頁中使用的部分元件,請參閱完整清單元件清單。
- amp-bind:根據類似 JavaScript 的事件新增自訂有狀態互動功能。
- amp-form:建立需要使用者輸入內容的到達網頁。
- amp-list:從 CORS JSON 端點動態擷取內容。
- amp-carousel:用於捲動圖片庫的圖片輪轉介面。
- amp-lightbox:當使用者與元件互動時,系統會以全螢幕顯示該元件。
- amp-call-tracking 會動態取代超連結中的電話號碼,以便追蹤來電。
- amp-needache:允許使用 Mustache.js 進行算繪。
- amp-date-picker:提供可選取日期的小工具。日期挑選器可以顯示為與輸入欄位相關的重疊元素,或顯示為靜態日曆小工具。
驗證 AMP 網頁
建議您在開發期間確認 AMP 網頁有效。AMP 提供多種不同方法來驗證文件。驗證 AMP 網頁最常見的方法就是使用網路驗證工具或 Google 網站管理員工具驗證工具。您也可以使用 Chrome 瀏覽器外掛程式和開發人員控制台,或在建構中整合 amphtml-validator npm 模組。
您也可以使用 AMPBench,這是一個用於驗證的開放原始碼網頁應用程式與服務,能驗證及偵錯 AMP 網頁部署的相關問題。
如需 AMP 測試相關支援,請參閱 AMP 專案的「Getting Support」頁面。
步驟 2:設定 AMP 以追蹤轉換和分析
Google Ads 轉換追蹤
使用 amp-analytics 元件追蹤 Google Ads 轉換。請參閱「為 AMP 到達網頁設定 Google Ads 轉換評估」一文中的步驟,瞭解如何設定。
Google Analytics (分析)
Google Analytics (分析) 是 amp-analytics 支援的數據分析解決方案之一。如要讓 AMP 和非 AMP 網頁的工作階段保持一致,請按照「為 AMP 設定 Google Analytics (分析) 工作階段統合」一文中的步驟操作。
Google 代碼管理工具
amp-analytics 元件內建 Google 代碼管理工具支援。除了 Google Ads 轉換外,您還可以使用 Google 代碼管理工具新增再行銷、DoubleClick Floodlight、Google 通用 Analytics (分析) 和類似的評估產品。請參閱相容標記的完整清單。
Adobe Analytics (舊稱 Omniture)
Adobe Analytics 提供兩種使用 amp-analytics 元件導入網站效能追蹤解決方案的方法:iframe (adobeanalytics_nativeConfig
) 和非 iframe (adobeanalytics
) 導入。詳閱每個做法的優缺點和實作詳細資訊。
整合其他常見的 Google Ads 相關技術
您可以使用 amp-analytics 元件追蹤使用者動作和事件。AMP 數據分析原生支援超過 40 家分析供應商。這個架構具有彈性,可讓您使用自訂設定來評估及觸發網址,將數據分析資訊傳送到自己的伺服器或無法提供原生 AMP 支援的廠商。如果您使用目前不支援的技術,請要求廠商提供支援。
AMP Analytics (分析) 也允許彈性替換變數;詳情請參閱變數替代說明文件。
步驟 3:在 Google Ads UI 中啟用 AMP 放送功能
雖然系統會透過您網頁上的連結自動探索 Google 搜尋中的 AMP 網頁,但廣告客戶必須在 Google Ads 中明確輸入 AMP 網頁網址。請參閱如何搭配使用 AMP 與 Google Ads 一文,進一步瞭解如何在 Google Ads 使用者介面中設定 AMP 網址。
目前快取提供功能目前適用於在大多數主要瀏覽器 (包括 Android Chrome、Android Google 搜尋應用程式和 Mobile Safari) 上放送的 Google 搜尋結果網頁上的文字廣告。我們將在接下來幾個月提供更多相關資訊。
如要測試當 AMP 網頁透過 Google 搜尋檢視器從 Google AMP 快取提交時的顯示方式,請在搜尋 AMP 測試工具中輸入 AMP 文章,然後按一下「預覽連結」。
此外,如果您想將 Google Ads 流量帶往 AMP 到達網頁,但不想讓這些網頁出現在自然搜尋結果中,請將相關 AMP 網頁的 noindex 指令加入 robots.txt
中,方法與一般網頁相同。
更新到達網頁上的 AMP 內容
使用者向 Google AMP 快取要求 AMP 文件時,快取會自動要求更新,以便能在快取內容後為下一位使用者提供最新內容。在這個模型中,AMP 文件的更新內容會自動快速生效;少數使用者會在更新後發現未更新的版本。此外,如有需要,您也可以使用 update-cache API 更新或移除 AMP 快取中的內容。
AMP 專案每天都在新增功能和元件。如果發現缺少的功能,可以提供,也可以開啟 GitHub 問題要求新增功能。
AMP 網頁處理方式無效
網頁失效時,AMP 快取會在少數要求期間發現這項資訊,並開始重新導向至 AMP 網頁提供的來源。系統可能需要 1 到 2 天才能還原為 AMP 快取放送作業。