GTM
Google Tag Manager (GTM)，代碼管理工具，協助你線上更新程式碼。
- 能夠在每個頁面下客製化程式碼
- 不需部署，直接透過 GTM 來更新
常見術語
- 帳戶：某某公司
- 容器(container)：公司裡的各個專案
- 代碼(tag)：程式碼管理
- 觸發條件(Trigger)：定義代碼的執行時機
- 變數(Variable)：定義觸發條件的細節，可設定共用
連結資訊
載入流程
GTM 整體架構為：帳戶>容器(可多個)> 三大架構 (代碼、觸發條件、變數)
- 新增帳戶 > 容器
- 容器裡有追蹤 code，貼到自己網頁
- 最後記得要按左上角提交，透過 Chrome 插件可觀看是否有正常提交
- 提交後若插件變成藍燈表示安裝成功
GTM 三大架構
如果看懂下面這句話，就瞭解 GTM 精髓
設定好觸發條件，觸發時就會指定對應的代碼，同時可善用變數來統一管理常用資訊一、代碼
- 第三方追蹤插件 (FB像素、GA、Mixpanel)
- 你自己寫的 JS
二、設定觸發條件
做什麼動作時可以觸發代碼，例如
- 做點擊事件時，可以觸發特定代碼
三、變數
自訂常用的功能設定為變數，內建便有些常用變數，也可以自訂
內建則會有
- URL
- EVENT
- 設定常用變數字串
左側功能列
- 總覽：顯示首頁儀表版
功能開發流程
我要在哪些事件(網頁載入、點擊元素)上，執行特定程式碼我希望在哪些頁面執行哪些動作時，會觸發程式碼1.測試功能
- 點選右上角「預覽」功能
- 同個瀏覽器開分頁時開啟網頁就能瀏覽
2.查詢版本
- 點擊左上選單的「版本」
- 可設定還原版本
3.全頁面載入 GA
- 左側選單點擊「代碼」，新增代碼 > 自訂 > 自訂 HTML
- 將 GA 追蹤 CODE 放進去
- 設定觸發條件 All Pages
4.設定 FB 購買事件
- 觸發條件：設定頁面瀏覽，page rul 含購買網址
- 程式碼：FB 購買事件程式碼
5.點擊按鈕加入購物車
- 使用變數功能>內建變數 > 設定 > Click Classes
- 觸發條件> 點擊-僅連結
6.偵測滾動深度
7.設定常用變數在字串
- GA
- tel、FB ID
- 要將變數用在程式碼，請在 CODE 裡面加上 兩個雙刮號
8.將程式碼整理至左側資料夾
FAQ
Q：GA、GTM 是否一樣？
A：不一樣，GA 是數據收集，GTM 是設定觸發程式碼(藉由使用者事件來觸發程式碼)
Q：網址規則
- Hostn
- Page Path： /course.html
- Page URL：www.hexschool.com.tw/course.html