分類: Google Tag Manager

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匯出檔給各位參考,有任何的想法也歡迎進一步交流囉。

點擊下載檔案

Google Tag Manager

[GTM 教學] 什麼是 Custom templates 自訂範本

ㄧ. 什麼是 GTM 自訂範本?

Custom templates allow you to write your own tag and variable definitions so that others within your organization can use them alongside the built-in tag and variable templates.  Google Tag Manager

Custom templates 用一句話來說就是將重複性的代碼轉為模板。

GTM 官方的解釋來說,就是提供客製化代碼的模板,讓使用者可以在模板化的情況下輸入變數,輕鬆的創建和共享自訂的 JavaScript 和 HTML 設置。

二. 設定教學

首先進入 GTM Custom templates 自訂模板後,可以看到四個細項可以選擇:

  • 資訊:資訊欄位是用來告訴使用者 templates 的使用功能和敘述,不管輸入什麼都不會影響到此模板接下來程式的執行
  • 欄位:用於設定使用者的介面
  • 程式碼:當此模板被觸發時,會執行的程式,細節待會會再補充
  • 權限:可用於限制程式碼擁有多少操作權限

1. 設定欄位:

點選 Custom templates 欄位後,使用新增欄位,能選擇的類型蠻多的,有文字、下拉式選單、CheckBox、按鈕……等,這邊使用文字輸入來介紹,選擇新增文字輸入欄位後,使用者會在介面上看到一個輸入文字的方框。

在輸入文字的上方點擊齒輪,可以看到更細項的設定,而將文字輸入的命名為 endPoint,這邊的命名在待會的程式碼會用到,可以留意一下。

另外也可以限制使用者輸入的值,例如增加驗證規則,這邊設定是讓使用者需輸入 https 的規則運算式。

關於更多 Custom templates 欄位的介紹可以參考 GTM 官方這篇:Custom templates quick start guide

2. 設定程式碼:

Custom templates 程式碼的部分是使用 2019/8月官方推出的 addEventCallback 這個 API 來寫的,功能簡單來說就是當觸發 dataLayer events 完成時,發送 request 到指定 URL,可用於製作判定事件完成與否的監控器。

關於更多其他的 Custom templates API 方法可以參考 GTM 官方這篇:Custom template APIs

此次完整程式碼如下:

// Require the necessary APIs
const addEventCallback = require('addEventCallback');
const readFromDataLayer = require('copyFromDataLayer');
const sendPixel = require('sendPixel');
const getTimestamp = require('getTimestamp');

// Get the dataLayer event that triggered the tag
const event = readFromDataLayer('event');

// Add a timestamp to separate events named the same way from each other
const eventTimestamp = getTimestamp();

const endPoint = data.endPoint;
const batchHits = data.batchHits === 'yes';
const maxTags = data.maxTags;

// Utility for splitting an array into multiple arrays of given size
const splitToBatches = (arr, size) => {
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i += size) {
    newArr.push(arr.slice(i, i + size));
  }
  return newArr;
};

// The addEventCallback gets two arguments: container ID and a data object with an array of tags that fired
addEventCallback((ctid, eventData) => {

  // Filter out tags that have the "exclude" metadata set to true
  const tags = eventData.tags.filter(t => t.exclude !== 'true');
  
  // If batching is enabled, split the tags into batches of the given size
  const batches = batchHits ? splitToBatches(tags, maxTags) : [tags];
  
  // For each batch, build a payload and dispatch to the endpoint as a GET request
  batches.forEach(tags => {
    let payload = '?eventName=' + event + '&eventTimestamp=' + eventTimestamp;
    
    tags.forEach((tag, idx) => {
      const tagPrefix = '&tag' + (idx + 1);
      payload +=
        tagPrefix + 'id=' + tag.id +
        tagPrefix + 'nm=' + tag.name +
        tagPrefix + 'st=' + tag.status +
        tagPrefix + 'et=' + tag.executionTime;
      
      log(['GTM_Tag Status'],tag.status);
    
    });
    log(['GTM_This is payload'],payload);
    
    sendPixel(endPoint + payload, null, null);
  });
});

// After adding the callback, signal tag completion
data.gtmOnSuccess();

// 代碼結束時呼叫 data.gtmOnSuccess。
data.gtmOnSuccess();

可以看到 const endPoint = data.endPoint; 這邊的 endPoint 就是使用者輸入的文字框內的值,這邊將參數附加在 endPoint 後面,最後再用Custom template 提供的 sendPixel API 來向指定的 URL 發送 GET 請求,最後代碼結束時需呼叫 data.gtmOnSuccess()

3. 設定權限:

從 Custom templates 權限內可以看到讀取資料庫的部分有輸入 event ,是因為我們在程式碼內有使用到 const event = readFromDataLayer(‘event’) 所以要給予 event 的權限。

關於更多 Custom templates 其他權限可以參考GTM官方這篇:Custom template permissions

4. 設定 GTM 代碼:

設定好 templates 後,你就可以在代碼內選取剛剛設定好的範本,而畫面就是剛剛我們在範本欄位內選擇的畫面,至於執行的程式就是我們剛剛寫入的範本程式。

基本上這樣就完成了一個 GTM 的 Monitor,最後只需要再將 Request GET 的部分將資料轉入資料庫就完成囉!

那 [GTM 教學] 什麼是Custom templates 自訂範本 就到這告一段落,如有任何問題歡迎留言!

此篇文章轉載至 Max行銷誌

 

Google Tag Manager

第一次使用 GTM 就上手 – 無痛轉移 GA to GTM

關聯工具

Google Analytics (GA) – Universal Analytics ( analytics.js )

Google Tag Manager (GTM) v2

技術難度

中低

前置知識

何謂 GA, 何謂 GTM

最近更新日期

2016.06.13

代碼管理工具 Google Tag Manager ( GTM ) 是  Google 大神推出的管理各種網頁上追蹤標籤的工具。他是一個管理工具,而不是一個新的追蹤機制。這是一開始新手會搞不清楚的地方。由於是 Google 的產品,因此最初階使用,同時也是最完整的整合支援,就是自家的  Google Analytics ( GA ) 了。使用 GTM 來埋設 GA 總體來說並不會影響 GA 的追蹤 ( 但如果深究,是多少有些影響流量的,但這邊就先不提這一部份) 。

Read More