Goole Tag Manager 介紹

概述

Goole Tag Manager(以下簡稱：GTM)是一個代碼管理系統，可以輕鬆地在網站或移動應用上添加或更新腳本代碼及修改代碼段被觸發的時機，而不需要開發人員在頁面上硬編碼，在有預先埋點的情況下，完成對第三方sdk代碼或自定義代碼邏輯的“動態”管理。

使用GTM的好處

GTM中對網站代碼做調整隻是對代碼（Tag）進行增加、刪除和修改操作 GTM容器代碼能一次性在添加在整個站點的所有頁面，整個容器可以存儲和發佈不同的營銷和分析標籤，通過GTM的用戶交互界面，您只需要單擊記下就可以添加，編輯，開啓或關閉任何代碼，不需要給網站增加大量的硬編碼工作就可以直接發佈代碼到線上。
風險

• 在網站或應用上部署的GTM腳本（如：https://www.googletagmanager.com/gtm.js?id=GTM-5MDB7HJ ）可能會被牆，需要本地緩存這個gtm.js腳本，在全局的頁腳加載本地緩存的js文件；
• 加載的GTM腳本可能影響網頁前端加載速度，測試看到，文件大小在22KB左右，加載時長爲200~300ms內。
  對比其他代碼管理系統的優勢
• 免費： 相比於市面上有很多標籤管理系統，但是其中大多數是付費的，而GTM是免費的。
• 部署簡易： 部署就像創建標籤和觸發條件並單擊“Publish”按鈕一樣容易。
• 易於測試和調試： 藉助“Preview and Debug”控制檯，測試和預覽標籤和設置非常容易。很少有標籤管理系統提供此功能。
• 版本控制： 每次在容器中發佈新更改時都會創建一個新版本。而且，如果你想還原它或返回到以前的版本，則始終可以通過GTM發佈較舊的版本。

使用門檻

1. 由於GTM是Goolge 旗下產品，故需要有一個Google賬號，並且使用時需要翻牆；
2. 需要懂一些js代碼和正則相關的知識。

GTM 使用介紹

簡單介紹一下在目標網站或應用上，使用GTM管理代碼的實現過程。

使用GTM的準備工作

• (1) 創建GTM賬號
  在已有Google賬號的前提下，訪問GTM地址（https://tagmanager.google.com/#/ ），需要先創建一GTM個賬號（一個企業有一個賬號就夠了），然後就是設置容器，一個賬號下可以有多個容器，每個容器對應一個域名（不帶“/”）
  
  容器使用位置有四種類型（如下圖所示），根據需要管理代碼的應用的實際情況來選擇；在所有信息填寫完畢後點擊”創建“即可；
  
• GTM基礎代碼部署
  在完成上一步的GTM賬號創建後，會彈出一個代碼安裝器的腳本；聯繫網站開發人員，找到網站模板頁的頭部，將上面的兩段跟蹤代碼按要求添加上去即可；
  
• (3) 驗證GTM代碼部署是否成功
  驗證GTM代碼部署是否成功很簡單，清除緩存，打開F12，重新加載該網頁，如果部署成功會發現有名字帶有“gtm.js"的GTM腳本被成功加載，如下圖所示：
  以上就完成網站上的GTM基礎代碼的部署，此時就可在GTM界面上動態創建腳本代碼，測試、調試，並且將代碼添加到相應的頁面（成功部署GTM基礎代碼的網頁）上去。
  

GTM 界面簡介

• 工作區：就是GTM容器的操作界面了,這個頁面是GTM的核心，是GTM主要操作設置位置。
• 版本：容器發佈的版本記錄，可以知道誰什麼時候發佈了版本，以及做了哪些修改。
• 管理：管理GTM賬號和容器。

GTM 的幾個主要核心概念

如上圖左邊菜單欄的綠色框所示：

1) 代碼

代碼（Tag）是控制向目標網頁添加的代碼段，一個代碼至少有一個觸發器結合使用。
GTM提供很多提供了強大的代碼模板系統（例如適用於 GA\AdWords的 Google代碼模板）；
如果模板不支持您希望部署的代碼，可以創建自定義圖片代碼或自定義 HTML 代碼。利用自定義代碼，可以通過 GTM部署幾乎所有的代碼。
需要說明的是，通過GTM去發佈的代碼，在目標網頁上它們是異步加載的，但是可以在“配置代碼”時，使用“高級設置”來設定代碼執行順序。

1. 高級設置
   高級設置可以使用代碼觸發選項控制代碼觸發優先級、觸發方式和觸發順序。

• 觸發優先級是指優先級更高的代碼會先觸發。如果未指定優先級，則默認爲 0。代碼仍會以異步形式觸發，即：無論上一個代碼是否完成，下一個代碼都會正常觸發。觸發優先級中還可以控制代碼的生效時段。
• 觸發方式可以設置爲“觸發次數不受限制”、“每個事件觸發一次”和“每次網頁加載觸發一次”；
• 觸發順序設置在“高級設置”→“代碼觸發順序”中，可以控制代碼在某些代碼觸發之前之後才觸發，表示這個代碼要在另一個代碼之前之後觸發纔有可能觸發此代碼，這個是與觸發優先級最大的區別。

2) 觸發器

簡單的說就是一組行爲觸發的條件規則，滿足條件的行爲纔會被觸發；也就是用戶行爲要觸發代碼前，需要達到觸發器設置的條件規則才能執行。

觸發器類型：
所有在跟蹤代碼管理器中觸發的代碼均由事件驅動。事件可以是網頁瀏覽、按鈕點擊、表單提交或者是任何自定義事件，詳見：https://support.google.com/tagmanager/topic/7679108?hl=zh-Hans&ref_topic=7679384

常用的兩種觸發器：

1. 網頁瀏覽
   觸發器中網頁瀏覽類型有3種，分別是DOM已準備就緒、窗口已加載和頁面瀏覽。其中比較常用的是頁面瀏覽。
   在配置GA默認跟蹤代碼時候選用的All Pages就是指所有的網頁瀏覽了。
2. 單擊
   原則上，只要有GA基礎跟蹤代碼的頁面的單擊都是可以通過GTM跟蹤到的。單擊分爲兩種，一種是有鏈接的單擊，這種表示單擊後頁面會跳轉走；一種是所有元素單擊，包含第一種的所有單擊。
   有鏈接的單擊設置的時候有兩個選項，如圖3-20所示，一個是“等待代碼觸發完畢”，這個是表示事件觸發成功後或一定時間超時後才跳轉其他頁面，確保事件被跟蹤到；一個是“檢查驗證結果”，表示頁面有效跳轉的才觸發時間，確保成功的跳轉纔跟蹤。

用戶單擊的時候，GTM會將單擊最近的元素填充到以下變量，這也就是爲什麼在定位用戶單擊位置的時候需要查看頁面的元素，需要注意，下面的這些變量要在觸發器能夠使用，還需要在變量中的內置變量中將其勾選，GTM默認是沒有啓用這些變量的：

注意：在做單擊事件的時候要有一個必須的規則，那就是需要限定單擊事件觸發的URL，如果是所有頁面都可以觸發這個事件：PageURL 匹配正則表達式(.*)，如果只是在特定的頁面上觸發，那麼Page URL就要嚴格限制爲該頁面。

3) 變量

變量存儲一些值，主要用於代碼和觸發器中的設置。

跟蹤代碼管理器變量用在觸發器和代碼中：
• 觸發器中的變量用來定義指定特定觸發器應在何時觸發的過濾條件。
示例：當 url 變量爲“example.com/index.html”時觸發網頁瀏覽觸發器。
• 代碼中的變量用來捕獲動態值。
示例：捕獲交易價值和所購產品並將其應用到轉化跟蹤代碼。

變量類型：

變量分爲內置變量和用戶自定義變量：

1. 內置變量
   內置變量是指一系列預先設定且不可自定義的特殊變量，要使用的時候，您需要將其勾選開啓，不同容器類型的內置變量不同的，如：
   Click Element（點擊元素）：訪問 dataLayer 中的 gtm.element 鍵，由“點擊”觸發器設置。這是對發生點擊的 DOM 元素的引用。
   Click Classes（點擊類）：訪問 dataLayer 中的 gtm.elementClasses 鍵，由“點擊”觸發器設置。這是被點擊的 DOM 元素的類屬性之字符串值。
   詳細內置變量的介紹見：https://www.cnblogs.com/ichdata/p/11721247.html
   內置變量中使用比較多的是網頁和單擊這兩個模塊的變量，其中單擊就是前面觸發器裏面講到的用戶單擊的時候GTM會自動填充的變量，這兩類變量在部署GTM的時候將其全部勾選開啓。
   其他的內置變量就比較少用了，根據個人需求去開啓。

2. 自定義變量是GTM提供一些變量的格式，根據根據自己的需要去創建。

官方文檔：https://support.google.com/tagmanager/topic/9125128?hl=zh-Hans&ref_topic=7683268

GTM中用戶自定義變量提供了5中大類19個變量類型，5大類分別是導航、網頁變量、DOM變量、實用工具和容器數據，其中常用的是網頁變量和使用工具，如表3-8所列：

• (a) JavaScript變量
  這個的作用是將頁面中的全局變量讀取進GTM，如在頁面上有這樣一段代碼：

  <script> userID=“[email protected]”; </script >

  那麼就可以通過JavaScript變量將UserID讀進GTM裏面，在GTM中選擇“變量”→“用戶定義變量”→“JavaScript變量”

• (b)自定義javaScript
  該值設置爲 JavaScript 函數的結果。JavaScript 的形式必須是可返回值的匿名函數；
  見GTM例子……

• © 數據層變量
  這個是用於接收數據層變量的，例如數據層的格式是：
  dataLayer.push({'event': 'qxPage'，'data1': 'a', 'data2': 'b'})

  裏面的data1和data2就是數據層變量了，對應的值分別是a和b，要接收a和b就需要用到數據層變量，在GTM中選擇“變量”→“用戶定義變量”→“數據層變量”

• (d) 第一方 Cookie
  這個的作用是將主域下面的Cookie抓取到GTM裏面；

• (e) 常量
  常量就是將一個固定的值用變量存儲，後續在觸發器和代碼中直接使用這個變量，如果要修改直接修改該變量的值就可以

4) 數據層

gtm腳本運行時會創建一個dataLayer的全局對象, dataLayer實際是是一個數組, 你可以通過dataLayer.push()來添加相關的數據, 可以很方便的在gtm variable裏面獲取到。
在GTM的文檔中，數據層是用來收集網站數據的。GTM可以直接在頁面的html中通過js遍歷html dom提取數據。

使用數據層的原因：
GTM可以直接在頁面的html中通過js遍歷html dom提取數據，默認情況下，GTM是通過頁面的html提取數據，再把它推送帶營銷或分析的標籤中。爲了解決HTML可能頻繁變更的問題，我們創建和使用數據層，存儲我們想要收集關於 web 頁面的所有信息。一旦設置了一個數據層，容器標籤從其 HTML 頁面的數據層提取數據。

官方文檔：https://developers.google.cn/tag-manager/devguide

爲確保儘可能提高靈活性、可移植性和易用性，建議將 Google 跟蹤代碼管理器與數據層一起部署，這樣它才能發揮最大作用。數據層是一個對象，其中包含您希望傳遞給 Google 跟蹤代碼管理器的所有信息。您可以通過數據層將事件或變量等信息傳遞給 Google 跟蹤代碼管理器，然後根據這些變量的值或具體事件在 Google 跟蹤代碼管理器中設置觸發器。

配置代碼

在瞭解上述GTM的幾個核心概念後，就可以開始進行代碼配置了；以配置網站的自定義：

• 在GTM中單擊“代碼”→“新建”→“選擇一個代碼類型以開始設置”（這裏選擇“自定義HTML”）；
  
  
• 然後將將自定義代碼複製黏貼進入，默認觸發器選擇All Pages（如果暫時還沒有新建），點擊“保存”按鈕;

通過上述步驟就完成了代碼的簡單配置；在實際使用時，只要根據需要選擇不同的代碼類型、新建不同的觸發器同時利用變量設置其觸發條件，來完成配置滿足需求的代碼。

注意：務必要將此數據層代碼段放置在容器代碼段上方。
要設置數據層，請與開發者合作將以下代碼段添加到您網頁的 部分，放置在容器代碼段上方：
<script> dataLayer = []; </script>

如果在容器代碼段之後調用數據層代碼，Google 跟蹤代碼管理器將無法使用數據層代碼中聲明的任何變量，因而也就無法在網頁加載時有選擇性地觸發代碼。

代碼的預覽和調試

在完成上述代碼配置後，需要測試和調試對應的代碼是否促發，數據返回正確與否，特別是有代碼使用js的時候，會往網頁注入代碼，因爲這段代碼是和頁面代碼一樣運行的，如果錯誤可能會導致站點崩潰；GTM提供一種線上環境調試方法可以在代碼發佈前進行線上調試，具體操作步驟如下：

• 通過點擊GTM界面上的”預覽“按鈕，GTM會在“工作區概覽”頁面頂部顯示一個橫幅，指示當前處於“預覽模式”；
• 然後刷新目標網頁，目標網頁會出現如下圖所示的調試控制檯。
  
  此調試控制檯顯示有關添加代碼的詳細信息，包括代碼的觸發狀態以及正在處理的數據，可確定代碼和觸發器是否正常觸發，以及它們向各自的服務傳遞了哪些數據。當點擊到達預覽的網站時，調試控制檯將更新有關代碼觸發狀態的信息。可以通過這些信息瞭解代碼是否成功觸發及其觸發狀態的觸發（或不觸發）因素。

調試控制檯的功能介紹

頂部的導航欄列出了代碼、變量和數據層，左側導航欄則顯示事件列表。

• 代碼：點擊“代碼”可查看哪些代碼已觸發、哪些代碼未觸發。點擊某個代碼可查看該代碼的屬性以及關聯的觸發器。在左側欄中選擇某個事件後，“代碼”標籤將顯示該事件的代碼狀態。
• 變量：“變量”標籤將顯示所選事件中的變量的詳細信息，包括變量類型、返回的數據類型以及解析值。從左側導航欄中選擇某個事件，可查看該事件觸發時變量的狀態。
• 數據層：“數據層”標籤將顯示針對選定事件推送到數據層的確切消息，以及消息事務完成後數據層的狀態。從左側導航欄中選擇某個事件，可查看該事件觸發時數據層的狀態。
  如下圖所示：
  

代碼發佈及版本管理

在通過代碼預覽調試後確定代碼可以正常觸發無誤，在GTM界面點擊“退出預覽模式”後，並點擊右上角的“提交”按鈕，即可完成發佈一個新版本代碼到線上環境去，使其在目標網站或移動應用中生效。
GTM會保存發佈歷史記錄，因此可以查看各個版本生效的時間以及發佈者；並且提供版本管理功能，如果不小心發佈了某個計劃外或者有問題的容器版本，可以將該工作區恢復到之前的版本，併發布該版本。

用戶和權限管理

GTM界面的【管理】—》【用戶管理】
利用 Google 跟蹤代碼管理器，您可以在帳號級別和容器級別向其他用戶授予權限。在帳號級別，您可以向用戶授予查看或管理其他用戶的權限，而在容器級別，則可以向用戶授予讀取、修改、審批或發佈權限。

1. 帳號權限
   帳號級別的帳號權限可以設置爲管理員或用戶。您也可以在“容器權限”表格中精細調整特定容器的權限。
2. 容器權限
   可按容器分配訪問權限。對於特定的容器，可爲用戶分配以下權限：
   • 無訪問權限：用戶無法看到帳號中列出的容器。
   • 讀取：用戶可以看到列出的容器，並且可以瀏覽容器中的代碼、觸發器和變量，但是無法做出任何更改。
   • 修改：用戶有權創建工作區，並進行修改，但是不能創建版本，也不能發佈。
   • 批准：用戶有權創建版本、工作區，並進行修改，但是不能發佈。
   • 發佈：用戶具有全部權限，可創建版本、工作區，並進行修改和發佈。
     
     參見：https://support.google.com/tagmanager/answer/6107011?hl=zh-Hans&ref_topic=9001797