GTM導覽!行銷人的百寶袋,輕鬆管理網站追蹤程式碼

有句話是這麼說的:如果編輯器是工程師的工具箱,那麼GTM是行銷人的百寶袋

那到底什麼是GTM?

GTM(Google Tag Manager)是一種網站追蹤代碼管理工具,網站管理的神器!!!整合了各項代碼資源,可直接於後台決定是否新增、修改、移除追蹤代碼ex:GA、FB pixel 、Google ads,不必再去麻煩工程師,自己就能追蹤代碼連結,得到連結數據,那到底怎麼做得呢?現在就讓我們往下看吧!

為什麼要使用GTM?

1.簡化過去繁雜的流程,輕鬆置入追蹤碼

傳統作法

需透過工程師將GA追蹤碼,埋在頁面上,追蹤碼會將行為紀錄,並回傳至GA,於GA後台看到數據流量

此方法的結果:所以從上面的角度來看你就會發現,如果沒有使用GTM你的網站上會出現許多不同的追蹤代碼~

看起來好像很簡單耶…

代誌不是憨人想的那麼簡單!(台語)

當你在不同的網站中,有各個不同的網站都得要這樣埋的話,那該埋到何時呢?

又或是根本忘了到底有沒有埋過這個網頁,忘了它的存在…

那有了GTM的話呢?

GTM作法

直接埋入GTM追蹤碼至網頁上,而GA追蹤碼埋入GTM(不需另外埋入GTM),當GTM代碼啟動後,就自動檢查其他的追蹤碼,查看達成啟動條件與是否同一時間啟動,啟動後,數據將會透過GTM裡面的GA 追蹤代碼傳入GTM的 Data layer,再傳入GA後台(如下圖)。

那如果說是其他追蹤碼呢???

同樣的,也只要將程式碼埋入GTM上,不需再額外埋入網頁中,且還能在GTM中任意調整喔(新增代碼、修改代碼)

有了GTM,工程師省下一大麻煩不需要再幫行銷人去用一堆追蹤碼,而行銷人也能夠更方便快速,效率大幅提升囉~讓不是網站工程師的你也能輕鬆置入代碼標籤、追蹤成效

使用GTM後,網站上的代碼就都會進去GTM 裡面進行管理囉,所以你需要的就會變成只埋入GTM的追蹤代碼即可,剩下的代碼則透過GTM進行埋入。

2.增加網站穩定性與可能提高載入速度

在第一點時所說,以往我們需要一個一個將程式碼埋入網頁中,當埋入過多的追蹤程式碼時,反而會造成反效果,造成整個網頁delay,使用者沒耐心容易跑掉。但今天我們有GTM!將這些諸多的程式碼一併一同管理,可能加快網站載入速度。(註:社群的朋友們提供了更有細節的分享,請參考下方)

2020.8.2 來自社群的update !
『採用 GTM 因為會讓追蹤碼以非同步方式載入,對比原先逐個追蹤碼載入的作法而的確可能提升速度,但這並不是像上面文章寫到埋一個或埋多個的問題。而且追蹤碼不透過 GTM 也能用非同步方式載入的。』

完全仰賴 GTM 讓非工程師也能介入網站其實也有相對應的風險,因此我覺得雖然我也認為採用 GTM 好處多多但還是要平衡一下。  (感謝來自: @Clement Tang 的分享!)

3.多功能使用

另外,GTM還有預覽模式、歷史功能。預覽模式可在發布前,觀察所發布的追蹤碼是否被觸發,待確認無誤後,再發布。透過歷史功能,能夠了解代碼更改的過程,以防團隊中有所更動,而造成無法挽救的結果,回復到之前的版本。


GTM的組成

主要組成有4大要素:帳戶Account、容器Container 、代碼Tag、觸發條件Trigger、變數Variable

帳戶Account

為GTM中的最高層級,通常一個帳戶就好比一間公司,可以管理多個網站,追蹤各個網站的數據成效

容器Container

專門放置標籤的場所,一個帳號中至少會有一個容器對應一個網域,容器內可再放入多個代碼標籤與觸發事件,在代碼標籤中會記錄消費者的購買行為,而觸發事件則是當特定事件出現後,才會記錄此行動資訊ex:感謝頁面

代碼Tag

代碼用於追蹤事件的一段程式碼,GTM內建有GA、Google ads,但如FB Pixel這類所沒有的,可自訂HTML,來安裝管理代碼,如想安裝FB Pixel可看這篇喔(用GTM做簡單的Facebook轉換追蹤!)

觸發條件Trigger

這是有由變數(Variables)、運算符號(Operators)與值(Values)所組成,簡單來說就是代碼啟動時機,也就是『觸發的邏輯』(ex: 點擊、觀看、滾動等等)。

變數Variable

定義觸發事件的執行細節,在變數當中主要分為內建變數、自訂變數兩種,而變數又是什麼?拿手槍來做比喻,手槍能被擊發,是因為有『板機』,當『板機』按下,子彈就會發射,而板機就類似Variable 的角色!(ex: 頁面上的button 或是購物車的按鈕等等 ,這邊以簡單做理解,但實際上Variable比實際更為複雜。)

  • 內建變數:系統預設值,ex網頁路徑、點擊、網址等等。
  • 自訂變數:根據特別需求自訂的變數,可以透過Javascript 來撰寫特定的Variable , 或是從Data Layer variable 設定等等。 (Data Layer 大家只要理解成如果要從GTM發資料出去,所有資料都必須到Data layer 這個地方存取就是了!將像是出國你一定要去機場、港口的概念!)

操作介面

大概了解Google Tag Manager的組成後,接下來該如何設定呢?以下有詳細教學步驟

1. 設定帳戶

使用google帳戶登入GTM,登入後便可對此次帳戶命名與選擇網域

2.. 確認使用Google Tag Manager的條款

4. 設定追蹤網站

確認使用Google Tag Manager的條款後,系統會產出兩串程式碼。將第一段程式碼貼在網站後台的方的<head>中,第二段程式碼貼到<body>開頭的程式碼正後方。

5. 新增代碼

開始建立代碼,在首頁的左邊代碼欄中點選「新增」。

6. 代碼設定

在開始設定前,建議可以先為此次代碼標籤命名才不會搞亂唷,會出現一欄是google的合作單位(ex:linkin、pinterest),只要名單上的皆不用再額外去網站上埋入code。在此處GA有著不同的版本,一般來說,大多都會使用一般的版本,如公司有APP其他相關產品的話,也可以使用GA APP+WEB Configuration,大多在使用GA追蹤使用者流程時,大多只能追蹤到結果EX:下載,但現在所推出來的,能夠追蹤到整個流程,從近入APP到下載階段,如果有興趣的話可以點擊此連結(Google Analytics: App + Web),做更深入研究唷。

7. 選擇追蹤類型與輸入追蹤編號

追蹤類型選擇「網頁瀏覽」,在「選取設定變數欄位」,按下新增變數,填寫GA追蹤代碼,如忘記代碼,可回到GA設定「資源設定」,將代碼複製貼上,系統才能判斷將資料傳輸到哪組Google帳戶中。

8. 設定觸發條件

設立「觸發條件」,簡單來說指的是”在哪種情況下”,會啟動GTM使用GA代碼,在這通常會設立All page,或是另外點選右上角的+,新增其他不同類型的觸發事件

ex:追蹤「加入購物車」

前面與上述步驟相同

新增代碼-追蹤類型「事件」-觸發條件「網頁瀏覽」-選擇「部分的網頁瀏覽」-選擇「Page path」-「包含」-「/cart」

總結:

GTM另外還提供了預覽功能唷,可以測試、偵錯實際執行狀況,避免在正式上線時,有問題發生,只要造訪到所設立的網站,就可以開始測試是否每個每個頁面都有正常啟,如想知道GTM、GA實際的啟用狀況,也可以使用Google Tag Assistant或是GA Checker,可檢查追蹤碼是否有在正常運作唷


想學習更多有關Google Ads , GTM , Google Optimize 的內容?

那就訂閱粉專、加入社團吧、資訊不漏接!

社團內還有更多活動、好文喔!

加入粉專:https://pse.is/M8QTS

加入社團:https://pse.is/LJHXY

CodeForMarketing — 小編群。

Facebook Comments
Code For Marketing

鼓勵行銷人學習「工程思維」培養數據敏銳度,推廣善用工具的知識教育組織,透過數據與工程的掌握與應用讓行銷人提升價值,有效運用行銷工程。

Comments are closed.

Recent Posts

新使用者留存率分析

https://www.youtube.com/watch?v=MEydBzWAABo newn

3 years ago

Retention 留存率分析Part 1 – 帶你認識基本的留存率分析架構

Part 2 留存用戶分析~加入會員即可觀看,免費體驗一個月,活動請參考: https://blog.codeformarketing.co/subscribe-pressplay-dija/

4 years ago

CFM電子報第四期

Hello 各位讀者~本期為第四期電子報,本次電子報我們將帶大家來看看一些最新的行銷時事以及工具的更新的有趣內容! 目錄: Google網址檢查工具現在可以顯示多個參照網頁了 舊版的Google取消連結工具將在2021年1月19日終止服務 Google Search Console要使用者透過完成驗證程序來證明自己是資源的擁有者 Google搜尋出現內容複製鏡像網站的Canonical Bug Google解釋為何一些使用不良SEO策略的網站仍有不錯的排名 Google正在致力於改善robots.txt測試工具 Google Ads身分驗證制度即將上路 這些常見的SEO錯誤會有害於你的排名 Google指出:太專注於一種SEO策略可能會有害於整體SEO結果 Google面臨的反信任訴訟對行銷人會有什麼影響? Google在華盛頓的暴力事件後暫停投放政治廣告 Google網址檢查工具現在可以顯示多個參照網頁了 Google近期在Google網站管理員的網址檢查工具中,讓一些URL可以顯示多個參照網頁了。…

4 years ago

CFM 電子報第三期

Hello 各位讀者~本期為第三期電子報,本次電子報我們將帶大家來看看一些最新的行銷時事以及工具的更新的有趣內容! 目錄: 英國「Watchdog」對Google Ads的數據政策變更展開調查 你可以使用資料排除功能來避免轉換追蹤問題影響智慧出價 2021年SEO數位行銷的七個潮流 英國「Watchdog」對Google Ads的數據政策變更展開調查 英國的組織Watchdog已經開始針對Google近期對廣告數據系統的大翻新計畫展開調查,因為Watchdog認為這次的翻新可能會讓Google在線上廣告產業中,排除更多競爭對手。 英國的政府機構「競爭及市場管理局」(Competition and Markets Authority, CMA)聲明其將會針對Google近期關於從Chrome和Chromium架構的瀏覽器引擎中,移除第三方cookie的改變展開調查。 Cookie是小型文字檔案,是某些網站為了記錄使用者資訊(例如使用者名稱)而儲存在用戶端上的資料。它能幫助企業更有效率的鎖定客群投放廣告,對提供免費內容的網站也相當有幫助,但它也能用來記錄使用者在網路上的行徑。 Google在2022年即將推出的「數位沙盒」(digital sandbox)提案中,提到以自家的工具替代第三方cookie的計畫。但Watchdog認為這樣的改變會削弱出版者盈利的能力,以及破壞數位廣告競爭,讓Google更加根深蒂固的壟斷市場。 競爭及市場管理局的執行長Andrea Coscelli聲明:…

4 years ago