All posts by Robert

Google Tag Manager數據分析

埋碼小撇步,讓你的GTM更乾淨

前言

現今的數位行銷不管是從網站的事件追蹤或是廣告成效的追蹤,都需要追蹤碼的安裝設定,安裝流程也從早期需要透過資訊工程師的協助,到後來埋碼工具如GTM的推出與快速的普及,讓追蹤碼的埋設這件事情變得更有彈性。而伴隨著AI的興起,藉由傳遞更多的網站訊號給廣告系統,能讓廣告系統學的更快更好,進而提升廣告的成效,但隨著投遞的平台越來越多,可能會讓GTM的可閱讀性變差也讓之後的維護變複雜,下面舉個簡單的例子來說明。

假設今天我們有一個行銷活動,並為了這個行銷活動的宣傳做了一頁式的活動網頁,之後也會做為廣告投遞的到達頁面,為了追蹤客戶在網站上的行為,規劃了以下的追蹤事件來完整追蹤頁面的活動。

代碼名稱 說明
pageview 載入頁面
page_scroll_25 瀏覽頁面百分之 25
page_scroll_50 瀏覽頁面百分之 50
page_scroll_75 瀏覽頁面百分之 75
submit_btn 按下送出按鈕
thankupage 完成活動報名

埋碼規劃

在這個活動中,我們預計會先投放Google Ads以及Facebook的廣告,所以一開始我們會有三個明確的需求,除了最基本的將資料送回GA外,我們也希望讓廣告系統不只收到【完成活動報名】這個事件,而是可以收到過程中的每個事件來加速廣告系統的優化,因此我們將資料彙整到一個埋碼的對照表中,來最為後續埋碼的依據。

常見作法

筆者這邊採用GTM內建的【自訂HTML】類型來埋設Facebook的Pixel、【Google Ads 轉換追蹤】來追蹤Google Ads的轉換事件,加上標準的Google Analytics分析來完成上表的追蹤項目,這是目前常見的埋設方式,可以看到在每一個類別中搭配每一種廣告格式,我們都要針對每個類別分別新增六個代碼,當投放的廣告管道或追蹤的事件還不多時還容易處理,當隨著業務的發展帶動廣告渠道的多元化,加上網頁的追蹤埋設好埋滿的狀況下,整個GTM就會變得很複雜且難以維護,所以下面筆者將會介紹一個方式來減少代碼的數量,並讓埋碼的邏輯可以更一目了然且更易於維護。

作法介紹

接下來我們會透過四個步驟的設定來達成精簡且較易於維護的效果。

    1. 設定資料層變數
        • 首先我們需要先建立多個資料變數,透過選擇【變數】→ 新增【資料層變數】,至於資料層變數的原理可以請大家參考官方文件的說明。

        • 接下來我們會設定如下表的資料層變數,這邊的名稱可以自行設定,但是建議名稱能夠一眼辨識用途,方便後續取用。
      變數名稱 資料層變數名稱
      DL_GA_action GA_action
      DL_GA_category GA_category
      DL_GA_label GA_label
      DL_Adwords_conversion_id Adwords_conversion_id
      DL_Adwords_conversion_label Adwords_conversion_label

    2. 設定觸發事件
        • 我們新增兩個觸發條件,事件類型選擇自訂事件,事件名稱一樣可以自行取名,以清楚明瞭為主。


    3. 設定轉換追蹤
      • 我們透過之前設定好的資料層變數及觸發條件來設定轉換追蹤,我們新增一個【代碼類型】通用Analytics(分析),並設定追蹤類型為【事件】,並在下方的類別、動作及標籤帶入我們剛剛設定好的資料層變數,另外設定觸發條件為我們剛剛設定的自訂事件,設定完後如下圖所示。
      • 之後我們再新增一個代碼類型【Google Ads 轉換追蹤】,並設定其中的轉換 ID及轉換標籤使用前面設定好的資料層變數,觸發條件使用前面設定的自訂事件,設定內容後下圖所示。
    4. 設定代碼
      • 進到最後埋碼的設定,我們從pageview這個事件開始做設定,首先我們新增一個自訂Html,在頁面載入的時候先執行Facebook的標準埋碼並觸發自訂事件,並透過dataLayer.push 推送相關參數到 datalayer中,並由前面三步的自訂變數、觸發事件和代碼轉換追蹤就可以將原本要新增在三個代碼的作業合併在同一個代碼完成,而其中的對應關係可以參考下面的示意圖。
      • 接著我們要來設定三個頁面滾動的追蹤,這邊我們將原本的三個觸發事件合為一個,設定可以參考下圖,另外我們新增一個Scroll Depth Threshold的內建變數並新增一個自訂html的代碼,並引用上面設定好的捲動觸發條件。
      • 我們要埋入的代碼如下,跟前面相比其實我們只新增了一個IF的判斷條件來判斷目前滾動的深度,之後就按照我們對照表埋入各階段的參數值,後續的觸發程序就跟前面的pageview是一模一樣的。
      • 用相同的方式我們可以繼續設定最後兩個事件,只有在觸發條件和參數的部分會有不同,整體的架構基本是都是一樣的,透過這樣的埋碼方式,我們可以將原本18個代碼才能完成的的事情濃縮到6個代碼,並且後續如果要在加入其他廣告的渠道,也只需要在原有的架構上新增代碼即可,如果有投放多家DPA廣告的話,也能夠透過這樣的機制來精簡代碼的複雜度,對於之後維護也會有很大的助益。

最後附上兩個版本的GTM匯出檔給各位參考,有任何的想法也歡迎進一步交流囉。

點擊下載檔案