如何在您的網站上安裝 Google 跟踪代碼管理器

已發表: 2022-04-12

Google Tag Manager (GTM) 是一項免費服務，可極大地簡化在網站和移動應用程序中使用標籤的過程。 使用 GTM，您可以輕鬆更改頁面上的代碼、添加新片段並將您的站點與分析系統、廣告和其他服務集成。

首先，您需要在您的網站上安裝跟踪代碼管理器代碼。 之後，可以在服務界面中調整所有其他設置，而無需程序員參與。 您可以在我們的文章中了解有關 Google 跟踪代碼管理器以及它如何與 Google Analytics 結合使用的更多信息。 如果您已經熟悉這一點，那麼我們不要浪費任何時間，繼續安裝 GTM。

簡而言之，要安裝 Google 跟踪代碼管理器，您需要：

  • 在 Google 跟踪代碼管理器中創建帳戶和容器；
  • 在您的網站上安裝 Google 跟踪代碼管理器代碼；
  • 發布容器；
  • 檢查谷歌標籤管理器。

1.在谷歌標籤管理器中創建一個賬戶和容器

在跟踪代碼管理器主頁上，單擊註冊按鈕並使用您的 Gmail 地址或任何其他 Google 帳戶登錄：

現在您需要直接在跟踪代碼管理器中創建一個帳戶。 為此，請單擊登錄到跟踪代碼管理器：

接下來，單擊創建帳戶：

為您的帳戶考慮一個名稱——使用您的公司名稱最為方便。 然後選擇國家，選中與 Google 和其他服務匿名共享數據旁邊的框（可選），然後點擊繼續：

現在您需要配置容器。 如果將 Google Tag Manager 的結構與 Google Analytics 的結構進行比較，那麼容器就相當於 GA 中的一個資源。 它存儲整個站點的標籤、觸發器和變量。 一個 GTM 帳戶中可以有多個容器：用於網站、用於移動應用程序、用於 AMP 頁面等。 為了方便起見，最好以創建容器的資源命名容器。 例如，這可能是您網站的地址。

輸入容器的名稱後，選擇將使用它的位置（在我們的示例中，這是Web ），然後單擊Create ：

閱讀使用跟踪代碼管理器的規則。 選中頁面底部的框，確認您同意根據 GDPR 處理數據的條件，然後單擊是：

在此之後，您將看到一個包含需要在您的網站上安裝的 GTM 代碼片段的窗口：

您可以立即復制代碼並將其安裝在您要監控的站點的所有頁面上，或者單擊“確定”，稍後在將第一個標籤添加到容器時執行此操作。 您可以隨時在Administration → Install Google Tag Manager下查看和復制代碼：

2. 在您的網站上安裝 Google Tag Manager 代碼

如果您熟悉網站開發並有權訪問管理面板，則可以輕鬆添加跟踪代碼管理器代碼。 這是一個如何通過 WordPress 執行此操作的示例。 否則，您仍然需要向程序員尋求幫助； 否則，存在破壞頁面源代碼的風險。

Google 跟踪代碼管理器代碼由兩個片段組成，並且是異步加載的。 也就是說，頁面的主要部分會繼續加載，而無需等待 GTM 容器加載。 代碼的第一部分應放在頁眉中，盡可能靠近開始 <head> 標記：

這是因為第一個片段的位置越高，加載速度就越快。 如果將其插入 <body> 標記，則可能會丟失有關在加載此標記之前離開頁面的用戶的數據。

代碼的第二部分用作備份，有助於跟踪禁用 JavaScript 的用戶的操作。 它必須緊跟在 <body> 標籤之後：

重要的！

GTM 代碼必須直接放在您要跟踪的頁面上，換句話說，放在您的整個網站上。 將代碼放置在隱藏的iframe中或將其部署在另一個標籤管理系統中將無法正確跟踪主頁上的標籤。

在 AMP 頁面上安裝 Google 跟踪代碼管理器

如果您使用 AMP 技術為移動設備快速加載和適配頁面，那麼代碼的第一部分應該放在結束 </head> 標記之前：

並且代碼的第二部分應該緊跟在 <body> 標籤之後：

3.發布容器

即使您沒有向容器添加單個標籤，我們也建議您在您的網站上安裝 GTM 代碼後立即發布它。 否則，容器會導致 404 錯誤。 然而，這並不重要。 如果您使用某些服務（例如 TrackJS）來跟踪 JavaScript 錯誤，那麼 404 錯誤會在您的報告中亂扔垃圾。 為了不給開發者造成不必要的壓力，最好發布一個空容器——它不會傷害任何人。

要發布容器，請轉到跟踪代碼管理器中的工作區選項卡，然後單擊右上角的提交按鈕：

選擇發布並創建版本。 由於這是您的容器的第一個版本，版本說明字段可以留空。 接下來，單擊發布：

完畢。 容器已發布。

4.查看谷歌標籤管理器

將跟踪代碼管理器代碼添加到您的網站後，您可以使用特殊的 Google Tag Assistant 擴展檢查數據是否正確傳輸。 這是對 Chrome 瀏覽器的補充，可顯示您的網站上安裝了哪些 Google 產品標籤以及它們的工作方式。

下載並安裝插件後，您會在 Chrome 工具欄中看到此圖標. 單擊它並選擇要檢查的系統標籤以及在哪些頁面上。 單擊完成。

然後轉到您要檢查的頁面並單擊 Tag Assistant 圖標。 要激活擴展，請單擊Enable ：

刷新當前頁面，Tag Assistant 將顯示頁面上安裝了哪些標籤以及它們是如何工作的。 綠色圖標表示正在傳輸數據，沒有任何投訴，藍色表示沒有嚴重問題，紅色表示嚴重問題：

如果您單擊特定標籤，您將看到錯誤的可能原因以及有關如何修復它的提示：

有關 Tag Assistant 的更多信息，請參閱 Google 幫助。

還有一些提示

在您的網站上安裝 GTM 代碼時，請您的開發人員同時添加 Google Optimize 代碼段。 即使您目前不打算試驗您網站上的內容，這也是一個好主意。 每當您想進行 A/B 測試時，一切都會準備就緒。

需要此代碼段來異步加載 Google Optimize 容器，並且在容器加載之前不顯示原始頁面。 使用 Optimize 代碼段，用戶將不會看到頁面的原始內容，直到加載了測試中更改的頁面。

當您傳輸手動注入 Google 跟踪代碼管理器的代碼時，不要忘記將它們從網站上的代碼中刪除，以免數據重複。 這是很重要的一點。

下一步是什麼

在您的網站上安裝代碼後，您需要在跟踪代碼管理器界面中添加和配置代碼和變量。 要了解如何執行此操作，請參閱文章什麼是 Google 跟踪代碼管理器以及如何使用它設置 Google Analytics 或網絡研討會先行一步：使用 Google 跟踪代碼管理器的技術和微妙之處。

PS 我們準備了一份包含 20 個步驟的清單，營銷分析師必須執行這些步驟才能根據正確和完整的數據做出決策。 填寫表格，我們將通過電子郵件將清單發送給您。

獲取清單