快速掌握GTM(Google Tag Manager)設定和管理網站追蹤碼

你有聽過Google 代碼管理工具(Google Tag Manager, GTM)嗎?對獨自經營電商網站的你來說,最重要的就是管理流量,相信在過去的TransBiz文章中,你已經學會如何提升且導引流量。

擁有流量後,更重要的是要如何管理。懂得如何管理流量,不但可以準確歸類轉換的事件,更能進一步將流量轉換成銷量,創造無窮價值!若你已經開始追蹤某個事件的成效,你是不是有遇到以下幾個問題呢?

  • 已經埋成千上萬的追蹤碼在網站中,卻不記得曾經裝了那些?
  • 裝了追蹤碼,卻不清楚哪些有實質轉換?
  • 在跨第三方線上行銷工具平台查看成效,卻操作複雜難以統一?
  • 埋設太多追蹤碼讓網頁載入速度緩慢,時常等到不耐煩?

這個時候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這個新朋友,必定能為你的電商經營增加不少助力!

  • Top