Google Tag Manager 教學，一篇搞懂如何設定和管理網站追蹤碼

在尚未使用Google Tag Assistant前，要查追蹤碼的安裝狀態，除了使用瀏覽工具外，你的另一個選擇便是按下右鍵，選取「檢視原始碼」，在透過Ctrl+F搜尋_gaq.push或ga.js， ... GoogleTagManager教學，一篇搞懂如何設定和管理網站追蹤碼HomeTransBiz跨境電子商務智庫電子商務網站優化網站設計GoogleTagManager教學，一篇搞懂如何設定和管理網站追蹤碼 分類 網站設計 關鍵字SEO優化 電子商務網站優化 標籤 231sharesFacebook158LinkedIn32LoveThis30Twitter11你有聽過Google代碼管理工具（GoogleTagManager,GTM）嗎？對獨自經營電商網站的你來說，最重要的就是管理流量，相信在過去的TransBiz文章中，你已經學會如何提升且導引流量。

若短暫失憶的話可以參考以下三篇文章： 提升電商網站流量必學9招，第2招你應該沒想過 網站流量從哪來？SEO與社群媒體的8個秘密 建立連結（LinkBuilding）的8個訣竅！為你的電商網站導引流量 然而，擁有流量後，更重要的是要如何管理。

懂得如何管理流量，不但可以準確歸類轉換的事件，更能進一步將流量轉換成銷量，創造無窮價值！若你已經開始追蹤某個事件的成效，你是不是有遇到以下幾個問題呢？ 已經埋成千上萬的追蹤碼在網站中，卻不記得曾經裝了那些？ 裝了追蹤碼，卻不清楚哪些有實質轉換？ 在跨第三方線上行銷工具平台查看成效，卻操作複雜難以統一？ 埋設太多追蹤碼讓網頁載入速度緩慢，時常等到不耐煩？ 這個時候GoogleTagManager就是你的好幫手！ 內容大綱 什麼是標籤代碼（Tag）呢？為什麼要使用GoogleTagManager？GoogleTagManager由哪些東西組成？1.帳戶Account2.容器Container3.代碼標籤Tag4.觸發條件Trigger5.資料層DataLayer1.設定帳戶2.設定容器3.確認使用GoogleTagManager的條款4.設定追蹤網站5.新增代碼6.代碼設定7. 輸入追蹤編號8.選擇追蹤類型9.設定觸發條件10.啟用代碼標籤想請TransBiz幫忙，為你的品牌說故事？ 什麼是標籤代碼（Tag）呢？ 相信你一定有使用如GoogleAnalytics,DoubleClick,AdRoll,AdobeSiteCatalyst等第三方線上行銷工具去追蹤網站或廣告成效吧！這些第三方線上行銷工具會提供的一串片段的Javascript程式碼，這一串的程式碼有許多用途，最常被使用的就是回傳訊息。

當你在不同的行銷活動上予以註記時，程式碼會回傳訊息至第三方線上行銷工具，因此可以幫助你分析並改善消費者在你電商網站上的觸擊等活動。

例如，消費者從哪一個管道進入你的電商網站、哪一個廣告點擊率最高、哪一個廣告實際下單轉換率最高、要針對誰做再行銷（remarketing）、A/B測試等，而這一串片段的Javascript程式碼就是所謂的標籤（Tag）。

為什麼要使用GoogleTagManager？ 簡化一切不必要的麻煩 為了分析不同的行銷活動，你勢必得使用許多線上行銷工具，而為了追蹤每個活動的成效，則得在每個活動中建立對應的標籤程式碼，並將該程式碼貼回對應的網頁。

例如你正在進行一個廣告行銷活動，同時使用GoogleAnalytics和GoogleAdWords追蹤轉換並回傳消費者在你電商網站上的某種行為資訊，傳統的作法是你必須將每一個標籤程式碼手動加到該網頁，然而有了GoogleTagManager你可以簡化這一連串冗長的流程，只要在GoogleTagManager的管理介面中註記想要使用的代碼標籤（Tag）即可，讓不是網站工程師的你也能輕鬆置入代碼標籤、追蹤成效。

稍後會做更詳盡的設定與解說。

增加網站穩定性與載入速度 過多的代碼標籤不但會延遲網頁的載入速度，嚴重的話甚至會導致伺服器超載，而電商網站短暫崩潰，將造成消費者的流失。

根據Kissmetrics研究調查顯示，等待時間超過3秒，你就已經失去40%的造訪者，而多等待1秒的時間，會減少11%的閱覽率、讓消費者滿意度下降16%、更會失去7%的轉換率！倘若使用GoogleTagManager，則能讓上述的情況發生機率大大降低，消費者在你的電商網站中也會有更好的體驗。

GoogleTagManager由哪些東西組成？ 1.帳戶Account 帳戶是GoogleTagManager中最高的主要層級，一個帳戶可以用來管理一個或多個的電商網站，一般來說一家公司僅需要一個帳戶便可管理所有旗下的電商網站。

若你同時追蹤、管理不同公司的數位行銷成效，則可將所有的TagManager帳戶連結至一個Google帳戶。

2.容器Container 相信聰明的你很快就猜到所謂的容器，就是專門放置標籤的地方。

一個帳戶裡面至少會有一個容器，用來裝載代碼標籤（Tag）與觸發條件（Trigger），舉例來說，一個容器裡可能含一個代碼標籤以紀錄消費者購物行為，並且含有一個觸發條件是當感謝購物頁面跳出時，代碼標籤才會記錄此交易資訊。

一般來說，一個容器會對應一個網域，而一個容器中可以放入多個代碼標籤與觸發條件，因此就不需要在每一個網頁中置入程式碼追蹤。

3.代碼標籤Tag 前面段落已提及，這裡便不再贅述。

4.觸發條件Trigger 觸發條件是由變數（Variables）、運算符號（Operators）與值（Values）所組成。

由於代碼標籤的運作模式是因為某種事件的產生而被觸發，進而開始蒐集資料，你設定觸發事件就是告訴代碼標籤何時該被觸發，例如你設定所有頁面（AllPages）為觸發條件，則不管哪一個頁面是載入狀態，代碼標籤都會被觸發；其他狀況還有像消費者將購物車中的東西移出，又或者使用者按下行動呼籲按鈕下載EDM或電子書等等。

變數Variable 變數幫助定義代碼標籤該在何時回傳訊息，而變數又可以細分成內建變數（Built-inVariables）與使用者自訂變數（User-definesVariables）兩種。

內建變數是系統預設值，有相當多種常用的觸發方式，例如網頁路徑{{pagepath}}或點擊{{clickID}}，你只要簡單點選即可啟用；而使用者自訂變數是你根據其需求特別定義的變數，例如購買完成{{purchaseComplete}}就是當交易完成、使用者所查看商品的價格後才回傳資料。

運算符號Operator 定義變數與值之間的關係，系統會在執行階段判斷觸發條件為true或false，而兩者之間一定要對應的上才能確保觸發條件順利運行，最常見的運算符號如等於（equals）、包含（contains）、或未包含（doesn’tcontains）。

值Value 明確定義變數可以是某些特定的數字或是網頁網址，已此觸發代碼標籤蒐集資訊。

若你只想要當使用者完成購買時才讓標籤代碼蒐集資料的話，你可以設定： 變數：{{url}} 運算符號：等於 值：完成購買頁面”checkout.html” 另外，你也可以同時設定多個觸發條件來蒐集資料。

5.資料層DataLayer 資料層級是一個非必須的JavaScript物件，也是一種程式碼，可以用來傳遞GoogleTagManager的所有信息，諸如事件或變數的資料訊息可以通過資料層傳遞給GoogleTagManager，並且可以根據變數在設置觸發事件。

例如你設置了一個再行銷的代碼標籤，其變數規則是當某特定消費者購買金額超過$100美元時（purchase_total>$100），則該代碼標籤會被觸發；然而該變數也可以被運用在其他的代碼標籤中。

簡單來說透過資料層可以讓你更簡單直覺的傳遞訊息。

大概了解GoogleTagManager的組成後，接下來該如何設定呢？以下有詳細教學步驟 1.設定帳戶 前往GoogleTagManager，並使用你的google帳戶登入。

登入後新增一個帳戶，帳戶名稱可以是你電商品牌的名字。

2.設定容器 為你的容器取一個名字並選擇該容器欲使用的位置。

由於軟硬體的歧異，在網頁或行動裝置上的追蹤方式會因而有些不同，此外，在行動裝置方面，更要區別不同的作業系統，因為在iOS和Android中不管是網頁、廣告、跳出視窗（pop-up）皆略有差異，因此需要搭配iOS或Android平台適用的FirebaseSDK 來進行設置。

3.確認使用GoogleTagManager的條款 4.設定追蹤網站 確認使用GoogleTagManager的條款後，系統會產出兩串程式碼。

接著，你回到你的電商網站按下F12，並依據指示將第一段程式碼貼到你的電商網站最上方的

中，此外，將第二段程式碼貼到開頭的程式碼正後方。

基本上，完成以上步驟，你已經大致做好了最初的設定。

不過到這邊還沒結束，因為如果不加上追蹤數位行銷成效的代碼標籤，就好比帶了一個名牌錢包出門逛街，而裡面卻沒有半毛錢，一切都是徒然，因此接下來的重點就是安裝代碼標籤用以追蹤流量，而最常使用的網站流量追蹤工具就是GoogleAnalytics，以下將以其作範例設定教學。

5.新增代碼 當你已經決定好要追蹤哪些消費者行為後，接下來的重點便是設定追蹤碼。

首先，回到你的GoogleTagManager頁面，在左上方的選單中點選「工作區」並點選「新增代碼」。

6.代碼設定 為了不讓此代碼標籤與往後其他追蹤活動搞錯，建議先在左上角為此代碼標籤取一個簡單且直覺的名字，例如：網站瀏覽。

接下來按下「代碼設定」，並選擇「通用Analytics（分析）」。

7. 輸入追蹤編號 接下來你便需要輸入追蹤編號，所謂的追蹤編號就是像「UA-OXOXOX-YY」這樣的字串，而你必須將這組字串加進追蹤程式碼，因此系統才能判斷要將資料傳送到哪個Google帳戶。

第一組號碼OXOXOX代表你的帳號，而YY則是與帳戶連結的特定資源編號，其數字會從01、02、03等向上遞增，例如你的電商網站的流量追蹤資源編號是01，而你的電商部落格流量的資源追蹤編號就會是02。

此外，你也可以在JavaScript追蹤程式碼片段的前幾行看到完整字串。

要找到你的追蹤編號，你必須先前往GoogleAnalytics的帳號下，選取「管理員」，再從「帳戶」選單中選取追蹤帳號，並在「資源」欄位中按下「追蹤資訊」，接著便可以找到「追蹤編號」，將其複製並貼回GoogleTagManager中。

8.選擇追蹤類型 一般來說，最常使用的追蹤類型就是「瀏覽量」，並加入觸發條件在「所有網頁」上啟用代碼，因此你可以追蹤最基本的網站流量。

此外，你也可以利用變數的設定，來讓特定事件發生時才啟動代碼標籤，例如點擊連結、點擊文字、網頁的導引流量、網頁所在網域等等。

9.設定觸發條件 若是追蹤基本電商網站流量，你的觸發條件選單中僅會有一個選項，那就是「所有網頁」。

若是較為複雜的追蹤在電商網站上的消費者行為，你則必須設定相對應的觸發條件。

例如你要追蹤消費者點擊某個行動呼籲按鈕，則在代碼設定的部分，你就要選擇追蹤類型是「事件」，並且設定追蹤的參數，諸如類型、動作、標籤、值等等。

在觸發條件部分，你則要選擇相對應的觸發類型，同時並設定在什麼條件下標籤代碼會啟動，例如當內文等於XXOO時，代碼標籤才會觸發。

此外，你也可以透過右邊的加減符號新增或減少觸發條件。

10.啟用代碼標籤 在設定都完成後，你要回到GoogleTagManager頁面，按下右上角的「發布」，代碼標籤才會順利啟用。

而你也可以在「正在修改」欄位中查看工作區的變動，有多少已修改、多少已新增與多少的已刪除動作。

在代碼標籤發布前，你也可以按下發布右方的箭頭，選取「預覽與除錯」來檢視你的設定是否有錯誤。

啟用預覽模式後，你每次進入導入容器的網站，便會在瀏覽器底部看到偵錯視窗，其列出啟用狀態和正在處理的資料等代碼相關詳情，因此可以很快速地察看當進入哪一個網頁時，代碼標籤因為設定錯誤因而沒有被啟用。

而這個偵錯視窗只會在你的預覽中出現，並不會對其他網站訪客造成任何的影響。

另外，你也可以透過GAChecker來檢查Google各項追蹤工具的埋設，而GAChecker主要偵測的項目包括： GoogleAnalytics(ga.js) GoogleAnalyticsRemarketing(dc.js) GoogleUniversalAnalytics(analytics.js) GoogleAnalyticsExperiments(ga_exp.js) GoogleTagManager(gtm.js) GoogleAdWordsConversion(conversion.js) GoogleAdWordsPhoneConversion(loader.js) GoogleAdWordsRemarketing(conversion.js) GoogleAdWordsDynamicRemarketing(conversion.js) GoogleDoubleClick 若使用上述的Google行銷工具，卻不確定網頁是否有成功啟用追蹤代碼標籤的話，只需要開啟GAChecker後輸入檢測網址，其便可以自動抓取網站內所有頁面，更同時列出每一個頁面網址被找到的代碼類型。

若發現錯誤，可以進入GoogleTagManager，到相對應的標籤代碼或觸發條件中進行修改。

最後，推薦一個非常好用的Chrome擴充工具，那就是GoogleTagAssistant！ 在尚未使用GoogleTagAssistant前，要查追蹤碼的安裝狀態，除了使用瀏覽工具外，你的另一個選擇便是按下右鍵，選取「檢視原始碼」，在透過Ctrl+F搜尋_gaq.push或ga.js，不過，現在透過GoogleTagAssistant擴充工具，便可以根據顏色與數字，立即看出網頁的標籤設定有沒有問題。

點擊擴充工具圖示，即可顯示該網頁中含有多少標籤、有多少錯誤以及建議修正訊息。

依據問題的嚴重性由小到大依序以藍色、黃色、紅色代表。

綠色標記+數字：追蹤標籤運作正常 藍色標記+笑臉：網頁上沒有追蹤標籤或TagAssistant尚未啟動 藍色標記+數字：追蹤標籤有點小問題 黃色標記+數字：追蹤標籤有問題 紅色標記+數字：追蹤標籤有嚴重的問題 若過去深受管理標籤的困擾，上述實用教學是否減少你管理標籤代碼的不便呢？ 如果你還沒開始使用GoogleTagManager，是否已經躍躍欲試想使用它來優化流量與帶來轉換呢GoogleAnalytics幾乎被公認是電商經營的好朋友，而如今認識GoogleTagManager這個新朋友，必定能為你的電商經營增加不少助力！ 進階閱讀：【GTM轉換設定大全，整合你的FBPixel、GA、購物車】 想請TransBiz幫忙，為你的品牌說故事？ 馬上預約免費諮詢 231sharesFacebook158LinkedIn32LoveThis30Twitter11 EthelLee 「Itisnowornever！」有些事情現在不做，以後就永遠不會做了！ 相信年輕時走過的路都會化作生命的養份，長成未來的茁壯，於是學習各種技能、儲備能量，懷抱著一顆宏大的心，跳脫以往的舒適圈，享受創新與挑戰，更敢於嘗試與冒險，拒絕一陳不變！希望在電子商務這有趣的產業中，幫助台灣優秀的產品走向國際！ 相關文章2022-05-03亞馬遜產品頁面優化怎麼做？從基礎到進階·4+3招學起來！【官方公告】完整文章2019-03-06goo.gl退休後，推薦行銷人必備的Lihi短網址工具！（2019.06更新）完整文章2018-12-10B2B、B2C外銷網站怎麼做？7大台灣廠商愛用網路開店系統比較完整文章 3Comments [慕課週記#31]新課上線「啟動GTM即單力：六小時快速入門」及分享連假讀完什麼好書|慕課說： 2017-06-01at14:18:06 […]GoogleTagManager教學，一篇搞懂如何設定和管理網站追蹤碼，這篇來自transbiz，有完整的安裝教學步驟。

[…] 正在載入... 回覆 Emily說： 2018-01-29at14:36:10 您好,感謝您分享這篇,受益無窮, 想另外請問若公司的入口網站有兩種以上的語言,(如:中文,英文) 是否有需要針對不同版本都埋程式碼做追蹤呢? 正在載入... 回覆 kredoll說： 2020-11-24at16:55:33 WordPress自己研究怎麼去安裝，弄了很久都不會。

很高興可以找到這篇文章，謝謝。

正在載入... 回覆 歡迎留下你的疑問或這篇文章對你的幫助！ 取消回覆 這個網站採用Akismet服務減少垃圾留言。

進一步了解Akismet如何處理網站訪客的留言資料。

我想要找...搜尋Facebook Facebook 文章分類 [class^="wpforms-"][class^="wpforms-"][class^="wpforms-"][class^="wpforms-"][class^="wpforms-"][class^="wpforms-"][class^="wpforms-"][class^="wpforms-"] %d位部落客按了讚：