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

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

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

Index

Why / GTM 安裝還要你教?
How 如何安裝與設定
自定與送出 Custom Event / Send Event
Tools Debug 工具
Conclusion 結語
Ref. 參考內容

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 的觸發點和事件內容，一一記錄為文件
免得未來網站上安插了大量目地不明確的追蹤事件而難以維護