網路行銷

快速掌握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