google tag manager-web analytics101

41
@2016 圖圖圖圖 @2016 圖圖圖圖 Google Tag Manager 2016.06.29

Upload: -

Post on 11-Jan-2017

1.804 views

Category:

Data & Analytics


1 download

TRANSCRIPT

Page 1: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Google Tag Manager

2016.06.29

Page 2: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 介紹 設置 應用 其他

Q&A

今日主題

Page 3: Google tag manager-web analytics101

@2016 圖靈數位3

Dennis Huang

│現職 圖靈數位股份有限公司 創辦人│簡介-- 不要操心工具,讓您專注數據 --

收集數據很容易,但收集有用的數據很難。圖靈數位專門規劃一系列的數據規劃,從規劃,佈署,收集,監控,優化,利用,管理。一手包辦 !

Page 4: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 介紹

Page 5: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Google Tag Manager (GTM) 是一項代碼管理系統,專用來協助您輕鬆迅速地更新網站或行動應用程式的代碼與程式碼片段 ( 例如用來分析流量和行銷最佳化的代碼 ) 。

您可以透過「代碼管理工具」的使用者介面加入及更新 AdWords 、 Google Analytics 、 Firebase Analytics 、 Floodlight 和第三方 / 自訂代碼;這樣就不必直接修改網站程式碼,不但能減少錯誤,設定代碼時也不需要找開發人員幫忙。

2012誕生 360Suite

31 種判斷資料 26+預設串接

什麼是 GTM

Page 6: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

請不要再說,直接交給資訊人員處理,他們不懂媒體的運作原理與應用策略。

告知埋設位置提供代碼文件回報工期排程偵錯檢查

標籤管理工具

Conversion

Analytics

Remarketing

Other

Page 7: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

主要功能 - 佈碼管理如果代碼一多,非常不好控管。

Adwrods 轉換 Adwrods 再行銷 Google Analytics Facebook pixel

3 rd PartyAlexa comscore 功能代碼

還可能會… 打亂網頁架構 代碼闕漏 埋錯位置 對手知道你的策略。

Page 8: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

佈碼管理 舉例 使用 GTM 之前

首頁• Google

Analytics• AdWords

Remarketing• Facebook

Remarketing

產品頁• Google

Analytics• AdWords

Remarketing• Facebook

Remarketing• 電商追蹤代碼

感謝頁• Google

Analytics• AdWords

Remarketing• AdWords

Conversion• Facebook

Remarketing• Facebook

Conversion

Page 9: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

以後不用在麻煩技術人員埋設眾多代碼,只要請他們埋設 GTM 即可。

首頁• Google Tag

Manager

產品頁• Google Tag

Manager

感謝頁• Google Tag

Manager

佈碼管理舉例

Page 10: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

GTM 附加好處 1- 自動生成測試環境

代碼完成 測試 代碼發佈

GTM 代碼埋好之後,會自動準備測試環境,條件設置後可選擇預覽環境,在真實環境偵錯,避免上線出現突發狀況,杜絕錯誤。

Page 11: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

GTM 附加好處 2- 中央管理 統一平台作業,版本控制。

代碼控制

版本 2 (線上 )代碼數量 5時間 一天前發佈者 A

版本 1 (還原 )代碼數量 4時間 七天前發佈者 B

Page 12: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位20.11 S

GTM 附加好處 3- 減少載入速度 加快代碼執行,網站架構不同,改善效果不一定。

感謝頁• Google

Analytics• AdWords

Remarketing• AdWords

Conversion• Facebook

Remarketing• Facebook

Conversion

8.5 S

感謝頁• Google Tag

Manager

Page 13: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 設定

Page 14: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

GTM 前置作業 你一定要有的

Google服務帳號 GTM帳號

https://www.google.com/analytics/tag-manager/

檢查工具 Google Chrome Plugin – Tag Assistant https://chrome.google.com/webstore/detail/tag-assistant-by-goo

gle/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=zh-tw

確認網站上的編號是不是我們的

Page 15: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Tag Manager 帳戶架構

產代碼

Page 16: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

後台 管理區

功能區設定區

記錄區

版本

Page 17: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

• 代碼 (Tag)• 內建 : 26 種內建代碼

• Google Analytics• Google Adwords• ….

• 自訂 :• 自訂 Html 代碼

• FB Pixel• 3rd Party

• 自訂圖片代碼

代碼

Page 18: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

觸發條件•觸發條件 (Trigger)

• 網頁載入時,根據觸發條件判斷代碼是否執行• 一個完整能執行的代碼,都要有一個正確的觸發條件來觸發• 觸發條件就是一個運算式

• {{ 網頁 }} 等於 http://www.simple.com.tw• 指標 點擊 某個物件。

Page 19: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

變數•變數 (Variables)

• 可提供給代碼、觸發條件使用• 內建變數

• Page URL• Event• Click Element

• 自訂變數• 自動事件變數• 資料層變數

Page 20: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

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

容器

變數

觸發條件代碼

容器

Page 21: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

GTM Jargon 舉例

我想要在購買完成頁放入 Google Adwords 轉換代碼,當有用戶到該頁時,就會觸發。

代碼 : Google Adwords轉換

觸發條件 : URL 要等於 變數 : 完成訂單的 URL

容器 : Google Tag Manager 代碼。

版本 : 1

Datalayer : {訂單號 : 201606290001,購買品項 : XXX,產品金額 : 1,000,數量 : 2,訂單總計 : 2,000 }

Page 22: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 應用- 代碼管理困難度 ★

Page 23: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Page 24: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 應用-Google Analytics 事件 佈署困難度 ★ ★

Page 25: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Googne Analytics 事件 佈署

曝光次數圖片點擊

主要目標圖片點擊主要導航點擊

(此網頁為示意圖,僅提供教學用途 )

Page 26: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Googne Analytics 事件 佈署

• GTM 後台設置,不用請工程師埋設代碼• 節省時間• 不會改壞網站• 避免被攻擊 

(此網頁為示意圖,僅提供教學用途 )

Page 27: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 應用- 網站偵錯困難度 ★ ★ ★

Page 28: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

網站偵錯

(此網頁為示意圖,僅提供教學用途 )

Page 29: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

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

Page 30: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 應用- 網站更改困難度 ★ ★ ★ ★

Page 31: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

網站更改

Page 32: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

網站更改

• GTM 後台設置• 但要會一點 jQuery

• 防爬蟲

Page 33: Google tag manager-web analytics101

@2016 圖靈數位

Google Tag Manager 應用- 增強型電商困難度 ★ ★ ★ ★ ★

Page 34: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

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

Page 35: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

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

Page 36: Google tag manager-web analytics101

@2016 圖靈數位

Tag Manager 相關知識

Page 37: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

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

Page 38: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

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/

Page 39: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

那個 .. 講到現在 GTM 該怎麼結論 ?管理網站代碼的好工具能減輕行銷人員與 IT 人員溝通的時間能減輕 IT 人員與行銷人員溝通的痛苦也就是說行銷人員與 IT 人員都能夠過 GTM 完成許多工作如何學好 GTM

HTML, DOM 要懂Javascript 稍微懂一點GA 操作及原理要熟練往 data layer死裡鑽常常摸、每天跟它當好朋友

Page 40: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Q & A

Page 41: Google tag manager-web analytics101

@2016 圖靈數位@2016 圖靈數位

Dennis Huang

創辦人

[email protected]