[指南] Google Tag Manager 幫 GA 加上 onChange 監聽事件 @地瓜大的飛翔旅程

章節連結

內容
參考資料

Google Tag Manager 的方便性，讓使用者可以輕鬆的加入一些行銷用的 JavaScript 而無需動到程式碼上版。這篇來實作 Google Analytics 中沒有監聽到的 onChange 事件 ( 像是下拉選單的變化 )。

內容

1. 在 Tag 代碼中，新增一個「自訂 HTML」的 GA4 OnChangeEvent 代碼。其中 HTML 部分撰寫如下：

<script>
  if (document.addEventListener) {
    document.addEventListener('change', {{generic_on_change_event_handler}}, false);
  } else if (document.attachEvent) {
    document.attachEvent('onchange', {{generic_on_change_event_handler}});
  }
</script>

if (document.addEventListener) {

document.addEventListener('change', {{generic_on_change_event_handler}}, false);

} else if (document.attachEvent) {

document.attachEvent('onchange', {{generic_on_change_event_handler}});

}

</script>

{{ generic_on_change_event_handler }} 是你要在「變數」中，新增一個名為 generic_on_change_event_handler 的內容。觸發條件為全部網頁
2. 新增一個名為 generic_on_change_event_handler 的變數，內容則是自定義的 JS 如下：

function() {
  return function(e) {
    window.dataLayer.push({
      event: 'on_change_select',
      eventModel: {
        text: e.target.options[e.target.selectedIndex].text,
        value: e.target.options[e.target.selectedIndex].value,
        selected_element: e.target.options[e.target.selectedIndex]
      }
    });
  }
}