給工程師的什麼是 GTM?

什麼是 GTM?
追蹤碼? 使用者行為分析? 電商相關又扯上增強型電子商務(Enhanced-Ecommerce)🤯
Google Tag Manager (GTM), Google Analytics (GA), Facebook Pixel/像素 (fbq) 追蹤碼(tracking code) 一大堆相關服務這些東西和工程師有關嗎?
這些東西完全就是行銷的工具，為什麼工程師要處理? 應該是前端工程師處理，還是後端工程師處理呢?
從工程師角度簡單說明 GTM。

安裝與設定的部份可以參考: 工程師也會的 Google Tag Manager (GTM) 追蹤碼設定教學

Index

• Why 為什麼工程師要暸解 GTM/GA?
• 什麼是 GTM/GA/Pixel?
  • Google Tag Manager (GTM)
    • trigger, tag, variable 關係圖
  • Google Analytics (GA) Enhanced-Ecommerce
  • Facebook Pixel(像素)
• 結語
• Ref. 參考內容

---

Why 為什麼工程師要瞭解 GTM/GA?

行銷上的使用就不多說，那除了行銷目的之外，為什麼要追蹤使用者行為？
對工程師這邊有什麼幫助呢?

• 暸解網站或 APP 上使用者的使用時間、偏好~
• 記錄新功能、新頁面的使用熱度或是 A/B Test 的記錄。(註1)
• 透過自定事件 (event) 追蹤特定任務;
  例如: 有多少個使用者點擊 看更多 連結
• …

另外~
為什麼這些服務都需要用到 javascript (js) 置入追蹤碼呢? (這個部份也是讓行銷人員頭痛的地方…)

目前用 js 取得、監聽使用者在瀏覽器上的作行為 (點擊按鍵、連結，捲動到指定位置…) 是最為快速、有效的!

What 什麼是 GTM/GA/Pixel?

先簡單說明 Google Tag Manager (GTM), Google Analytics (GA), Facebook Pixel (fbq) 三者的關係和功能。
(這是較常見的三個服務)

首先~ Google Analytics (GA) 和 Facebook Pixel 是目前最為流行的使用者行為追蹤工具/服務

當然~ 市面上還有更多其它的追蹤服務可用，amplitude.com、mixpanel.com 等…
本次就不討論~~

這些眾多的服務中就會出現相似又相異的需求，每個服務都需要在網站上安插 javascript 追蹤碼…

(google analytics tracking code)

(facebook pixel tracking code)

這麼一來，每次要追加、修改追蹤碼、追蹤內容都需要找工程師加入這些 js 程式然後更新網頁、APP 好像有點麻煩，行銷人員不能自己處理嗎? 🤣

為了解決上述的問題 Google Tag Manager (GTM) 出現了!

而 GTM 帶來的優點有下:

• 託管理所有 Google 自家與第三方追蹤套件 javascsript library
  (GTM 內建支援的其它第三方服務)
• 開放非工程人員直接設定追蹤任務與事件內容
• 可以隨意插入自定義 HTML
  
  (在每一頁 console 顯示 cola is pig)
• GTM 設定的版本管理
  改壞、設定失敗? 輕鬆回到上一個正常版本
  (GTM 的版本控制)
• GTM 權限管理

可以將 GTM 開放給廣告行銷人員(外包公司)修改、設定，再由擁有者進行核可、發佈動作(Publish、approvals)

就上述優點~
看起來使用 GTM 之後就世界和平囉?
將追蹤碼安裝交還給行銷人員了(?!)
當然沒這麼容易，接著看下去… 🤯

---

各個工具各有一片天，有興趣的工程師們再各自深入研究。

這邊簡單說明三個工具各自主要負責的任務和功能~

Google Tag Manager (GTM)

統合各個工具，觸發與整合追蹤事件

簡單來說，使用 GTM 管理、觸發其它多個第三方套件

(GTM 可以連當 GA, FB Pixel, Google Ads…)

GTM 也和古早時期 GA 一樣，需要安插 JS 程式碼。
一樣的是~ 安裝方法非常簡單依教學處理即可

不同的是~ 安裝 GTM 之後，其它 GA, FB Pixel… 等套件就可以透過 GTM 載入了

下面先簡單說明 GTM 幾個主要功能:

GTM Variables / 變數

設定 GA 或 Pixel 追蹤代碼 ID

在 GTM 的 Variables 設定 GA tracking ID，功能就像程式裡的 const 一樣

.
.

也可以透過進階的 GTM 使用方法動態取得畫面上特定數值，如金額或數量等…
但是.. 這樣的方法操作人員必須有一定的程式基礎 😭

(透過一段程式取得商品金額)

Tag / 程式 / 代碼

設定需要執行的實際動作

例如:
傳送購物車結帳事件(金額、數量、商品內容)至 FB Pixel

Triggers / 觸發器

設定使用者執行何種動作、行為時觸發 Tag

可以自定各種規則、條件

例如:
– 點擊 結帳 鈕、連結時觸發上述的 Tag 內容(e.g. 送資料至 FB Pixel)
– 僅在 A 商品，結帳後觸發指定的 Tag

GTM 小結

GTM 看起來很複雜其實拆開來看就容易理解多了~
上述的三個功能各司其職

• 以文字說明來看: 使用者執行特定動作(點擊購物鈕) -> 發送追蹤事件內容(訂單編號、金額)至 Facebook Pixel
• 以 GTM 設定角度來看: Triggers -> Tag + Variables

也可以從 trigger, tag, variable 三者的關系圖暸解整個流程~

Google Analytics (GA)

因為提到 GTM 就一定得講一下 GA
GTM 與 GA 兩者相輔相成~

(利用 GA 查看特定頁面的瀏覽狀態)

GA 博大精深，這裡只簡單說明其中的增強型電子商務功能

Enhanced-Ecommerce / 增強型電子商務報表

將特定的電商事件 (event) 整合為下列報表~(註2)

當然，也可以傳送自定義的事件，另行觀察、統計一些行為、事件 (event)

Facebook Pixel (fbq)

FB Pixel 是目前台灣較為流行的追蹤、廣告服務

主要目標是推銷、行銷，例如當使用者看過、點擊、查詢 機票 相關內容之後…

短時間內你的 FB 的時間軸 (timeline) 將會是滿滿的 機票、旅行 相關內容

.
.
.

pixel 的相關事件 (event) 和 GA Enhanced-Ecommerce 行為類似但名稱有點不同，大多也是定義查看商品、加入購物車、結帳等事件… (註3)

.
.

Conclusion 結語

• 就我看來… 其實行銷人員要編寫、安裝 GTM 等服務是有門檻的，無論如何多少還是需要工程師幫忙。
• 其實前端、後端工程師都能處理這些內容，但因為需要編寫 javascript 並處理一些瀏覽器非同步問題 🤔
  個人可能偏向讓前端工程師主導
• GA 和 Pixel 的報表、操作部份我不熟再加上篇幅關係… 實在是寫不完 😓
  如果想深入學習 GA 報表的人，可以到 youtube 上找到非常多的教學影片喔!!
• 在寫文時上傳的範例圖檔名因為含有 ga, analytics, pixel, tracking 等字眼會被 chrome 的擋廣告套件擋掉，還真讓人不方便 :/

Ref. 參考內容

• chrome extension: page-analytics 連結 GA 資料，在頁面上使用顏色清楚標示出使用者點擊百份比
  很方便就能看出，頁面上哪些區塊受到使用者歡迎
  (註1)

• GTM Enhanced-Ecommerce Data-Layer: https://developers.google.com/tag-manager/enhanced-ecommerce#data-layer(註2)
  部份事件將自動被歸類至電子商務報表裡:
  e.g.

  • productClick
  • addToCart
  • checkout
  • .
    .
    .

• Facebook Pixel Event: https://developers.facebook.com/docs/facebook-pixel/reference (註3)

• How to pull data relative to the clicked element in Google Tag Manager 15 分鐘教你如何在 GTM 裡取得頁面上的動態數值