Google Tag Manager 的方便性，讓使用者可以輕鬆的加入一些行銷用的 JavaScript 而無需動到程式碼上版。這篇來實作 Google Analytics 中沒有監聽到的 onChange 事件 ( 像是下拉選單的變化 )。
內容
1. 在 Tag 代碼中，新增一個「自訂 HTML」的 GA4 OnChangeEvent 代碼。其中 HTML 部分撰寫如下：
|
1 2 3 4 5 6 7 |
<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 如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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] } }); } } |
參照條件為 GA4 OnChangeEvent 代碼。程式碼內的事件名稱 ‘on_change_select’，是你在自定義事件時要呼叫的名稱
3. 根據你的業務場景，新增一個觸發條件。其中觸發條件為「自訂事件」，事件名稱就是 ‘on_change_select’
4. 最後，新增一個 Tag Ga4 事件，你就可以選擇在第三步時新增的觸發條件
5. 打開 GA4 的 Debug View 來觀察是否成功觸發
參考資料
1. Google Tag Manager Click Tracking: All You Need to Know
2. 【GTM】onchangeイベントをトリガーに、GA4にデータを送信する方法
3. #GTMTIPS: TRACK SELECTION IN DROP-DOWN LIST
4. Google Analytics Event Tracking Form select
