Google tag manager-web analytics101

@2016圖靈數位@2016圖靈數位
Google Tag Manager
2016.06.29

@2016圖靈數位
 Google Tag Manager
 介紹
 設置
 應用
 其他
 Q&A
今日主題

@2016圖靈數位
3
Dennis Huang
│現職
 圖靈數位股份有限公司創辦人
│簡介
--不要操心工具，讓您專注數據--
收集數據很容易，但收集有用的數據很難。
圖靈數位專門規劃一系列的數據規劃，從
規劃，佈署，收集，監控，優化，利用，管理。
一手包辦!

 Google Tag Manager (GTM)是一項代碼管理系統，專用來協助您輕鬆迅速地更
新網站或行動應用程式的代碼與程式碼片段 (例如用來分析流量和行銷最佳化的
代碼)。
 您可以透過「代碼管理工具」的使用者介面加入及更新 AdWords、Google
Analytics 、Firebase Analytics、Floodlight 和第三方/自訂代碼；這樣就不必直接
修改網站程式碼，不但能減少錯誤，設定代碼時也不需要找開發人員幫忙。
2012
誕生
360
Suite
31種
判斷資料
26+
預設串接
什麼是GTM

請不要再說，直接交給資訊人員處理，他們不懂媒體的運作原理與應用策略。
告知埋設位置
提供代碼文件
回報工期排程
偵錯檢查
標籤管理工具
Conversion
Analytics
Remarketing
Other

主要功能-佈碼管理
如果代碼一多，非常不好控管。
Adwrods轉換 Adwrods 再行銷 Google Analytics Facebook pixel
3 rd PartyAlexa comscore 功能代碼
還可能會…
 打亂網頁架構
 代碼闕漏
 埋錯位置
 對手知道你的策
略。

佈碼管理舉例
 使用GTM之前
首頁
• Google
Analytics
• AdWords
Remarketing
• Facebook
Remarketing
產品頁
• Google
Analytics
• AdWords
Remarketing
• Facebook
Remarketing
• 電商追蹤代碼
感謝頁
• Google
Analytics
• AdWords
Remarketing
• AdWords
Conversion
• Facebook
Remarketing
• Facebook
Conversion

 以後不用在麻煩技術人員埋設眾多代碼，只要請他們埋設GTM即可。
首頁
• Google Tag
Manager
產品頁
• Google Tag
Manager
感謝頁
• Google Tag
Manager
佈碼管理舉例

GTM附加好處1-自動生成測試環境
代碼完成測試代碼發佈
 GTM代碼埋好之後，會自動準備測試環境，條件設置後可選擇預覽
環境，在真實環境偵錯，避免上線出現突發狀況，杜絕錯誤。

GTM附加好處2-中央管理
 統一平台作業，版本控制。
代碼控制
版本 2 (線上)
代碼數量 5
時間一天前
發佈者 A
版本 1 (還原)
代碼數量 4
時間七天前
發佈者 B

20.11 S
GTM附加好處3-減少載入速度
 加快代碼執行，網站架構不同，改善效果不一定。
感謝頁
• Google
Analytics
• AdWords
Remarketing
• AdWords
Conversion
• Facebook
Remarketing
• Facebook
Conversion
8.5 S
感謝頁
• Google Tag
Manager

GTM前置作業
 你一定要有的
 Google服務帳號
 GTM帳號
https://www.google.com/analytics/tag-manager/
 檢查工具 Google Chrome Plugin – Tag Assistant
 https://chrome.google.com/webstore/detail/tag-assistant-by-
google/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=zh-tw
 確認網站上的編號是不是我們的

Tag Manager 帳戶架構
產代碼

後台
管理區
功能區
設定區
記錄區
版本

• 代碼 (Tag)
• 內建: 26種內建代碼
• Google Analytics
• Google Adwords
• ….
• 自訂:
• 自訂Html代碼
• FB Pixel
• 3rd Party
• 自訂圖片代碼
代碼

觸發條件
• 觸發條件 (Trigger)
• 網頁載入時，根據觸發條件判斷代碼是否執行
• 一個完整能執行的代碼，都要有一個正確的觸發條件來觸發
• 觸發條件就是一個運算式
• {{網頁}} 等於 http://www.simple.com.tw
• 指標點擊某個物件。

變數
• 變數 (Variables)
• 可提供給代碼、觸發條件使用
• 內建變數
• Page URL
• Event
• Click Element
• 自訂變數
• 自動事件變數
• 資料層變數

• 代碼、觸發條件、變數一起工作就組成了容器
• 編號格式 GTM-XXXXX
容器
變數
觸發條
件
代碼
容器

GTM Jargon 舉例
我想要在購買完成頁放入Google Adwords
轉換代碼，當有用戶到該頁時，就會觸發。
代碼 :
Google Adwords
轉換
觸發條件 :
URL要等於
變數 :
完成訂單的URL
容器 :
Google Tag
Manager 代碼。
版本 :
1
Datalayer : {
訂單號 : 201606290001,
購買品項 : XXX,
產品金額 : 1,000,
數量 : 2,
訂單總計 : 2,000 }

Googne Analytics事件佈署
曝光次數
圖片點擊
主要目標
圖片點擊
主要導航
點擊
(此網頁為示意圖，僅提供教學用途)

Googne Analytics事件佈署
• GTM後台設置，不用請工程師埋設代碼
• 節省時間
• 不會改壞網站
• 避免被攻擊

網站偵錯

網站偵錯
GTM + Google Analytics 報表，快速找出網站的BUG ，或是被植入的蠕蟲與病毒。

網站更改

網站更改
• GTM後台設置
• 但要會一點jQuery
• 防爬蟲

• 不用跟工程師解釋Google Analytics。
• 只要請他們把原有資料再整理一次。
• 雙邊配合會更快

增強電商報表
讓您了解您的訪客在您的網站上到底發生了什麼事情。

Other Tag Management
- qubit
- http://www.qubit.com/solutions/tag-management
- - Google Tag Manager
- - http://www.google.com/tagmanager/
- Webtrekk
- https://www.webtrekk.com/en/solutions/tag-integration/
- Adobe Digital Tag Manager
- http://www.adobe.com/solutions/digital-marketing/dynamic-tag-management.
html

Study
- - Google Tag Manager Youtube
- https://www.youtube.com/watch?v=KRvbFpeZ11Y
- - Google Tag Manager Fundamentals
- https://analyticsacademy.withgoogle.com/course/5
- simoahava
- http://www.simoahava.com/analytics/ecommerce-tips-
google-tag-manager/#gref
- - lunametrics
- http://www.lunametrics.com/gtm-book/

那個 .. 講到現在GTM該怎麼結論?
管理網站代碼的好工具
能減輕行銷人員與IT人員溝通的時間
能減輕IT人員與行銷人員溝通的痛苦
也就是說行銷人員與IT人員都能夠過GTM完成許多工作
如何學好GTM
HTML, DOM 要懂
Javascript 稍微懂一點
GA操作及原理要熟練
往data layer死裡鑽
常常摸、每天跟它當好朋友

Q & A

Dennis Huang
創辦人
0911-119312
dennie@Turingdigital.com.tw

Google tag manager-web analytics101

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Similaire à Google tag manager-web analytics101

Similaire à Google tag manager-web analytics101 (20)

Google tag manager-web analytics101

Notes de l'éditeur