使用 AMP 打造 Google Ads 到達網頁

到達網頁載入速度愈快,轉換次數通常會愈多。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: 提供用於選取日期的 widget。日期挑選器可根據輸入欄位以疊加形式呈現,或以靜態日曆小工具形式顯示。

驗證 AMP 網頁

開發期間,請務必確認 AMP 網頁有效。AMP 提供多種驗證文件的方法。驗證 AMP 網頁最常見的方法是使用網路驗證工具Google 網站管理員工具驗證工具。您也可以使用 Chrome 瀏覽器外掛程式和開發人員控制台,或在建構作業中整合 amphtml-validator npm 模組

您也可以使用 AMPBench,這是開放原始碼的網頁應用程式和服務,可驗證及偵錯 AMP 網頁部署相關問題。

如需 AMP 測試的支援服務,請前往 AMP 專案的「Getting Support」頁面。

步驟 2:設定 AMP,以便追蹤轉換和進行數據分析

使用 amp-analytics 元件追蹤 Google Ads 轉換。如要瞭解如何設定,請按照「為 AMP 到達網頁設定 Google Ads 轉換評估」一文中的步驟操作。

Google Analytics

Google Analyticsamp-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) 導入。請參閱這篇文章,瞭解各項方法的優缺點和實作細節。

您可以使用 amp-analytics 元件追蹤使用者動作和事件。AMP Analytics 內建支援超過 40 家分析供應商。這個架構十分彈性,可讓您使用自訂設定評估及觸發網址,並將 Analytics 資訊傳送至您自己的伺服器,或是不支援原生 AMP 的供應商。如果您使用的技術目前不支援,請要求供應商新增支援

AMP 數據分析也支援彈性的變數替換功能,詳情請參閱變數替換說明文件。

步驟 3:在 Google Ads 使用者介面中啟用 AMP 放送功能

Google 搜尋中的 AMP 網頁會透過網頁中的連結自動探索,但廣告主必須在 Google Ads 中明確輸入 AMP 網頁網址。如要瞭解如何在 Google Ads 使用者介面中設定 AMP 網址,請參閱「如何在 Google Ads 中使用 AMP」一文。

此外,如要將 Google Ads 流量導向 AMP 到達網頁,但不想讓這些網頁顯示在自然搜尋結果中,請在 robots.txt 中為相關 AMP 網頁新增 Disallow 指令,做法與一般網頁相同。

AMP 專案每天都會新增功能和元件。如果發現缺少功能,可以貢獻或開啟 GitHub 問題,要求新增功能。