【概念篇】給行銷人的GTM入門-埋GA、FB Pixel不求人

papaya tsai
7 min readJul 15, 2017

--

本篇為GTM代碼管理工具的概念介紹,下篇【實戰篇】將講述GTM埋GA、FB Pixel的實際操作。

關於埋追蹤碼:行銷人x工程師的恩怨日常

為了追蹤網站經營成效,身為行銷人的你,架站後第一件事就是趕快啟用GA報表、FB廣告後台查看數據.但為了拿到這些數據,頭痛的來了,你必須先埋好追蹤碼。身為不懂程式的行銷人,你雙眼放空看著螢幕,接著只好請求工程師大大幫忙埋追蹤碼,內心還想著最近應該沒惹他生氣吧。

然後埋設過程,發現GA少埋了電子商務追蹤、FB pixel沒反應的狀況,小心翼翼跟工程師大大argue,但因為不懂程式,所以不會還嘴,只會一直說我看別人網站用都正常…最後工程師埋設完成,在旁邊嘴的行銷人覺得心好累。埋個追蹤碼好難。

好吧,這鋪陳又太冗長了 😅。

總之,如果行銷人員希望自己動手把基礎GA追蹤碼、FB像素埋到網頁,那GTM就是給行銷人的神器及救星

所以,GTM到底是什麼?

GTM簡介

先釐清一個常搞混的觀念。GTM≠GA。GTM可以管理GA。

GTM(Google Tag Manager)是Google推出的代碼管理工具。要記住它就是個管理工具,而不是一個新的追蹤機制。使用GTM可以輕鬆管理追蹤代碼(如GA、FB pixel、AdWords等)。GTM介面整合了各項代碼資源,只要你設定無誤,就可以一站式的管理各項追蹤代碼,不必東奔西跑次次拜託工程師,最後一樣get精美的GA報表、FB廣告數據。

GTM登入頁面
進入GTM後的管理首頁

為什麼要使用Google Tag Manager?

優點:

  1. 無須拜託工程師,行銷人也能輕鬆置入追蹤碼

只需要一開始請工程師幫你塞一組GTM的Base Code,成功啟用後,等於為你開了網站後台的大門,後續要新增GA code、FB pixel都可以自己來。

2. 管理介面方便直觀

無論是新增或修改Tag代碼,都可以在GTM頁面直接修改,不須跑到網站後台看密密麻麻的程式碼、一一維護原始碼檔案中的程式碼片段。

3. 增加網站穩定性與載入速度

未使用GTM之前,我們需要一一將追蹤工具的啟動代碼加進網站,但過多的代碼標籤,可能會影響網站速度。使用GTM的優點,就是可以統一管理這些代碼,加快網站載入速度,就不會因為網站速度慢讓使用者跑掉啦!

缺點:

  1. 網站後門大開,不懂程式的行銷人可能變搞壞網站的豬隊友

GTM啟用後,等於為行銷人開了後台之門,可以隨意新增或刪減追蹤代碼。若GTM裡面放的程式碼有誤,可能連帶影響網頁正常功能。所以對於沒把握的代碼,最好請工程師協助,或備分先前版本。

2. GA / GTM相容性問題

GA跟GTM並存會有衝突嗎?一個是代碼,一個是代碼管理工具,聽到的建議是拔掉GA,統一由GTM來管理比較方便。但由於筆者目前還在學習如何用GTM埋GA電子商務轉換追蹤,最後在工作上的處理方式是GA留著,只用GTM埋其他代碼如FB Pixel。兩者並存是否有衝突?在Google Analytics線上社群黃道育老師的說法:「 GA與GTM是屬於不同的工具,其實可以二個同時放,只留一個是怕有二個同樣的編號。」

Google Tag Manager由哪些元素組成?

GTM的架構分別為:帳戶→容器→代碼、觸發條件、變數

  1. 帳戶Account

帳戶是Google Tag Manager架構中的最高層級,基本上,一家公司就是一個帳戶。一個帳戶可以用來管理一個或多個網域。

2. 容器Container

容器,就是專門放置標籤的地方。一個容器對應一個網域, 一個帳戶底下可設定一或多個容器,容器中可以放入多個代碼標籤與觸發條件。

3. 代碼Tag

代碼是追蹤工具的一段程式碼,代表要追蹤的事件。GTM內建許多代碼樣板,如Google Analytics 、Adwords,但是FB Pixel目前未被收錄在內,需要以自訂HTML的方式新增代碼。

支援多種第三方服務的代碼,也可用自訂HTML方式新增

4. 觸發條件Trigger

觸發條件代表代碼的啟動時機。 意思是告訴GTM什麼時候要執行代碼,由變數(Variables)、運算符號(Operators)與值(Values)所組成。

5. 變數

變數是觸發條件的分支,定義了觸發條件的執行細節。例如頁面網址、表單網址等。

這邊介紹完GTM基本組成元素了,相信你一定有看沒有懂,所以…

概念好複雜,我直接舉例

如果我希望追蹤「透過FB廣告,加入購物車的人」,GTM要怎麼設定呢?

代碼:FB加入購物車Pixel觸發條件:網頁瀏覽變數:瀏覽購物車頁面者,即Page url= www.你的網站/order/cart

意即,當使用者

1進行 “網頁瀏覽"(觸發條件),

2並到達 “page url=www.你的網站/order/cart"(變數)時,

3啟動 “FB加入購物車Pixel"(代碼)。

GTM的概念介紹就先到這,下一篇文章將講述實戰操作,利用GTM來埋GA、FB Pixel。感謝收看,如有錯誤請不吝指正~

參考資料

代碼管理工具說明|Google Help Center

AC mini LIVE — GTM 點點點系列直播|ALPHA Camp

Google Tag Manager 跟 Google Analytics 傻傻分不清楚?|Wis

第一次使用 GTM 就上手 — 無痛轉移 GA to GTM|Analytics 101

請勿聽從陌生人指示操作Google代碼管理工具(GTM)|blog.user.today

--

--

papaya tsai
papaya tsai

Written by papaya tsai

Business.Marketing.Reading.Being Cynical

Responses (1)