AMP 和代碼管理工具設定指南

Accelerated Mobile Pages 專案 (AMP) 是一個開放原始碼網路平台,有助於提升您網頁內容的效能。AMP 內建對 Google 代碼管理工具的支援。本文件將說明在 AMP 網頁上設定 Google 代碼管理工具的建議做法。

如要為 AMP 安裝代碼管理工具,請按照下列步驟進行:

  1. 在代碼管理工具中建立 AMP 容器。
  2. 在 AMP 網頁中加入代碼管理工具程式碼片段。
  3. 在代碼管理工具容器中設定代碼並發佈。

建立 AMP 容器

代碼管理工具提供了 AMP 容器類型。請為您的專案建立新的 AMP 容器:

  1. 在「帳戶」畫面上,按一下所要使用帳戶的 [更多動作] (更多),然後選取 [建立容器]
  2. 為容器命名,請使用描述性名稱,例如「example.com - 新聞 - AMP」。
  3. 在「容器的使用位置」下方,選取 [AMP]。
  4. 按一下 [建立]

您的容器現已建立完畢,接下來要在 AMP 網頁上安裝代碼管理工具程式碼。

代碼管理工具將說明如何妥善地安裝程式碼片段,如需進一步的指引,請參閱下一節

加入代碼管理工具程式碼片段

建立新的 AMP 容器後,「安裝 Google 代碼管理工具」畫面會隨即顯示。代碼管理工具提供兩個程式碼片段。請複製並貼上這些程式碼片段,使其顯示在您的 AMP 網頁上。

注意:如要稍後再存取程式碼片段,請按一下工作區總覽頁面頂端的容器 ID,或是依序按一下 [管理] 和 [安裝 Google 代碼管理工具]。

第一個程式碼片段會在您的 AMP 網頁中加入 AMP Analytics (分析) 元件。這段程式碼位於網頁 <head> 區段尾端,在網頁上只能出現一次。

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
重要事項:這段程式碼只有在尚未加進網頁時才要加入,在每個網頁上也只能出現一次。

第二個程式碼片段會將 AMP Analytics (分析) 設為使用代碼管理工具。這段程式碼必須放在緊靠 <body> 開頭元素後方的位置。請將 GTM-CONTAINER_ID 換成您的代碼管理工具容器 ID,或是複製並貼上代碼管理工具使用者介面中的整個程式碼片段。

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

設定容器並發佈

網頁正確安裝容器片段後,就能啟動透過代碼管理工具部署的代碼。接下來,請建立代碼設定並發佈容器。

如要建立新代碼,請按照下列步驟進行:

  1. 按一下 [代碼] 然後 [新增]。
  2. 按一下 [代碼設定],然後從支援的 AMP 代碼清單中選取所需代碼類型。
  3. 根據代碼供應商所提供的資訊設定代碼。
  4. 按一下 [觸發條件],然後加入一或多項可使代碼啟動的事件條件。
  5. 為觸發條件命名,然後按一下 [儲存]。

為所有額外的代碼設定重複上述步驟。容器設定完成後請發佈容器,使變更生效。

網頁變數

代碼管理工具可擷取 AMP 變數並將其用於代碼和觸發條件設定。比方說,賣鞋網頁可加入變數來描述特定鞋款的規格,而這些值可用來建立代碼管理工具變數:

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "shoes",
              "color": "red"
          }
      }
  </script>
</amp-analytics>

如要在代碼管理工具中建立使用者定義的變數來擷取上述程式碼中的顏色,請按照下列步驟進行:

  1. 按一下 [變數]
  2. 在「使用者定義的變數」下方點擊 [新增]
  3. 按一下 [變數設定],然後選取 [AMP 變數]
  4. 在「AMP 變數名稱」欄位中,輸入欄位名稱 (例如「顏色」)。
  5. 為變數取個描述性名稱 (例如「AMP 變數 - 顏色」)。
  6. 按一下 [儲存]

代碼管理工具支援的 AMP 代碼

這對您有幫助嗎?
我們應如何改進呢?