GA4打雜實作｜我要打十個！點擊事件自動追蹤器

本次的GA4實作專案，主要是因為發現近期在工作中，每次遇到產品經理release一些新功能後，數據團隊都需要針對許多的點擊按鈕進行事件追蹤，先前的想法比較單純，可能就採取兵來將擋，水來土掩的心態，但久而久之後，覺得這樣的處理設定反而在GTM上產生了一堆的代碼，既管理不易且有點沒效率。

後來想起，以前在書中看過GA大神Ahmed Awwad曾撰寫了一個GA事件追蹤器的特殊腳本程式，可以使用兩個代碼就追蹤多種類型的事件，乾脆我也啟動一個「專屬於「樂屋網」的GA4點擊事件自動追蹤器」專案（有如「葉問1」電影中的經典台詞，"我要打十個！"，只是這個做出來，應該不只打十個🤣），下面就開始分享我整個的設計流程。

目的是為了有效限制觸發的條件（這邊不懂為何要這麼做的話，後面會再清楚解釋），先針對每一個想要追蹤的button標籤中，安插一個自訂屬性Attribute，我們將名稱定義為【data-gtmid】（這一part隨大家喜好，想取甚麼名稱都可以，只要符合HTML的規定就好）。

假設我們在「樂屋網」的「後台首頁」中，我們想知道新功能「預約客戶管理」的點擊次數，就可以在此元素標籤中新增【data-gtmid="menu_advance_guest_manage"】。

當所有預計追蹤的點擊事件，都請工程師埋設好自訂屬性【data-gtmid】後，這時有一個重要的習慣必須養成，就是身為數據團隊的我們，切計要把每一次的埋設資訊都記錄起來整理成表，這樣未來不論是自己管控或交接，才不容易搞混以及有所依據對應。

現在，我們程式端的準備工作都架構完成，下一步就是開啟GTM後台做設定。而為了讓後續的事件觸發，可以附帶我們稍早準備的自訂參數【data-gtmid】，所我們必需增加定義一個新變數（這裡是因為我們「樂屋網」有一些button標籤具有多層的結構，所以需自訂JavaSrcipt程式碼，去往下抓取data-gtmid的值）。

還記得我們先前有提到，希望在觸發條件中做些限制，才多做一個自訂屬性值，原因就在於這樣的技巧，能夠使我們在設定觸發啟動時機，可以只針對有附帶自訂屬性值的點擊才做觸發，其次，我們在設定屬性值名稱時，還特別一率採用btn作為開頭。因此綜上所述，觸發條件才能按下圖這樣設定：

最後一步，就是將剛剛上面新增的自訂變數與自訂觸發條件，通通打包放進我們的代碼設定中，以及為了蒐集多一點的事件資訊，我們還多附加了幾個想追蹤的參數值。

準備妥當，接下來就是等等等！等待用戶的使用數據進入GA中了（GA還有自訂維度需設定，先前有示範很多遍了，這邊就不再多說了😄）。

我們直接跳到Google Data Studio建立數據儀表板，假若我們想追蹤的是在一開始所說的新功能「預約客戶管理」的點擊次數，製作方式也相當簡單，就是將表格篩選器設定為data-gtmid等於menu_advance_guest_manage，下一步，把需要的維度指標拉一拉，完工done！