Google Tag Manager 教學 :無縫接軌移轉GA到GTM

Google Tag Manager對行銷人來說,可說是一大福音,因為數位行銷通路越來越多元,各式各樣的追蹤碼新增或修改,可以說是家常便飯,三不五時會有新功能或是追蹤碼改版,如果網站架構龐大、產品很多,每一次修改都是大工程,每到此時就是考驗和工程師大大交情的時候了。現在,有了Google Tag Manager 代碼管理工具,追蹤分析不求人,本篇 Google Tag Manager 教學 將深入淺出帶您一次了解什麼是Google Tag Manager?如何安裝,以及安全移轉GA到GTM,數據無縫接軌!

什麼是Google Tag Manager

Google Tag Manager 是Google的代碼管理工具,是一個用來管理GA代碼或是其他第三方代碼的工具。

過去要在一個網站加入任何一種追蹤代碼,必須找出所有的頁面,一頁一頁貼上追蹤代碼,工程非常浩大。

現在有了Google Tag Manager,在所有的網頁都貼上GTM代碼,這個工程只要一次!再進入GTM容器管理工具去編輯所有的代碼就可以了。

這麼說,可能還不夠清楚,你可能想問:GTM和GA有何不同?

GTM GA的差異在哪裡? 

  • Google Analytics

是一個針對網站流量數據儲存、統計、產出分析報告的系統,幫助站長分析網站的訪客量、瀏覽行為等,要蒐集這些數據,必須要在網站上的每一頁安裝Google Analytics的追蹤代碼,GA跟你如何「安裝」代碼無關。

  • Google Tag Manager

  1. Google Tag Manager 是一個代碼管理工具,可以建立代碼,並將訪客的互動資料傳送給Google Analytics
  2. Google Tag Manager可以管理任何其他第三方代碼,包含Google Analytics代碼。只要在網站所有的頁面貼上GTM代碼,以後你要修改任何的代碼和規則,只需要在GTM後台修改,而不需要真的去修改網頁上的代碼。
  3. 假設我們想要分析一些特定的功能,例如,頁面中的按鍵點擊分析;或是我們可能需要將一些特定頁面分組,或是將一些類似但是不同的URL歸類在同一組作分析,此時需要一些特定的代碼,讓Google可以辨識你要分析的是哪一些功能、或是特定頁面,你需要的功能變得更複雜了!你有許多不同的代碼,而且這些代碼可能只希望在特定的功能或是頁面被觸發。而Google Tag Manager可以幫助你管理,讓你可以定義這些代碼的規則,以及要在那些時機被觸發。

為什麼要使用Google Tag Manager

  1. 一次管理所有代碼超便利

假設你有一個網站,要做數據追蹤,必須要安裝一段java script的追蹤碼到你的網頁原始碼中,例如下列的Google Analytics的追蹤碼,也可能是其他第三方追蹤碼,例如Facebook像素。而要將這段追蹤碼加到網站的原始碼中,必須要有網站編輯權限,通常這個權限都掌握在設計或是工程師大大手中。現在有了Google Tag Manager,追蹤設定不求人!只要在每一個網頁安裝Google Tag Manager追蹤碼,所有的追蹤設定,都在Google Tag Manager裡面完成,想要自立自強的行銷人,此時想必充滿了學習動力(熱血)。

  1. 減少網站程式碼,提升網站速度

第三方行銷工具推陳出新,廣告平台多不勝數,Google Analytics、Double Click、Facebook、Bing、Adroll、Alexa….,如果每一種行銷工具都提供一段追蹤碼讓你貼到原始碼,原始碼將變得非常長,而拖累了頁面載入的速度。

使用了GTM之後,這一大票第三方行銷平台的代碼,將只剩下幾行短而簡潔的代碼,對於頁面速度提升絕對有顯著幫助。

  1. 更有彈性

不會寫程式?沒關係!使用GTM管理網站追蹤代碼,不用寫任何一行程式,你幾乎可以建立任何代碼。這也節省了網站開發者的時間,讓他們可以把時間花在更大的專案。

  1. 可以用來Debug

在任何代碼安裝錯誤或不完整的時候,你可以先不要發布。例如,GTM的預覽模式,讓你可以先檢視各個代碼的安裝狀態,包含觸發條件、變數和資料層是否正確? Tag Assistant則可以協助你檢視所有跟Google相關的代碼是否有錯誤,像是Google Analytics、Adword、Double Clicks等。

  1. 版本控制

不只是Google Analytics,許多第三方代碼都曾經經過多次改版,一個網站的規模越大,代碼改版越可能有所缺漏,各種代碼的版本控制變得更困難。使用GTM,任何一種代碼的版本控制都變得更輕鬆了。

追蹤碼偵錯小工具:Google Tag Assistant

在進入正題介紹Google Tag Manager安裝之前,這邊就先介紹一個小工具:Google Tag Assistant,這是Chrome的擴充功能,一個非常便利的小工具,可以幫助站長驗證Google追蹤碼的安裝狀況,協助站長偵錯。

GTM雖然很便利,但是對於不熟悉程式的行銷人員來說,安裝仍然是具有一定的複雜度,為了減少在設定過程中發生的錯誤,時時使用Google Tag Assistant 偵錯。

只要在Google搜尋Google Tag Assistant,就可以找到這個外掛程式

Google Tag Manager 教學 - Tag Assistant

點選右上角的按鍵,將它加入CHROM即可,因為筆者已經加入Google Tag Assistant,所以看到的已加到CHROME。

將Google Tag Assistant加入CHROME後,可以看到右上角會出現如紅框中的小圖示,點選後會出現Google Tag Assistant的對話框,點選Enable,就可以診斷網站Google追蹤碼相關安裝狀況。

以博客來的網站為例,點選Enable後,將網站Refresh,可以看到網站安裝了Google Analytics、Google Tag Manager和再行銷Tag,但在原始碼中,

我們只看到Google Tag Manager的追蹤碼,而這也正是Google Tag Manager強大的地方!因為所有的追蹤碼都只需要在Google Tag Manager中編輯即可。

Google Tag Assistant的對話框中可以看到,針對每種追蹤碼都有一個小圖示,只有顯示綠色才代表安裝是完全正確的,如果出現其他顏色,可以點選進入看看,有哪些錯誤需要調整。

Google Tag Manager 教學 :GTM基本架構

想了解究竟GTM是怎麼運作的,首先應該先了解它的架構:

  • 帳戶(Account)

一個帳戶裡面可以管理多個網站的代碼,但一般公司就算有多個網站(網域),也只會使用一個帳戶管理所有網站代碼。如果你管理追蹤多個公司的網站,則可以將所有的Tag Management帳戶連到一個Google帳號。

  • 容器(Container)

容器就是設置代碼、觸發條件和變數的地方,一個網域對應一個容器,一個帳戶底下可以設置多個容器。

  • 代碼(Tag)

代碼就是我們使用的程式碼,也就是前文提到的第三方行銷工具,會提供一段java script程式碼給我們,而通常這段程式碼的主要功能,就是把資訊從你的網站傳送到第三方。我們可以在GTM的「容器」中,安裝許多代碼,並在GTM系統中去做出新增、修改、刪除、管理等等動作。

  • 觸發條件(Trigger)

透過觸發條件,讓你可以設定,在哪些事件發生才執行代碼。

  • 變數(Variable)

變數幫助判斷,代碼應該在什麼時候回傳訊息。變數分為內建變數和自訂變數,內建變數就是GTM系統中已經預設好的值,種類非常多,只需要勾選就可以使用。

Google Tag Manager 教學 : 變數

自訂變數則是依據使用者需求自訂的值,最簡單的範例,就是一開始設定GTM帳號時,為了免除每次都要輸入GA編碼的麻煩,可以將GA編碼設為常值,並給它一個名字,這樣以後新增代碼就可以直接勾選這個變數了。

  • 資料層 (Data Layer)

舉例,我們想做電子商務追蹤,去分析所有訂單的品項、交易金額等等,所以我們想知道這些變數的值,這要怎麼做到呢?我們可以在交易完成頁面,安裝一段GTM程式碼,讓資料層從交易完成頁的原始碼中讀取資料。

Google Tag Manager教學 : 帳號申請與安裝

設定帳戶的過程很簡單:

第一步是登入Google帳號建立一個GTM帳號。

第二步是為帳戶命名,然後點選繼續。

Google Tag Manager 教學 - 帳號申請

第三步是設定容器,輸入網址並選擇網路,在此範例先不討論iOS、Android及AMP的追蹤設定。

第四步是安裝代碼管理工具,如果沒有網站管理權限,需要請工程師協助將這段程式碼安裝到網站。

第五步

點選容器,點選左邊工具列的變數,進入後新增使用者定義的變數

Google Tag Manager 教學 - GA ID 設定

接著

點選編輯圖示

變數類型選擇「常值」,

然後回到你的GA帳戶,在管理員的資源層級,找到追蹤程式碼

複製GA ID,回到GTM貼上並為這個變數命名

接著前往代碼,新增一個GA的代碼

代碼類型選擇通用Analytics(分析)

為代碼命名,追蹤類型選取「網頁瀏覽」,Google Analytics (分析)設定選擇剛剛設定的GA碼,然後儲存就設定完成了。

GA移轉GTM簡單小撇步,數據無縫接軌好Easy

如果不是新站,很多網站在使用GTM之前,都是使用Google Analytics追蹤數據,這時候就會發生移轉的數據問題

而一個頁面同時存在GA追蹤碼和GTM,會double tracking 所有的訪客,所以在發布GTM之前,要先移除舊的追蹤碼,最完美的情況是,移除舊的那一刻、要即刻發布GTM,不然會有數據時間差。

但是,如果一個網站很龐大,就很難做到無縫接軌;也可能發生部分頁面移除舊碼或是安裝新碼有遺漏的狀況。

Trick:為了不要發生數據追蹤時間差,可以先設一個自訂變數:

Google Tag Manager 教學 - GA移轉GTM

接著,把下列程式碼貼在自訂JavaScript欄:

function() {

var scripts = document.getElementsByTagName(‘script’),

ga = true, // set to false if you don’t want to check for ga.js

ua = true, // set to false if you don’t want to check for analytics.js

dc = false, // set to false if you don’t want to check for dc.js

i = len = 0;

if (ga || ua || dc) {

for (i, len = scripts.length; i < len; i += 1) {

if (ga && /www\.google-analytics\.com\/ga\.js/.test(scripts[i].src)) {

return true;

}

if (ua && /www\.google-analytics\.com\/analytics\.js/.test(scripts[i].src)) {

return true;

}

if (dc && /stats\.g\.doubleclick\.net\/dc\.js/.test(scripts[i].src)) {

return true;

}

}

}

return false;

}

在此命名為GA in template,並且儲存。

接著點選預覽,然後開啟你的網頁

可以看到GAin Template的狀態是true,這代表網站中仍然有GA追蹤碼存在。

接著,到觸發條件設定,先鎖住目前的GA code,一旦Gain Template 變成false,自動啟用GTM。

觸發條件設定為,只有當GAin Template equals true,才會觸發。

然後到我們原本GA 的Trigger去新增exception

選擇GAin Template,然後儲存。這樣表示,如果舊的GA碼還存在,原本的GA通用trigger不會觸發

儲存後可以看到觸發條件增加了一個鎖定條件。

然後再回到網頁預覽,會發現這個Tag 沒有觸發

然後到Tag 的Page view去看,會發現Blocking Triggers 的GAin Template 是true,這樣就設定完成了。

等到確定所有的頁面都已經安裝GTM碼,並且移除舊的GA追蹤碼,就可以刪除GAin Template這個exception了。

Google Tag Manager 教學(一) :無縫接軌移轉GA到GTM
Google Tag manager 教學(二): WordPress追蹤輕鬆上手
Google Tag Manager 教學(三):如何追蹤按鈕點擊
Google Tag Manager 教學(四): GTM 加強電子商務 追蹤

 

 

Close Panel