到達網頁載入速度越快,通常能帶來更多轉換,而 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-mustache:允許使用 Mustache.js 算繪。
- amp-date-picker:提供用於選取日期的小工具。日期挑選器可以相對於輸入欄位顯示為疊加層,也可以顯示為靜態日曆小工具。
驗證 AMP 網頁
開發期間,請驗證 AMP 網頁是否符合 AMP 規格。AMP 提供多種驗證方法。驗證 AMP 網頁最常見的方法是使用 AMP 網頁驗證工具或 Search Console AMP 測試。您也可以使用 AMP 驗證工具 Chrome 擴充功能和開發人員控制台,或在建構作業中整合 amphtml-validator npm 模組。
如需 AMP 測試支援,請造訪 AMP 支援頁面。
步驟 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 代碼管理工具,新增再行銷、Floodlight 和類似的評估產品。請參閱相容代碼的完整清單。
Adobe Analytics
Adobe Analytics 提供兩種方法,可使用 amp-analytics 元件導入網站成效追蹤解決方案:iframe (adobeanalytics_nativeConfig) 和非 iframe (adobeanalytics)。如要瞭解各方法的優缺點和導入詳情,請參閱 Adobe Analytics AMP 說明文件。
整合其他常見的 Google Ads 相關技術
您可以使用 amp-analytics 元件追蹤使用者動作和事件。AMP Analytics 原生支援超過 40 家數據分析供應商。這個架構相當靈活,可讓您使用自訂設定評估及觸發網址,將數據分析資訊傳送至自己的伺服器,或傳送至不支援原生 AMP 的供應商。如果您使用的技術不受支援,請要求供應商新增支援。
AMP Analytics 也支援彈性的變數替換,詳情請參閱變數替換說明文件。
步驟 3:在 Google Ads 使用者介面中啟用 AMP 放送
雖然 Google 搜尋中的 AMP 網頁會透過網頁連結自動偵測,但廣告主必須在 Google Ads 中明確輸入 AMP 網頁網址。如要瞭解如何在 Google Ads 使用者介面中設定 AMP 網址,請參閱「如何在 Google Ads 中使用 AMP」一文。
此外,如果您想將 Google Ads 廣告流量導向 AMP 到達網頁,但不希望這些網頁出現在自然搜尋結果中,請在 robots.txt 檔案中為相關 AMP 網頁新增 Disallow 指令,就像為任何一般網頁新增指令一樣。