Growth, 工具

工程師也會的 Google Tag Manager (GTM) 追蹤碼設定教學

GTM 應該怎麼安裝、設定?如何和 GA 串接?
教你輕鬆在 GTM 上設定 GA 的增強型電子商務(Enhanced-Ecommerce)
其實~ GTM 安裝不難,但是設定和使用就有些眉角 😎
本文就我不專業說明 GTM 的設定、串接過程~

接續 "工程師的什麼是 GTM?"

Index


Why / GTM 安裝還要你教?

如~ 前言提到在網站上安插 GTM 並不難,追蹤碼置入到頁面上就好了。
但是要怎麼設定 GA, FaceBook Pixel 呢? 也是本文主要想分享的部份~

"工程師的什麼是 GTM?" 文內有提到,GTM 可以觸發與連結其它追蹤服務平台,依設定讓 GTM trigger, tag, variable 三者完成我們指定的動作。
(對 trigger, tag, variable 有疑問的人,可以再回顧一下關係圖~)

.
.
.

How 如何安裝與設定

ps: 💡 記得先關掉瀏覽的 廣告阻擋 工具喔,不然測試時會失敗

1- 在網頁內置入GTM 追蹤碼
GTM 追蹤碼的安裝只要依照教學處理非常簡單

另外建議在 gtm 追蹤碼前加一段

window.dataLayer = window.dataLayer || [];

預先定義 dataLayer 待用,避免未定義的錯誤

💡 什麼是 dataLayer?

置入 GTM 追蹤碼後看起來大概像這樣,注意貼上的位置即可~

2- 在 GA 啟用增強型電子商務 / Enhanced Ecommerce


(GA admin 電子商務設定中啟用兩個相關設定)

2-b GA 設定網站幣別
設定一下報表的幣別和確認網址是否正確~

3- 在 GA 取得 tarcking id

4- 新增 GTM variable 設定 GA Track ID

在 Variables - 新增一個 User-Defined Variables

Variable Configuration:
Variable Type: Google Analytics Settings
Tracking ID: 填入 step 3. 的 GA tracking ID



5- 新增 GTM Tag

使用上一步新增的 variable 設定 GA 基本 PageView 功能

  • Tag Type: Google Analytics: Universal Analytics
  • Tarck Type: page view
  • Google Analytics Settings: 上個動作新增的 GA ID
  • 啟用 Enable overriding settings in this tag
  • More Settings -> Ecommerce ->Enable Display Advertising Features -> true -> 啟用 Use Data Layer

並指定 Triggering 為 All Page - Page View

6- ✅ GTM Save -> Preview 或 Submit
這時候 GA 的基本安裝 (pageview event)已經安裝完成,也可以用 tools 檢查

.
.

7- 設定 GA 增強型電子商務 (Enhanced Ecommerce)
GTM 需要把 Enhanced Ecommerce 事件傳遞至 GA,不然事件的傳遞會停在 GTM 這端...

8- 新增 GTM Trigger 負責接收、觸發 Enhanced Ecommerce 事件

  • Event Type: custom event
  • Event: purchase|productDetail|transaction|checkout|contact|addToCart|setUserProperties|setUserId (use regex matching)
  • This trigger fires on: all custom events

因為 Enhanced Ecommerce (EE) 事件有很多個,這邊我選擇用 Regex 正規表達式 一次定義多個 event name。
上述的 EE Event 可以在給工程師的什麼是 GTM? - 註2暸解更多


9- 新增 Tag 負責實際將 Enhanced Ecommerce event 傳送至 GA

  • Tag Type: Google Analytics: Universal Analytics
  • Track Type: Event
  • Category: Enhanced Ecommerce
  • Action: {{Event}}
  • Label: {{Page Path}}
  • Enable overriding settings in this tag:
  • Ecommerce: User Data Layer(true)


10- 將上述 8 和 9 兩個功能互相連結(如上附圖下方的 Trigger 部份)

11- ✅ GTM Save -> Preview 或 Submit
這時候 GA 增強型電子商務 (Ecommerce Conversion) 功能就設定完成囉,也可以用 tools 檢查

.
.
.

12- 安裝 FB Pixel

而 Facebook Pixel ID 的取得,對工程師來說麻煩了許多 😵
你要先有 Facebook 帳號
然後建立、申請一個粉絲頁
接著到 Facebook 企業粉絲管理平台 新增一個 business 像素,這樣才能拿到 pixel ID


13- 新增 Tag 負責安裝、置入 FB Pixel

在 FB business 管理頁可以找到追蹤碼

  • Tag Type: custom html
  • html: 貼上 Pixel 安裝碼

並指定 Triggering 為 All Page - Page View

14- ✅ GTM Save -> Preview 或 Submit
這時候 FB Pixel 就安裝完成了,也可以用 tools Facebook Pixel Helper 檢查

.
.
.

自定與送出 Custom Event / Send Event

我們可以自定義事件由 GTM 介面送出,也可以由網頁上的 javascript 送出,依自己需求處理就可以

因需求關係,這裡說明如何自行透過 javascript 送出~

與例來說~ 將商品加入購物車
在使用者點擊加入購物車鈕後,隨即呼叫下面指令~

// 發送 GTM / GA 事件
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'TWD',
    'add': {
      'products': [{
        'name': '可樂',
        'id': 'sn-cola-112233xx',
        'price': '35',
        'brand': 'coca cola', // optional 
        'category': 'Drink', // optional 
        'variant': 'original', // optional 
        'quantity': 1
       }]
    }
  }
});

// FB Pixel fbq 事件
fbq('track', 'AddToCart', {
    content_name: '可樂',
    content_ids: 'sn-cola-112233xx',
    content_type: 'product',
    value: 35,
    currency: 'TWD',
});

或是一般的自定事件
當使用者打開 banner 時,我們送出一個 event
附帶的參數為使用者目前的所在網址

// 發送 GTM / GA 事件
dataLayer.push({
    event: 'banner/open',
    properties: {
        url: window.location.href,
        path: window.location.pathname,
    },
});

// FB Pixel fbq 事件
fbq('trackCustom', 'banner/open', {
    url: window.location.href,
    path: window.location.pathname,
});

ref.
自定事件的參考~

因為是自行編寫 js 傳送事件,所以工程師們可以自由發揮傳遞的事件名稱、參數等內容

👉 但別忘了把發送 event 的觸發點和事件內容,一一記錄為文件
免得未來網站上安插了大量目地不明確的追蹤事件而難以維護

Tools Debug 工具

下述工具都只是方便 debug,除了套件有正確安裝之外,還要檢查發送出去的事件參數是否有正確。

例如:購物車結帳金額或是訂單編號有沒有正確送出

in GTM UI, GTM Preview

GTM 的工具很多但其實內建的預覽工具就很夠用了

新增或編輯任何內容後,GTM 首頁可以看見 preview 鈕
進入預覽模式 (preview) 後在同個瀏覽器打開目標網站就能看見工具面版了

Tag Assistant

Tag Assistant (by Google) Chrome Extension

能查看透過 GTM 觸發的行為與資料狀態

  • 綠色標記+數字:追蹤標籤運作正常
  • 藍色標記+笑臉:網頁上沒有追蹤標籤或Tag Assistant尚未啟動
  • 藍色標記+數字:追蹤標籤有點小問題
  • 黃色標記+數字:追蹤標籤有問題
  • 紅色標記+數字:追蹤標籤有嚴重的問題


(可以看出成功載入了哪些服務)


(GA 成功送出兩個任務; page view 與 event)

Facebook Pixel Helper

Facebook Pixel Helper - Google Chrome

可以清楚的把 pixel ID, 事件發送的成功與否顯示出來

Conclusion 結語

  • 如果對 GTM 設定流程上還是不懂也建議看看附註的三支影片,內容非常清楚喔~
  • 個人比較喜歡從頁面上寫 js 傳送 event,這麼做對資料掌握度比較高,而且時機也比較好控制

Ref. 參考內容

One Comment

Leave a Reply