工程師也會的 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.
自定事件的參考~

• GTM Adding a Product to a Shopping Cart
• Facebook Pixel Advanced

因為是自行編寫 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. 參考內容

• GTM 教學影片:
  • How to install Google Analytics with Google Tag Manager (2020)
    補充~ GA in GTM
  • How to setup Ecommerce Conversion Tracking in Google Tag Manager | Part 1~3
  • https://www.youtube.com/watch?v=xgLGWvhOyHU
  • https://www.youtube.com/watch?v=3G5wvjC1rHo
  • https://www.youtube.com/watch?v=OpUtb_Grl2A

• 【GTM 不求人】GTM 與資料層 Data Layer 的關係
  可以暸解一下 data layer 是什麼~ 🙄