Google tag manager 簡易教學

1. Google Tag Mangaer
簡單介紹GTM

2. GTM vs GA
● Google Tag Manager = GTM
管理“代碼”的工具
● Google Analytics = GA
“代碼”的一種，分析網站的資料，
如：流量，來源

3. GTM的一些術語
帳戶：管理的範圍，可以有多個“容器”。
容器：指定domain，可以有多個“代碼”。
代碼：要放入的廣告代碼，可以有多個“規則”。
規則：啟動代碼的條件，可以有多個“巨集”。
巨集：用的詞很怪，表示key:value的變數。

4. 帳戶
一個公司基本上用一個帳戶管理即可。
可以有多個使用者，有不同權限管理一個帳戶。

5. 容器
主要分為二類：web容器，mobile app容器
● web容器，可以指定指定多個網域。
● 但一個mobile app容器，只能指定一個mobile
app。

6. 代碼
網頁上，
可以要放的廣告
代碼如右所示

7. 規則
決定“代碼”
的啟用時機。

8. 巨集{{}}
● 巨集是“名稱”與“值”的組合，其中“值”會在執行
時期由系統填入。
● 可以根據動態條件，在執行階段期間，從一個
巨集的“值”，轉成另一個巨集的“值”。

9. DEMO - 1
任務：加入GA，觀查網站所有流量
● 新增代碼：選擇GA（規則：所有頁面）

10. 代碼-事件監聽器
讓gtm監聽網頁上發生的事件：
● 點擊監聽器：{{event}} 等於 gtm.click
● 表單提交監聽器：{{event}} 等於 gtm.formSubmit
● 連結點擊監聽器：{{event}} 等於 gtm.linkClick
● 計時器監聽器
● 歷史紀錄監聽器
● JavaScript 錯誤監聽器

11. 巨集{{}} - 資料層變數
網頁加上底下的 js code
funciton sendData()
{
dataLayer.push({
‘event':’VirtualPageview’,
‘virtualPageURL':’/order/step1′,
‘virtualPageTitle’ : ‘Order Step 1’
});
}

12. DEMO - 2
任務：網頁加入js code，用以追踪虛擬頁面

13. 巨集{{}} - 對照表

14. DEMO - 3
任務：不需要IT，也可以追踪虛擬頁面
● 新增代碼：選擇監聽器（規則：所有頁面）
● 新增代碼：選擇GA（規則：監聽器事件）

15. 參考：
● 事件監聽器：
https://support.google.com/tagmanager/answer/3415369?hl=zh-Hant
● How to Fire a Virtual Pageview in Google Tag Manager：
http://www.lunametrics.com/blog/2014/09/10/fire-virtual-pageview-google-tag-manager/#sr=g&m=o&cp=or&ct=-
tmc&st=(opu%20qspwjefe)&ts=1418637831
● Event Tracking in Google Analytics Universal through Google
Tag Manager：
https://www.youtube.com/watch?v=-H_TikHFfso