使用GTM整合GA來做追蹤

建立時間: 2018-04-01 08:28:41
更新時間: 2019-04-17 23:00:47

GTM/GA?

應該有許多人跟我一開始一樣搞不懂GTM(Google Tag Manager)與GA(Google Analytics)的差別

 

Google Tag Manager

其實是一個網站的代碼管理容器

你可以在透過GTM埋入一些第三方的code或是自訂的js

而且只要一次性的在程式碼中載入GTM

之後要修改這些代碼只須在GTM管理的平台設定即可

不需要再重新修改還有佈署網站

簡單的來說網頁版GTM就是一個可以XSS自己網站的工具

 

Google Analytics

分析工具

GA除了可以追蹤基本的PageView(頁面瀏覽量)、工作階段、跳出率、使用者瀏覽流程

也能自訂事件以及提供電子商務的追蹤

強型電子商務

甚至可以追蹤商品曝光/點擊率、放入/移除購物車機率、放棄成交率、商品績效、轉換率、退貨率等重要的數據

重點是以上這些都是免費

 

設定GA

進入GA後點選左邊的"管理員"頁籤

接著點選"資源"中的新增資源

設定一些基本資料

設定好後點選下方的取得追蹤ID按鈕

 

接著會取得一個追蹤ID

這個要留著後面設定GTM會使用到

當然如果你不使用GTM想直接在code裡面埋GA也是可以

就直接把下方圖片內的追蹤代碼整個寫進code就可以了

 

設定GTM

首先前往GTM

建立新帳號、建立新容器並開始設定

 

建立完成後就會出現這個安裝資訊

只要依照這些安裝資訊將代碼放到code裡面

就算完成GTM安裝了

 

將GA追蹤ID設定成常值

點選"變數">"新增變數">類型選擇"常值"

 

設定好之後大概就是這樣

 

這邊要這麼做

是為了將追蹤ID獨立抽出來

之後如果要匯出/匯入容器

只要更換這個追蹤ID

就可以輕鬆的替換GA資源

 

新增紀錄更變的觸發事件

這邊主要是為了SPA(Single Page Application)設定

如果你的網站不是SPA可以直接略過這個步驟

像是這篇我是為了我的Blog設定追蹤

我的Blog是用VueJS開發

而SPA切換頁面的時候不會真的reload只會更變browser history

因此必須特別新增一個的紀錄更變觸發條件

提供後面的PageView追蹤使用

 

新增GA  PageView代碼

這邊我們先從最簡單的PageView開始設定

新增一個新的代碼

類型的話我們選擇通用 Analytics (分析)

Google為了推GTM

代碼類型裡面有提供整合好的GA代碼

 

 

接著最重要的是

要先勾選在這個代碼中啟用覆寫設定

並點選追蹤編號的選擇按鈕

選擇前面設定的TrackerID常值

這樣才能正確的啟用前面開啟的GA資源

 

設定好代碼後

還要另外設定觸發條件

PageView才會在符合的條件下啟用追蹤

由於我的網站是使用VueJS開發的SPA

因此除了All Page之外還需要在紀錄更變時啟用PageView追蹤

如果你的網站不是SPA

觸發條件只需要All Page即可

全部設定好後

就可以儲存這個代碼

 

 

預覽

如果你只是想預覽代碼

可以點選GTM主畫面右上的預覽按鈕

只要載入GTM的網站在同一個瀏覽器的tab下開啟

就會出現像這樣的GTM debug工具

 

如果有更新代碼想繼續在預覽模式debug

記得要點選GTM主畫面的重新整理

網站才會重新載入修改後的設定

 

發佈

假如你代碼已經全部設定好

要到GTM主頁點選右上的提交按鈕

GTM才會真正的在網站上啟用

 

 

進階的使用

前面只粗略的使用最簡單的PageView追蹤

當然GTM不是只有現成的GA PageView可用

其實有很多種整合好的GA代碼可以使用

 

GA的自訂事件

也可以很簡單的從GTM設定

不過一定要記得跟前面一樣要設定追蹤ID才能正確使用GA資源

 

 

dataLayer(資料層)

dataLayer是一個能夠直接從網站上與GTM溝通、傳遞資料的物件

Google將它翻譯成資料層

除了傳遞資料

其實Google也將dataLayer與GA做了很多整合

像是強型電子商務追蹤甚至都能直接從dataLayer操作

 

另外像是自訂事件也能夠用dataLayer來傳送

dataLayer.push({'event': 'event_name'});

 

 

使用dataLayer統一追蹤所有自訂事件

假設我想統一追蹤所有來自blog內的自訂事件

首先要先在GTM上新增一個自訂的觸發條件

而這個觸發條件就叫做BlogTracking

意思是只要使用dataLayer push的事件名稱為BlogTracking的時候

GTM就會觸發這個條件

 

 

設定GA的分類/動作/標籤等變數

這些是要傳遞給GTM的自訂欄位名稱

我們需要新增這幾個變數

變數型態要記得選擇資料層變數

接著再依序設定eventAction、eventLabel等資料層變數

 

然後我們只需要在程式碼內埋要自訂追蹤的代碼

像是登入成功, 匯出成功

 

我可以在使用者登入成功後發出自訂登入成功事件

dataLayer.push({
   'event': 'BlogTracking',
   'eventCategory': '會員',
   'eventAction': '登入',
   'eventLabel': '登入成功',
 })

 

匯出資料成功時也發出匯出成功自訂事件

dataLayer.push({
   'event': 'BlogTracking',
   'eventCategory': '系統管理員',
   'eventAction': '匯出',
   'eventLabel': '匯出成功',
 })

 

接著只要新增一個代碼

觸發條件設定為前面設定的BlogTracking

而GA的相關自訂事件欄位配上先前設定的資料層變數

就能用一種代碼統一追蹤所有自訂事件

 

 

 

 

GA怎麼Debug?

埋GA最麻煩的就是不知道埋的code到底有沒有作用

Google有出一個自家的Google Analytics Debugger

這個debugger開啟後

就可以從Chrome Devtool的console看到所有被觸發的追蹤

假設我有對一個按鈕做點擊的追蹤

只要按下去之後

看console有跑出GA的追蹤內容

就代表那段追蹤是有效的