你有聽過Google 代碼管理工具(Google Tag Manager, GTM )嗎?對獨自經營電商網站的你來說,最重要的就是管理流量,相信在過去的TransBiz文章中,你已經學會如何提升且導引流量。
若短暫失憶的話可以參考以下三篇文章:
提升電商網站流量必學9招,第2招你應該沒想過
網站流量從哪來?SEO與社群媒體的8個秘密
建立連結(Link Building)的8個訣竅!為你的電商網站導引流量
然而,擁有流量後,更重要的是要如何管理。懂得如何管理流量,不但可以準確歸類轉換的事件,更能進一步將流量轉換成銷量,創造無窮價值!若你已經開始追蹤某個事件的成效,你是不是有遇到以下幾個問題呢?
已經埋成千上萬的追蹤碼在網站中,卻不記得曾經裝了那些?
裝了追蹤碼,卻不清楚哪些有實質轉換?
在跨第三方線上行銷工具平台查看成效,卻操作複雜難以統一?
埋設太多追蹤碼讓網頁載入速度緩慢,時常等到不耐煩?
這個時候Google Tag Manager就是你的好幫手!
什麼是標籤代碼(Tag)呢?
相信你一定有使用如Google Analytics, DoubleClick, AdRoll, Adobe SiteCatalyst等第三方線上行銷工具去追蹤網站或廣告成效吧!這些第三方線上行銷工具會提供的一串片段的Javascript程式碼,這一串的程式碼有許多用途,最常被使用的就是回傳訊息。
當你在不同的行銷活動上予以註記時,程式碼會回傳訊息至第三方線上行銷工具,因此可以幫助你分析並改善消費者在你電商網站上的觸擊等活動。例如,消費者從哪一個管道進入你的電商網站、哪一個廣告點擊率最高、哪一個廣告實際下單轉換率最高、要針對誰做再行銷(remarketing)、A/B測試等,而這一串片段的Javascript程式碼就是所謂的標籤(Tag)。
為什麼要使用Google Tag Manager?
簡化一切不必要的麻煩
為了分析不同的行銷活動,你勢必得使用許多線上行銷工具,而為了追蹤每個活動的成效,則得在每個活動中建立對應的標籤程式碼,並將該程式碼貼回對應的網頁。例如你正在進行一個廣告行銷活動,同時使用Google Analytics 和Google AdWords追蹤轉換並回傳消費者在你電商網站上的某種行為資訊,傳統的作法是你必須將每一個標籤程式碼手動加到該網頁,然而有了Google Tag Manager你可以簡化這一連串冗長的流程, 只要在Google Tag Manager的管理介面中註記想要使用的代碼標籤(Tag)即可,讓不是網站工程師的你也能輕鬆置入代碼標籤、追蹤成效。稍後會做更詳盡的設定與解說。
增加網站穩定性與載入速度
過多的代碼標籤不但會延遲網頁的載入速度,嚴重的話甚至會導致伺服器超載,而電商網站短暫崩潰,將造成消費者的流失。根據Kissmetrics研究調查 顯示,等待時間超過3秒,你就已經失去40%的造訪者,而多等待1秒的時間,會減少11%的閱覽率、讓消費者滿意度下降16%、更會失去7%的轉換率!倘若使用Google Tag Manager,則能讓上述的情況發生機率大大降低,消費者在你的電商網站中也會有更好的體驗。
Google Tag Manager由哪些東西組成?
1. 帳戶Account
帳戶是Google Tag Manager中最高的主要層級,一個帳戶可以用來管理一個或多個的電商網站,一般來說一家公司僅需要一個帳戶便可管理所有旗下的電商網站。若你同時追蹤、管理不同公司的數位行銷成效,則可將所有的Tag Manager帳戶連結至一個Google帳戶。
2. 容器Container
相信聰明的你很快就猜到所謂的容器,就是專門放置標籤的地方。一個帳戶裡面至少會有一個容器,用來裝載代碼標籤(Tag)與觸發條件(Trigger),舉例來說,一個容器裡可能含一個代碼標籤以紀錄消費者購物行為,並且含有一個觸發條件是當感謝購物頁面跳出時,代碼標籤才會記錄此交易資訊。
一般來說,一個容器會對應一個網域,而一個容器中可以放入多個代碼標籤與觸發條件,因此就不需要在每一個網頁中置入程式碼追蹤。
3. 代碼標籤Tag
前面段落已提及,這裡便不再贅述。
4. 觸發條件Trigger
觸發條件是由變數(Variables)、運算符號(Operators)與值(Values)所組成。由於代碼標籤的運作模式是因為某種事件的產生而被觸發,進而開始蒐集資料,你設定觸發事件就是告訴代碼標籤何時該被觸發,例如你設定所有頁面(All Pages)為觸發條件,則不管哪一個頁面是載入狀態,代碼標籤都會被觸發;其他狀況還有像消費者將購物車中的東西移出,又或者使用者按下行動呼籲按鈕下載EDM或電子書等等。
變數Variable
變數幫助定義代碼標籤該在何時回傳訊息,而變數又可以細分成內建變數(Built-in Variables)與使用者自訂變數(User-defines Variables)兩種。內建變數是系統預設值,有相當多種常用的觸發方式,例如網頁路徑{{page path}}或點擊{{click ID}},你只要簡單點選即可啟用;而使用者自訂變數是你根據其需求特別定義的變數,例如購買完成{{purchaseComplete}}就是當交易完成、使用者所查看商品的價格後才回傳資料。
運算符號Operator
定義變數與值之間的關係,系統會在執行階段判斷觸發條件為 true 或 false,而兩者之間一定要對應的上才能確保觸發條件順利運行,最常見的運算符號如等於(equals)、包含(contains)、或未包含(doesn’t contains)。
值Value
明確定義變數可以是某些特定的數字或是網頁網址,已此觸發代碼標籤蒐集資訊。
若你只想要當使用者完成購買時才讓標籤代碼蒐集資料的話,你可以設定:
變數: {{url}} 運算符號: 等於 值: 完成購買頁面”checkout.html”
另外,你也可以同時設定多個觸發條件來蒐集資料。
5. 資料層Data Layer
資料層級是一個非必須的JavaScript 物件,也是一種程式碼,可以用來傳遞Google Tag Manager的所有信息,諸如事件或變數的資料訊息可以通過資料層傳遞給Google Tag Manager,並且可以根據變數在設置觸發事件。
例如你設置了一個再行銷的代碼標籤,其變數規則是當某特定消費者購買金額超過$100美元時(purchase_total > $100),則該代碼標籤會被觸發;然而該變數也可以被運用在其他的代碼標籤中。簡單來說透過資料層可以讓你更簡單直覺的傳遞訊息。
大概了解Google Tag Manager的組成後,接下來該如何設定呢?以下有詳細教學步驟
1. 設定帳戶
前往Google Tag Manager ,並使用你的google 帳戶登入。登入後新增一個帳戶,帳戶名稱可以是你電商品牌的名字。
2. 設定容器
為你的容器取一個名字並選擇該容器欲使用的位置。由於軟硬體的歧異,在網頁或行動裝置上的追蹤方式會因而有些不同,此外,在行動裝置方面,更要區別不同的作業系統,因為在iOS和Android中不管是網頁、廣告、跳出視窗(pop-up)皆略有差異,因此需要搭配iOS 或Android平台適用的 Firebase SDK 來進行設置。
3. 確認使用Google Tag Manager的條款
4. 設定追蹤網站
確認使用Google Tag Manager的條款後,系統會產出兩串程式碼。接著,你回到你的電商網站按下F12,並依據指示將第一段程式碼貼到你的電商網站最上方的<head>中,此外,將第二段程式碼貼到<body>開頭的程式碼正後方。
基本上,完成以上步驟,你已經大致做好了最初的設定。不過到這邊還沒結束,因為如果不加上追蹤數位行銷成效的代碼標籤,就好比帶了一個名牌錢包出門逛街,而裡面卻沒有半毛錢,一切都是徒然,因此接下來的重點就是安裝代碼標籤用以追蹤流量,而最常使用的網站流量追蹤工具就是Google Analytics,以下將以其作範例設定教學。
5. 新增代碼
當你已經決定好要追蹤哪些消費者行為後,接下來的重點便是設定追蹤碼。首先,回到你的Google Tag Manager頁面,在左上方的選單中點選「工作區」並點選「新增代碼」。
6. 代碼設定
為了不讓此代碼標籤與往後其他追蹤活動搞錯,建議先在左上角為此代碼標籤取一個簡單且直覺的名字,例如:網站瀏覽。接下來按下「代碼設定」,並選擇「通用Analytics(分析)」。
7. 輸入追蹤編號
接下來你便需要輸入追蹤編號,所謂的追蹤編號就是像「UA-OXOXOX-YY」這樣的字串,而你必須將這組字串加進追蹤程式碼,因此系統才能判斷要將資料傳送到哪個Google帳戶。
第一組號碼OXOXOX代表你的帳號,而YY則是與帳戶連結的特定資源編號,其數字會從01、02、03等向上遞增,例如你的電商網站的流量追蹤資源編號是01,而你的電商部落格流量的資源追蹤編號就會是02。此外,你也可以在 JavaScript 追蹤程式碼片段的前幾行看到完整字串。
要找到你的追蹤編號,你必須先前往Google Analytics的帳號下,選取「管理員」,再從「帳戶」選單中選取追蹤帳號,並在「資源」欄位中按下「追蹤資訊」,接著便可以找到「追蹤編號」,將其複製並貼回Google Tag Manager中。
8. 選擇追蹤類型
一般來說,最常使用的追蹤類型就是「瀏覽量」,並加入觸發條件在「所有網頁」上啟用代碼,因此你可以追蹤最基本的網站流量。此外,你也可以利用變數的設定,來讓特定事件發生時才啟動代碼標籤,例如點擊連結、點擊文字、網頁的導引流量、網頁所在網域等等。
9. 設定觸發條件
若是追蹤基本電商網站流量,你的觸發條件選單中僅會有一個選項,那就是「所有網頁」。
若是較為複雜的追蹤在電商網站上的消費者行為,你則必須設定相對應的觸發條件。例如你要追蹤消費者點擊某個行動呼籲按鈕,則在代碼設定的部分,你就要選擇追蹤類型是「事件」,並且設定追蹤的參數,諸如類型、動作、標籤、值等等。
在觸發條件部分,你則要選擇相對應的觸發類型,同時並設定在什麼條件下標籤代碼會啟動,例如當內文等於XXOO時,代碼標籤才會觸發。此外,你也可以透過右邊的加減符號新增或減少觸發條件。
10. 啟用代碼標籤
在設定都完成後,你要回到Google Tag Manager頁面,按下右上角的「發布」,代碼標籤才會順利啟用。而你也可以在「正在修改」欄位中查看工作區的變動,有多少已修改、多少已新增與多少的已刪除動作。
在代碼標籤發布前,你也可以按下發布右方的箭頭,選取「預覽與除錯」來檢視你的設定是否有錯誤。
啟用預覽模式後,你每次進入導入容器的網站,便會在瀏覽器底部看到偵錯視窗,其列出啟用狀態和正在處理的資料等代碼相關詳情,因此可以很快速地察看當進入哪一個網頁時,代碼標籤因為設定錯誤因而沒有被啟用。而這個偵錯視窗只會在你的預覽中出現,並不會對其他網站訪客造成任何的影響。
另外,你也可以透過GA Checker 來檢查Google各項追蹤工具的埋設,而GA Checker 主要偵測的項目包括:
Google Analytics (ga.js)
Google Analytics Remarketing (dc.js)
Google Universal Analytics (analytics.js)
Google Analytics Experiments (ga_exp.js)
Google Tag Manager (gtm.js)
Google AdWords Conversion (conversion.js)
Google AdWords Phone Conversion (loader.js)
Google AdWords Remarketing (conversion.js)
Google AdWords Dynamic Remarketing (conversion.js)
Google DoubleClick
若使用上述的Google行銷工具,卻不確定網頁是否有成功啟用追蹤代碼標籤的話,只需要開啟 GA Checker 後輸入檢測網址,其便可以自動抓取網站內所有頁面,更同時列出每一個頁面網址被找到的代碼類型。
若發現錯誤,可以進入Google Tag Manager,到相對應的標籤代碼或觸發條件中進行修改。
最後,推薦一個非常好用的Chrome擴充工具,那就是Google Tag Assistant !
在尚未使用Google Tag Assistant前,要查追蹤碼的安裝狀態,除了使用瀏覽工具外,你的另一個選擇便是按下右鍵,選取「檢視原始碼」,在透過Ctrl+F搜尋_gaq.push或ga.js,不過,現在透過Google Tag Assistant擴充工具,便可以根據顏色與數字,立即看出網頁的標籤設定有沒有問題。點擊擴充工具圖示,即可顯示該網頁中含有多少標籤、有多少錯誤以及建議修正訊息。
依據問題的嚴重性由小到大依序以藍色、黃色、紅色代表。
綠色標記+數字:追蹤標籤運作正常
藍色標記+笑臉:網頁上沒有追蹤標籤或Tag Assistant尚未啟動
藍色標記+數字:追蹤標籤有點小問題
黃色標記+數字:追蹤標籤有問題
紅色標記+數字:追蹤標籤有嚴重的問題
若過去深受管理標籤的困擾,上述實用教學是否減少你管理標籤代碼的不便呢?
如果你還沒開始使用Google Tag Manager,是否已經躍躍欲試想使用它來優化流量與帶來轉換呢Google Analytics幾乎被公認是電商經營的好朋友,而如今認識Google Tag Manager這個新朋友,必定能為你的電商經營增加不少助力!
進階閱讀:【GTM轉換設定大全,整合你的FB Pixel、GA、購物車 】
想請 TransBiz 幫忙,為你的品牌說故事?
3 Comments
[…] Google Tag Manager 教學,一篇搞懂如何設定和管理網站追蹤碼,這篇來自 transbiz,有完整的安裝教學步驟。 […]
您好,感謝您分享這篇,受益無窮,
想另外請問若公司的入口網站有兩種以上的語言,(如:中文,英文)
是否有需要針對不同版本都埋程式碼做追蹤呢?
WordPress自己研究怎麼去安裝,弄了很久都不會。很高興可以找到這篇文章,謝謝。