設定及安裝代碼管理工具

Install the Google Tag Manager container snippet

安裝 Google 代碼管理工具後，您就可以設定及部署來自包括 Google Ads、Google Analytics (分析)、Floodlight 或第三方合作夥伴的代碼。大致步驟如下：

  1. 建立帳戶或使用現有帳戶，網址為 tagmanager.google.com (系統預設會先建立一個新容器，而您可以在每個帳戶中另外建立更多容器)。
  2. 在您的網站或行動應用程式中安裝容器
    1. 一般網頁和 AMP 網頁：按照代碼管理工具的指示新增容器片段，並移除所有現有代碼。
    2. 行動應用程式：使用 Android 或 iOS 專用的 Firebase SDK。
  3. 新增及發布代碼。

「代碼管理工具」帳戶代表機構組織的最頂層。一般來說，一家公司只需要一個帳戶，代碼管理工具帳戶含有一或多個容器，其中有特定的容器類型可用於網站、AMP 網頁、Android 應用程式和 iOS 應用程式。

建立新帳戶和容器

  1. 在代碼管理工具中，按一下 [帳戶] 接下來 [建立帳戶]。
  2. 輸入帳戶名稱，並視需要指明是否要以去識別化方式與 Google 和其他使用者共用資料。
  3. 按一下 [繼續]。
  4. 輸入說明性的容器名稱，然後選取內容類型：網頁、AMP、Android 或 iOS。若要設定行動容器，請選擇您要使用 Firebase SDK 還是其中一個舊版 SDK。
  5. 按一下 [建立]。
  6. 查看《服務條款》，並按一下 [是] 表示您同意這些條款。

新容器初次載入時，系統會提示您安裝網站容器程式碼片段，或直接搭配您選擇的行動平台專用的 SDK 來使用代碼管理工具；您可以立即安裝程式碼片段，也可以按一下 [確定] 來清除這個對話方塊。您可以每次都先設定容器，之後再安裝容器片段或 SDK。

在現有帳戶中新增容器

  1. 在代碼管理工具中，按一下 [帳戶] 接下來 相關帳戶名稱旁的 更多。
  2. 選擇 [建立容器]。
  3. 輸入說明性的容器名稱，然後選取內容類型：網頁、AMP、Android 或 iOS。若要設定行動容器，請選擇您要使用 Firebase SDK 還是其中一個舊版 SDK。
  4. 按一下 [建立]。
  5. 查看《服務條款》，並按一下 [是] 表示您同意這些條款。

安裝容器

如果您對於編寫程式碼不熟悉，或是無權存取網站或行動應用程式的程式碼，建議您尋求開發人員協助完成這個步驟。開發人員則可以參閱「代碼管理工具」開發人員快速入門指南瞭解詳情。
  1. 在「代碼管理工具」中按一下 [工作區]。
  2. 在視窗頂端附近，找到格式為「GTM-XXXXXX」的容器 ID。
  3. 按一下容器 ID，「安裝代碼管理工具」方塊就會顯示。
  4. 按照「安裝代碼管理工具」方塊中的指示複製程式碼片段並貼到網站中，或下載並安裝正確的行動 SDK。請參閱下方的網頁、AMP 和行動安裝提示。
一般網頁
  • 將 <script> 程式碼片段放在網頁 HTML 輸出內容的 <head>，位置最好是盡量靠近 <head> 開頭代碼，但必須在所有 dataLayer 宣告下方。
  • 將 <noscript> 程式碼片段放在 HTML 輸出內容中，位置緊靠 <body> 代碼後方。

為確保代碼不會啟動兩次，請將程式碼中所有已遷移至「代碼管理工具」容器的硬式編碼代碼移除。

為避免您的容器遭到第三方窺探，代碼管理工具的網頁程式碼片段預設使用 HTTPS。

如果您因故必須以支援非安全網頁的方式來部署代碼管理工具容器，可將容器片段中的來源網址通訊協定調整為 //，以取代 https://。進一步瞭解如何使用通訊協定相關網址。

AMP 網頁
  • 將 JavaScript 程式碼片段的 <script> 部分放在 </head> 結尾代碼正上方。
  • 將 <amp-analytics> 部分放在緊靠 <body> 開頭元素後方的位置。

詳情請參閱 AMP 和代碼管理工具設定指南。

行動應用程式
如要導入行動應用程式專用的代碼管理工具，應搭配 Firebase SDK 使用。請參閱「代碼管理工具」開發人員文件，瞭解 Android 和 iOS 適用的步驟。

使用代碼管理工具的預覽模式和 Tag Assistant Chrome 擴充功能，驗證已安裝的容器或排除相關問題。

加入、更新及發佈代碼

安裝容器後，您就可以新增代碼了。

  1. 在導覽選單中按一下 [代碼]。
    • 若要加入代碼：按一下 [新增]，然後選取代碼類型，並指定代碼啟動時機的觸發條件。
    • 若要修改代碼：按一下清單中的代碼，然後在「編輯代碼」網頁上進行變更。舉例來說，您可以更新代碼啟用時機的觸發條件。
    • 如要刪除代碼：按一下清單中的代碼，然後在「編輯代碼」頁面上點選畫面右上角的 更多 選單圖示，並選擇 [刪除]。
  2. 預覽模式方便您查看網站或應用程式上的「代碼管理工具」設定，以確保一切運作如常。在網站上，您可以使用偵錯功能，瞭解您在瀏覽及與網站互動的過程中，觸發了哪些代碼。
    • 在工作區內任一個包含未發布變更的網頁中，按一下 [預覽]。瞭解詳情。
    • 如果是行動應用程式，請詳閱 Android 和 iOS 的開發人員說明文件。
  3. 準備就緒後，按一下畫面右上角的 [提交] 即可開始發佈變更。請加入版本名稱和版本說明等詳細資料，然後按一下 [發布]。
代碼管理工具的導入作業第一步大部分都是部署 Google Analytics (分析) 網頁瀏覽代碼。詳細方法請參閱部署 Google Analytics (分析) 代碼的逐步操作說明。
這對您有幫助嗎？
我們應如何改進呢？