運用資料層 dataLayer.push 建立 GTM 自訂事件

GTM（Google Tag Manager；網頁代碼管理工具）最大的好處在於讓頁面較整潔、許多系統已經寫好的事件與變數可以直接拿來用，非常方便。但現實往往沒那麼簡單，通常都會遇到一堆 ajax、history 或 cache 要處理，這時候就要請到自訂事件出馬了。

若只用 GA，沒有使用 GTM 的話，自訂事件要這樣寫：

gtag('event', ..., {
  'event_category' : ...,
  'event_label' : ...
});

那如果用 GTM 的話該如何操作呢？

將資料 push 進 dataLayer

首先我們要知道什麼是 dataLayer：一個 GTM 內部的全域變數，它能動態存取網頁的使用者行為數據。

更進一步探索它的 JSON 架構，可以在網頁上使用開發者工具(F12)的 console 欄，輸入 dataLayer，其實跟它的名字一樣就是層層分明的資料層 (Data Layer)。

在 F12 中查看 dataLayer

你會發現 GTM 測試欄位左邊有幾個事件，dataLayer 裡面就有幾個 object。
再把 object 點開（這裡以 Window Loaded 為例），會有 event 和 GTM 給的事件 id，而這個事件（gtm_load）其實就是「觸發條件」裡的「視窗已載入」。

因此，我們可以依樣畫葫蘆用 dataLayer.push 自己寫一段觸發條件把資料送進 dataLayer ，就可以在 GTM 裡面操作了：

開始設定自訂事件

先宣告 dataLayer，避免發生 undefined error

再設定你要 push 進去的數據

這裡我們用「nav a 點擊偵測」和 ajax 事件舉例（jQuery）：

var dataLayer = window.dataLayer || [];

// example 1: detect nav a tag click
$('nav a').click(function(){
  var $text = $(this).text();
  dataLayer.push({
    'event': 'menu_click',
    'menu_text': $text
  })
});



// example 2: detect ajax post success or fail
$.ajax({
  type: "POST",
  url:"{{ your file path }}",
  data:"{{ your data }}"
}).done(function(data){
  dataLayer.push({
	"event": JSON.parse(data).event,
	"ajax_resoult": JSON.parse(data).result
  });
}).fail(function(x,e){
  dataLayer.push({
    "event": "post_fail",
    "fail_log": x.responseText,
    "fail_type": e
  });
}

"event": "menu_click" 就是我們自訂的觸發條件名稱，而 "menu_text": $text 就是「變數」裡面的 dataLayer (資料層變數)。


程式端完成之後，就可以回到 GTM 介面開始設定了。

GTM 介面

首先在「觸發條件」新增一個「自訂事件」，這裡一樣以「nav a 點擊偵測」為例，名稱就是剛才 push 進去的 "menu_click"：

在「觸發條件」新增 "menu_click" 「自訂事件」

接著在「變數」新增一個「資料層變數」，名稱就是剛才 push 進去的 "menu_text"。選版本 1 是因為 menu_text 在第一層。

「變數」新增 "menu_text"「資料層變數」。

如果想要抓的東西在更深的子層，可以選「版本 2 」往子層找。
例如: gtm.element.children.0.alt( 抓取元素子層第 0 個元素裡的 alt 屬性。"."代表下一層 )，這個通常運用在單一元素的點擊事件。




而在「變數」和「觸發條件」都設定好之後，新增「代碼」把剛才的值都貼進去就大功告成了。

新增「代碼」把剛才的值都貼進去。

結語

如果觸發條件或變數不是 GTM 裡頭的預設值時(例如 ajax response)，就可以考慮用 dataLayer.push 產生自訂事件。只要學會這招，大部分的 UX 統計數據都可以靠自己寫一段 JavaScript 獲取了👍。

若使用的是 GA4，可以參考【GA4 基本設定：內部 IP、GTM 自訂事件、跨網域設定】，push datalayer的方式沒有變，只是GTM介面不一樣而已。