3.2.7 、Google Tag Manager實戰指南——六種事件跟蹤方法

2019 年 11 月 1 日
筆記

不少剛接觸GA的人可能不知道怎麼用GA做事件跟蹤，不同的方法經常混淆，導致無從下手，或是不知道什麼情況用哪種跟蹤方法，下面是根據自己多年實際經驗總結的幾種方法，包括其中的優劣，選取方法的原則： 1、直接往頁面添加程式碼的形式，這種方法的缺點是每次添加都需要開發去加，然後發新版，所以非常繁瑣，而且頁面程式碼加多後，維護不方便。 2、自定義注入HTML的形式，這種方法是適用比較廣，但是需要控制js的觸發順序，如果頁面還沒有載入完，用戶就單擊會跟蹤不到。 3、頁面元素定位法，量少的時候很容易操作，量多的時候會導致GTM中要維護很多的觸發器和程式碼。 4、綁定元素方法，與前一種方法相比，這種方法大大降低了觸發器和程式碼的數量。 5、ga-data方法，批量跟蹤必用方法。 6、dataLayer方法，特殊框架，如果前面幾種方法都不適用的時候，這個是萬金油方法，但是需要開發配合。下面來詳細介紹各種事件跟蹤的部署方法：

1.頁面添加方法

請看2.3.6章節的事件跟蹤。

2.自定義注入HTML的形式

這一節要介紹一種特別的事件跟蹤方法，如果您學會這個，那您完全可以拋開開發，但這個需要您掌握js，您準備好了嗎？下面入正題：原理：通過GTM中的自定義html注入js，給相關跟蹤位置添加上屬性，然後通過GTM裡面控制觸發的順序，這樣這個事件跟蹤就已經添加上頁面的html程式碼了，當觸發的時候就會發送事件。設置過程： 1、下面以單擊「關於作者」做事件跟蹤為例子，需要跟蹤的位置如圖3-58所示：

圖3-58 需要跟蹤的位置

將滑鼠移動到需要跟蹤功能的位置，然後單擊右鍵的「檢查」，查看對應單擊為是的程式碼，確定需要添加程式碼的位置。 2、然後在自定義html寫個js，定位位置，添加屬性，如圖3-59所示：

圖3-59 添加屬性

程式碼中的37表示單擊的位置第37個a標籤的位置。程式碼要設置優先順序更高些，上圖中的3就是程式碼的優先順序，然後是在基礎跟蹤程式碼載入之前就要載入好。

3、刷新一下，然後查看重複第1步的操作，查看程式碼元素，如圖3-60所示：

圖3-60 添加事件跟蹤

可以看到事件跟蹤的程式碼已經被添加到頁面上去了。原則上這種方法可以應用於所有的事件跟蹤，而且直接自己能在GTM操作，不需要開發，不足就是部分頁面複雜的定位可能比較複雜，需要js，另一個載入順序會影響到程式碼是否生效。

3.頁面元素定位法

主要通過內置變數中的數據層變數或自動事件變數定位，就經驗而言，大部分的定位第一條會是定位URL，然後是具體的根據屬性做跟精準的定位，在這過程中需要不斷的debug，以確定單擊被觸發。下面就舉一個例子，想要採集單擊某個位置的單擊量，單擊右鍵查看該按鈕的元素，如圖3-61所示：

圖3-61 審查頁面元素

還記得前面講解到觸發器裡面：用戶單擊的時候GTM自動將最近的變數填充到Click Clases、Click Text、Click Target這些內置變數。從上面的定位的程式碼可以確定：Click Clases是btn_1，Click Text是「CamShare」，也就是可以將觸發器設置為如圖3-62所示：

圖3-61 審查頁面元素

圖3-62 頁面元素定位法這樣就可以，再次強調：觸發器定義第一條一般是URL，也就是這個事件跟蹤是在哪個頁面的，如果是所有頁面都有，就正則匹配所有的。

4.綁定元素方法

這是通過js綁定class屬性的方法來實現的。原理：將需要跟蹤的位置用datalayer push綁定，一般定位到class，且這個class要唯一，如果有人單擊該位置，那麼事件就通過datalayer push這個方法發送出去，推送出去的資訊再通過數據層去接受，然後去tag中設置。這個方法有一個好處就是datalayer push的可以用統一的結構，後續需要增加事件跟蹤，直接對新增的綁定位置做新增即可實現。詳細設置過程 1、下面以GA小站單擊頭部作為事件跟蹤的例如，如圖3-63所示，用戶單擊「GA小站」的元素是g-mono

圖3-63 GA小站頭部

2、在GTM中用自定義html的方法將g-mono與事件綁定，如圖3-64所示：

圖3-64 綁定class

這個的作用是，有人單擊的時候，就將事件用datalayer push的發送出去。 3、變數中用數據層變數接收發出的三個數據層變數，如圖3-65所示：

圖3-65 接收數據層變數

4、觸發器中接收自定義事件變數，如圖3-66所示：

圖3-66 接收自定義事件

5、在GTM中設置程式碼，如圖3-67所示：

圖3-67 設置程式碼

6、測試，如圖3-68所示，在GTM中單擊預覽，模擬單擊，然後在GA的實時裡面看是否有對應的事件觸發，如果有，事件跟蹤成功。

圖3-68 測試

5.ga-data方法(批量事件跟蹤)

這節要介紹的是如何做批量事件跟蹤，也就是一條程式碼觸發多個事件的形式，前面已經介紹了4種事件跟蹤的方法，但都逐個去定位的，工作量比較大且繁瑣，現在介紹一種可以批量跟蹤事件的方法。實現原理：如圖3-69所示，通過自定義js獲取頁面固定屬性的數值，再將數值通過對照錶轉義成對應的具體行為，在觸發器通過設置數值範圍設置促發條件，新建程式碼即可。

圖3-69 批量事件跟蹤原理

詳細設置流程： 1、Web上加ga-data屬性將滑鼠移至需要監控的位置，單擊右鍵查看具體程式碼位置加入ga-data屬性，不同的位置分配不同的數值，如圖3-70所示。

圖3-70

2、自定義JavaScript 在GTM中選擇「變數」→「新建」→「選擇一個變數類型以開始設置…」→「自定義JavaScript」，然後將這段程式碼複製進入，此js是獲取Web頁面的固定屬性，完整程式碼去ichdata.com/book.html獲取，具體如圖3-71所示：

圖3-71 自定義JavaScript

更改attr後面的屬性可以獲取不同全局屬性。這裡需要注意，這段程式碼中使用了，這個變數是GTM屬於用戶自定義變數里的的，默認是沒有啟用，要使用要做點配置。在GTM中單擊「變數」→「新建」→「選擇一個變數類型以開始設置…」→「自動事件變數」，其中變數類型選擇「元素」，然後將這變數保存為element，具體配置資訊如圖3-72所示：

圖3-72 element

3、對照表如圖3-73所示，將前面獲取的ga-data的屬性裡面的具體數值轉化成對應的具體行為，一般數值範圍選用順序構造，方面後面設置觸發器的促發條件。

圖3-73 對照表

需要注意，這裡輸入變數就是上一步自定義js獲取到的變數getGaData。 4、設置觸發器設置觸發條件範圍，目標中使用的是所有元素，如果確定單擊的是鏈接，可以選用鏈接，促發條件就是前面的數值範圍,如圖3-74所示：

圖3-74 設置觸發器

5、設置程式碼，具體配置如圖3-75所示：

圖3-75 程式碼設置

觸發器就是上一步設置的Tag501，這裡由於截圖問題沒有顯示。 6、測試發布在Debug測試無異常後即可發布用這種方法可以簡化頁面程式碼的部署，維護方便，後面只需在需要跟蹤的位置添加ga-data就可以。

這種方法可以用於表單優化，導航欄的使用使用跟蹤，AB test和追蹤用戶具體的單擊等，下面介紹這種方法在表單優化的應用。

基本思路是：通過ga-data方法將整個註冊表單的行為都跟蹤下來，然後分析註冊流程哪一步流失最大，對應做表單壓縮或順序調整，降低降低註冊流失，提高註冊轉化比例。詳細設置過程 1、首先看看錶單結構，這裡只截取主要是核心部分，如圖3-76所示：

圖3-76 表單截圖

2、然後根據頁面設計結構做ga-data數值分配，如圖3-77所示：

圖3-77 ga-data數字分配

3、然後GTM中設置，其中變數用到的有3個變數，如圖3-78所示：

圖3-78 GTM中的設置

4、其中gadata1對照表如圖，這裡的作用是將getGaData的數值與具體的行為對應轉義，如圖3-79所示：

如圖3-79 對照錶轉義

5、設置促發條件，根據數值範圍設置，如圖3-80所示：

如圖3-80 設置觸發條件

6、設置Tag，向GA發送數據，如圖3-81所示：

圖3-81 設置程式碼

7、GA中事件跟蹤接收到數據形式如3-82所示：

圖3-82 事件報告中顯示

後面就可以根據業務做具體的分析與調整，可以上面的數據有個遞減的趨勢，可以計算各個步驟的流失情況。

6.dataLayer方法（數據層的應用）

如果在單頁應用或APP裡面要做事件跟蹤要怎麼實現呢？很明顯，前面的集中方法都不適用了，這時候需要用dataLayer方法，也就是用到數據層了。實現原理：調用dataLayer主動推送自定義事件。詳細設置過程： 1、行為觸發的時候調用dataLayer 比如虛擬頁面中單擊某個位置，或APP中單擊某個位置就調用dataLayer，格式如：dataLayer = [{『event』: 『click』}]; 2、觸發器設置觸發器中使用自定義事件接受click,配置如圖3-83所示：

圖3-83 自定義事件

3、配置程式碼觸發器是自定義事件，事件的類別、操作和標籤根據自己需要填，具體配置如3-84所示：

圖3-84 DataLayer方法程式碼設置

這裡需要注意的，如果是在單頁應用裡面做事件跟蹤，在事件跟蹤的程式碼配置中「要設置的欄位」裡面的配置資訊需要與默認跟蹤程式碼的配置一致，因為單頁應用對頁面做了改寫，如果不一致，事件跟蹤到的數據是錯誤的。