Google Tag Manager 實用自定義 Variable 和 Trigger

單獨爲每個埋點建立一個個 Tag 和 Trigger, 未免太過麻煩。這裏記錄幾個實用的自定義變量，以提高效率。

Google Tag Manager 支持多種類型的自定義變量，前端同學可自行選擇使用哪些。

根據 CSS Selector 獲取目標元素

設置變量名爲 Find Closest, 變量類型爲 Custom JavaScript, 腳本內容如下：

function() {
  return function(target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

下面會有具體應用。

自定義 GA Event Category / Event Label 變量

在關聯配置 GA 的 Event track 類型中，可以使用變量，而不用把值寫死。同樣是先命名變量，設置變量類型爲 Custom JavaScript。
腳本內容示例如下：

function() {
	var el = {{Find Closest}}({{Click Element}}, '[data-label]');
	return el ? el.dataset.label : ''；
}

腳本中出現的 {{Find Closest}} 就是上面自定義的變量 Find Closest，雙大括號是調用取值語法。
不同的是，{{Click Element}} 是 Google Tag Manager 內置變量，表示被點擊的 DOM 元素。
selector 可自行改寫。

該變量的作用是獲取到被點擊目標元素上的 data-label 值，沒有則返回空字符串。

自定義 Data Layer 變量

如果需要手動上報的話，這裏可以新建一個 Data Layer Variable 類型的變量，所定義的值可以被 window.dataLayer 上報。示例如下：

// 注意：此處代碼需要在自己的頁面中添加
window.dataLayer.push({
  'event': 'track_custom_event',
  'xxx': '待上報的值'
})

其中 xxx 即爲此處需要定義的 Data Layer Variable Name。

再建立一個自定義事件變量，變量類型選 Custom Event。

然後，可以建一個 Custom Event 類型的 Trigger 來響應手動上報事件。
其中 Event Name 可使用正則表達式，如：[A-Z0-9_]+。
注意，需要加一條匹配規則，用來排除官方的事件類型 - gtm，示圖如下：

以上。