新手觀念篇，追蹤網站數據你只需Google Tag Manager代碼

Google 代碼管理工具（Google Tag Manager, 以下簡稱GTM） 是一套代碼管理 ... 此時我們便可用GTM 來安裝Google Ads 轉換追蹤代碼，只需填寫好 ... Home/網站優化/GTM教學-新手觀念篇，追蹤網站數據你只需GoogleTagManager代碼 GTM教學-新手觀念篇，追蹤網站數據你只需GoogleTagManager代碼 想追蹤網站的數據和流量，但卻不知道如何下手嗎？那GoogleTagManager（簡稱為GTM）將成為你的救星！我們將在這篇GTM教學中，以自身SEO實戰經驗，教導你如何輕鬆安裝和設定GTM，同時釐清新手最容易搞不清楚的GTM觸發條件、代碼及變數…等概念，讓行銷人員從此不用再仰賴工程師埋Code，也能輕鬆管理和追蹤數據。

  內容目錄 隱藏 I. GTM是什麼？ II. GTM的3大用法 II.I. 網站事件追蹤，揭開瀏覽行為面紗 II.II. 再行銷Retargeting，輕鬆串接轉換ID II.III. 臉書廣告投放，埋FBPixel不用會寫程式碼 III. GTM帶來的好處有哪些？ III.I. GTM簡化置入流程 III.II. GTM能提升網站載入速度 III.III. GTM減少埋設程式碼的出錯機會 IV. GTM如何安裝？ IV.I. 步驟一、完成GTM帳戶和容器的填寫 IV.II. 步驟二、將GTM程式碼貼到網頁當中 IV.III. 步驟三、Wordpress如何安裝GTM？ IV.IV. 步驟四、怎麼確保GTM安裝成功？ IV.V. 【更新】GTM最簡單安裝方法 V. GTM介面說明 V.I. 1.管理區 V.II. 2.功能區 V.III. 3.工作區 V.IV. 4.版本區 VI. GTM元素組成架構 VI.I. 代碼Tag VI.II. 觸發條件Trigger VI.III. 變數Variable VI.IV. GTM核心小總結：代碼、觸發條件、變數 VI.IV.I. 文章最後，再讓我們複習一次GTM的元素架構： VI.IV.II. GTM追蹤數據不能不知道： VII. GTM埋Code-如何設定GAPageview？ VII.I. 步驟1、新增代碼：通用Analytics分析 VII.II. 步驟2、追蹤類型：網頁瀏覽 VII.III. 步驟3、選取設定變數欄位：建立新的GoogleAnalytics設定變數 VII.IV. 步驟4、設定觸發條件類型：AllPages VII.V. 步驟5、如何確保Pagview已經成功啟用？ VIII. 結語：GoogleTagManager需搭配實作才能熟練！ GTM是什麼？ Google代碼管理工具（GoogleTagManager,以下簡稱GTM）是一套代碼管理系統(TMS)。

在安裝完成後，網站分析師與行銷人員不用更改網站的程式碼，透過GTM即能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中，讓追蹤和管理都在同一個平台完成。

  如果你對於GTM已經有一定的了解，可以跳到後半部的埋設代碼實戰。

我們將一步一步帶你教你如何用GTM來開啟GAPageview功能。

    ｜GTM能整合追蹤程式碼以及第三方應用工具到網站當中   GTM的3大用法 GTM的整合功能相當強大，我們列出最常被行銷人員使用的三個大項目。

  網站事件追蹤，揭開瀏覽行為面紗 透過串接GoogleAnalytics，GTM網站事件追蹤功能可以揭密瀏覽者在頁面上的真實使用（互動）情況，例如在GA的網站內容報表當中，你的平均網頁停留時間為五分鐘，但使用者確實有把文章讀完嗎？我們能用GTM的事件追蹤，在不用更改網站後台的情況下，追蹤使用者捲動網頁的百分比。

  此外，填寫表單和點擊諮詢按鈕是名單型產業的重要轉單指標，我們也能使用GTM的按鈕追蹤來蒐集網站的事件，並在GoogleAnalytics客戶開發的報表中，交叉比對出轉換最高的頁面。

  若對於GoolgeAanlytics還不熟悉，稍後可以閱讀我們的GoogleAnalytics教學。

你現在只需要先知道，GTM能夠讓GA追蹤的數據更多元且真實。

  再行銷Retargeting，輕鬆串接轉換ID 有在投放Google關鍵字和GDN廣告(GoogleDisplayNetwork，多媒體廣告聯播網)的人對於再行銷不陌生，當我們在GoogleAds完成設定後，通常會需要將代碼埋到網站。

此時我們便可用GTM來安裝GoogleAds轉換追蹤代碼，只需填寫好轉換ID，再行銷就完成綁定了！     ｜GoogleAds轉換追蹤代碼能以三種方式來埋設       ｜Google代碼管理工具是最簡單輕鬆的方法   你還沒接觸過Google廣告投放嗎？我們完整的Googleadwords教學非常適合新手來閱讀。

  臉書廣告投放，埋FBPixel不用會寫程式碼 投放臉書廣告前，必須在網站程式碼中插入一段FBPixel，FB廣告後台方能監控受眾和你網站的互動。

但若有GTM的幫忙，一切手續都能在三分鐘內完成，只需完成代碼和觸發條件的設定，臉書廣告就能跑起來了！     如對於臉書廣告投放不熟悉，FacebookPixel完整教學用淺白的用語教你臉書廣告如何運行和操作。

  GTM帶來的好處有哪些？           如上圖所示，GTM對於不會寫程式碼的人來說，是相當好用的工具。

但我們仍然建議不管是工程師和還是懂得寫程式碼的行銷人員，都以GTM作為代碼管理工具，為什麼呢？原因有三：   GTM簡化置入流程             簡單來說，GTM就如大腦總管一樣，讓我們輕鬆管理GoogleAnalytics、GoogleAdWords、FacebookPixel或其他第三方工具等，整合眾多追蹤代碼於一個平台，再將統整好的資訊傳送到你的網站，省去我們需要花時間將許多埋追蹤碼放到網站後台的成本，大大的簡化置入流程。

  GTM能提升網站載入速度 Google已表明網站速度是其演算法對頁面進行排名的訊號之一。

也就是說，網站載入速度越快，對於排名越有優勢。

然而，過往為了追蹤網站的資料，會在網頁中加入大量程式碼，如此過多的JavaScript程式碼不但將拖累網站速度，影響SEO成效，嚴重的話甚至會導致伺服器超載。

但透過GTM埋設的代碼不同，它們實際上並不會被寫入網頁的HTML當中，因此不會拖累網站載入速度。

  GTM減少埋設程式碼的出錯機會 若在網站檔案中直接加入追蹤碼，不管是FBPixel、GoogleAnalytics、還是網站事件追蹤，都需要在網站發布後才能檢驗是否成功，但GTM有提供預覽功能，能在代碼發布之前事先偵錯，讓行銷人員檢視哪些代碼因為錯誤而沒被啟用，並立即調整。

  同時，GTM是以版本來做紀錄，每次更新的代碼都會產生新的版本，若其中有任何環節出錯，還能還原當初的版本。

  GTM如何安裝？ 首先，讓我們先新增GTM帳戶。

若你已經完成了GTM的安裝，可以直接到到代碼、觸發條件、以及變數的設置。

  步驟一、完成GTM帳戶和容器的填寫     帳戶(Account)：簡單來說，你的公司或網站名稱就是一個帳戶。

帳戶是GTM中最高的主要層級，一個帳戶可以用來管理一個或多個網站。

  容器(Container)：容器可以理解成「你擁有的網站」。

每個帳戶裡面至少會有一個容器，用來裝載代碼標籤(Tag)與觸發條件(Trigger)。

而一個容器會對應一個網域，容器之間彼此獨立。

  步驟二、將GTM程式碼貼到網頁當中 輸入好資訊後，勾選接受服務條款，就會進到安裝Google代碼管理工具的介面。

你需要將程式碼貼到網站的

與中，即可完成GTM的設置。

    此時，你可以將資料傳給工程師，或者跟著我們的步驟，簡單的將其置入到網站當中，這將是本次Googletagmanager教學當中唯一需要碰到程式碼的地方，不過因為相當簡單且實用，希望各位都能學起來，以下我們將以Wordpress網站為例安裝GTM。

  步驟三、Wordpress如何安裝GTM？         在WordPress後台，「外觀」下的「佈景主題編輯器」是存放你當前網站佈景主體設計的地方，在這裡做得變動會反映在全站上。

我們在右邊欄位找到佈景主題頁首(header.php)，將GTM的程式碼按照指示插入即可，第一段程式碼需要安插到當中，另一段則必須放到的正下方，最後按更新檔案，即完成了GTM的安裝。

  步驟四、怎麼確保GTM安裝成功？         這是最後也是最重要的步驟，我們不希望看到明明已經在GTM上進行操作了，但實際上GTM卻沒安裝成功的狀況發生。

因此，強烈建議安裝Chrome外掛 TagAssistant(byGoogle)，它可驗證你是否已在網頁上正確安裝了各種Google標籤，例如：GoogleAnalytics、AdwordsConversionTracking、GoogleTagManager。

安裝完後啟動，並比對外掛顯示的GTM標籤(WebPropertyID)是否和你安裝的GTM相符（從GTM介面的右上角檢視）。

  【更新】GTM最簡單安裝方法 如果你的網站是WordPress，那你可以事先安裝Google推出的外掛SiteKitbyGoogle，是一個資訊服務整合外掛，涵蓋了SearchConsole、GoogleAnalytics、PageSpeedInsights、GoogleTagManager和 AdSense，能將其資訊直接統整到WP後台。

｜照著指示操作即可完成GTM安裝，不需要動到後台程式碼，超簡單又超輕鬆！   ｜完成安裝後，該項目應該顯示為connected   最重要的是，SiteKitbyGoogle還能幫你的網站安裝以上的應用工具，只需照著螢幕指示，點擊滑鼠就能完成，讓安裝GTM完全不需要動到程式碼（前提是要先完成SearchConsole和GoogleAnalytics的整合，才能接著安裝GTM）。

  GTM介面說明     在操作GTM前，我們先了解其介面設計，主要分成四個區域。

  1.管理區 若要新增容器使用者、更改帳戶容器設定，或者提交新的版本都在此進行。

  2.功能區 代碼(Tag)、觸發條件(Trigger)、變數(Variabel)就是在此設定。

我們稍後會有更詳盡的解釋。

  3.工作區 這邊會紀錄是哪位使用者新增或變更了哪些代碼。

  4.版本區 會顯示最新的版本和發布時間。

在提交的代碼後，就會生成一個新的版本，而以往舊的版本和活動紀錄都可在這區找到，若有發生埋設代碼出錯，也能在此還原舊版本設定。

  GTM元素組成架構 在GTM左半邊的功能區，就是我們主要埋設追蹤會用到項目。

整體架構除了帳戶(Account)和容器(Container)之外，我們必須先了解代碼(Tag)、觸發條件(Trigger)、變數(Variable)是什麼。

乍看之下有點摸不著頭緒，但我們能把他們理解成前因後果的關係。

    基礎網站設置有： ▶帳戶(Account)：公司或網站名稱就是一個帳戶 ▶容器(Container)：擁有的網站   追蹤程式碼&第三方應用工具埋設需要： ▶代碼(Tag)：即為追蹤事件的程式碼片段，如GA、FacebookPixel ▶觸發條件(Trigger)：觸發條件具體定義出代碼如何被觸發 ▶變數(Variable)：變數是觸發條件的一環，定義觸發條件的執行準則   例如，我們想要在GA追蹤瀏覽者在特定頁面的捲動頁數是否達75%以上，於是： ▶帳戶(Account)：集客數據行銷 ▶容器(Container)：https://inboundmarketing.com.tw/ ▶代碼(Tag)：通用Analytics分析程式碼片段 ▶觸發條件(Trigger)：在特定頁面的捲動深度需要高於75% ▶變數(Variable)：以「PageURL」這個變數指定出觸發條件中的特定觀察頁面   代碼Tag 即為追蹤事件的程式碼片段，如GoogleAnalytics、GoogleAds(以前的GoogleAdWords)，其中FBPixel則是透過自定程式碼來嵌入。

    在教學的最開始，我們說GTM是一套代碼管理系統(TMS)，能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中。

而代碼就是追蹤程式碼和第三方應用工具提供的Javascript程式碼片段。

也就是說，我們能把代碼當成分流器，希望用哪個行銷工具來分析和收集數據，就把其設定為代碼。

  觸發條件Trigger     觸發條件具體定義出代碼如何被觸發，當中觸發條件是由變數(Variables)、運算符號(Operators)與值(Values)所組成。

    其中觸發條件類型(Triggertypes)當中有許多選擇，例如：網頁瀏覽、網頁點擊、網頁元素可見度、網頁表單提交、網頁捲動頁數、網頁YouTube影片、自訂觸發事件等，更多觸發條件類型可以參考Google官方說明。

至於要類型選擇哪一項，則因你想要追蹤的代碼是什麼而異，以下簡單說明：   網頁瀏覽：使用者是否有瀏覽特定頁面 網頁點擊：使用者是否有點擊特別欄位按鈕，例如：致電詢問、CTA (Call-To-Action) 網頁YouTube影片：影片是否有被播放、播放進度、是否有跳轉 網頁元素可見度：通常用來追蹤表單提交和頁面特定元素的曝光與否 網頁表單提交：同樣可拿來追蹤表單的提交狀況 網頁捲動頁數：觀察使用者的瀏覽深度       例如於我們想追蹤捲動深度，可以參照以上「網頁捲動頁數」設定，作為觸發條件   觸發條件類型(Triggertypes)：選擇捲動頁數 附加條件：垂直捲動頁數達75%以上 啟用這項觸發條件的時機：視窗載入(更多時機解釋請參考Google說明) 變數(Variables)：網頁網址(PageURL) 運算符號(Operators）：等於 值(Values)：www.learnGTM.com/topic   變數Variable       簡單來說，變數定義觸發條件的執行準則，列出哪些網頁特質會啟動代碼。

以我們的例子來說，就是當瀏覽者載入特定頁面後代碼會被觸發，當中的特定頁面就是我們要指定的，可以用網頁網址(PageURL)作為變數。

其餘變數還包含：點擊元素(ClickElement)、點擊類別(ClickClasses)、點擊ID(ClickID)、點擊目標(ClickTarget)…等。

  有沒有覺得點擊類別(ClickClasses)和點擊ID(ClickID)相當眼熟呢？其實類別跟ID就是我們常附加在HTML當中的屬性，就像把程式碼分門歸類（即是類別），並給予身分證（ID）。

例如在上圖的範例當中，「什麼是SEO」的標題有類別(class)為“ez-toc-section”和ID為“_SEO”。

  而我們就可以觀察在網頁當中的區塊、段落、或者物件，是否具有類別和ID，如此便能夠做為設置的變數。

ClickTarget（點擊目標）、ClickURL（點擊網址）、ClickText（點擊文字）一樣能在HTML當中找到。

  如果我們要追蹤的事件是獨一無二的，就需確保該變數在當前頁面不重複即可，這樣的話選擇哪一個變數都沒有差別。

（若變數類型的值重複了，可能會導致代碼被重複觸發，因而讓數據失準）。

  最後，在GTM預設的變數當中，只有網頁其下的項目會被勾選，使用者可以依據選定的觸發條件來開啟變數類型，例如若想追蹤網頁YouTube影片的觀看，通常會將影片類型變數開啟，而若是想追蹤表單提交，則會勾選表單類型。

以上的內建變數若無法滿足需求，也可以新增自定義變數。

除此之外，更多的變數類型請參閱更多GTM內建變數資訊。

  GTM核心小總結：代碼、觸發條件、變數 文章最後，再讓我們複習一次GTM的元素架構：   1、代碼(Tag)：即為追蹤事件的程式碼片段，如GA、FacebookPixel。

2、觸發條件(Trigger)：觸發條件具體定義出代碼如何被觸發。

3、變數(Variable)：變數是觸發條件的一環，定義觸發條件的執行準則。

    GTM追蹤數據不能不知道： 1、GTM來設置追蹤程式碼和整合第三方應用工具，需要同時包含代碼(Tag)、觸發條件(Trigger)、變數(Variable)。

2、其中代碼(Tag)可以是GA追蹤碼、GoogleAds再行銷、或自訂程式碼HTML（例如：FBPixel），而觸發條件(Trigger)包含變數(Variable)，定義了代碼被觸發的時機。

3、變數(Variable)的類型有很多，但只要變數不會造成代碼被誤發，選擇不同的變數並不會有任何的差別，例如點擊元素(ClickElement)、點擊類別(ClickClasses)。

  GTM埋Code-如何設定GAPageview？ 恭喜你，已經掌握了GTM的基本概念，也將GTM埋設到網站上了，距離獲得數據只剩一步之遙，就讓我們實際操作一個範例，來加深觀念吧！   當我們想啟動GoogleAanlytics時，又碰到需要埋設程式碼的問題了，不過因為我們已經學會操作GTM，所以程序變得相當簡單喔。

  GAPageview設定一覽表： 代碼(Tag)：通用Analytics分析程式碼片段 觸發條件(Trigger)：網頁瀏覽(AllPages) 變數(Variable)：不指定（當觸發條件為網頁瀏覽時，不用指定變數）   步驟1、新增代碼：通用Analytics分析   此時可以順便將左上角的代碼命名。

你會注意到我們將GA作為開頭，例如GA_Pageview，這是為了區分不同代碼類別，方便管理所制定，當然也可以依照自己喜好的方式來命名。

  步驟2、追蹤類型：網頁瀏覽 因為我們想在GA報表當中得知使用者在我們整個網站的瀏覽情況，因此要選擇頁面瀏覽。

其中還有許多選項，包含事件、交易、計時等，是用來追蹤特定行為時才會用到的，例如你想追蹤促銷活動的按鈕點擊等特定互動，則可選用「事件」。

  步驟3、選取設定變數欄位：建立新的GoogleAnalytics設定變數 這裡的設定變數是為了導入指定的GA帳戶而生。

由於我們尚未將GA和GTM綁定，因此需要先新增一個GA設定變數。

｜ 到GoogleAnalytics後台管理的資源設定，複製追蹤編號（追蹤ID）   ｜  把GA追蹤編號（追蹤ID）貼到GTM當中   我們要到GoogleAnalytics後台管理的資源設定，方能取得追蹤編號，也就是追蹤ID（例如UA-XXXXXXXXX-1）。

回到GTM在「變數設定」畫面中貼上並儲存，即完成代碼設定。

當往後選擇GA作為代碼時，即可直接套用該設定變數，不用再重新輸入一次。

  步驟4、設定觸發條件類型：AllPages 完成代碼設定後，我們還需要設定觸發條件才能儲存代碼。

點擊下方觸發條件，然後選擇AllPages即可。

這樣我們就成功啟動GTM中GA最基本PageView功能了   步驟5、如何確保Pagview已經成功啟用？ 同樣以TagAssistant (byGoogle)來檢驗，網站埋的GAID是否跟剛才埋設的相同。

  結語：GoogleTagManager需搭配實作才能熟練！ 相信GTM可以為行銷人員帶來許多方便，但由於埋設過程需要足夠的基本知識才能進行，建議大家再將代碼Tag、觸發條件Trigger、變數Variable的概念複習一次，最後搭配實作練習才能熟練。

我們第二篇GTM教學文章【追蹤碼實作篇，點擊事件按鈕一次就學好】，可以深化GTM的應用，讓行銷人員能夠追蹤更多元的數據，包含網站事件點擊和表單追蹤。

  延伸閱讀，開始進階應用GTM做網站分析和廣告投放： 【GA教學】GoogleAnalytics教學，一次學會網站分析！ 完整的Googleadwords教學，教你如何在2020操作關鍵字廣告！ 免費預約數位顧問諮詢 InboundAsia集客數據行銷公司，專注於集客式行銷服務，協助客戶網站建置、SEO流量成長、社群操作、內容行銷、數位廣告、數據分析，以專業數位顧問角色協助客戶成功！ 搶先諮詢，「集客」解決你的數位瓶頸 集客數據行銷觀察員 數位行銷趨勢採編，匯聚多元行銷成長方法報導與案例分享。

3月19,2020 11:21上午 網站優化 LINELAP投廣告有學問！來看看背後教你的3個行銷邏輯 8月2,2022 「欸我LINE你了喔！」 台灣人每天 ReadMore» 你知道SEO優化每年都在改變嗎？2022了還不知道使用者導向SEO？ 5月1,2022 「SEO、SEO優化、SEO優化教學、SEO優化工 ReadMore» SEO趨勢新知》新版GA4跟GA差在哪？3分鐘搞懂GA4新功能！ 4月15,2022 相信大部分從事行銷相關產業的人，都對GA工具不陌生，其免費且便利的分析功能，讓眾多數位行銷人員愛不釋手，而隨著科技日新月異，Google也在近年推出了新版本的GA4，究竟新版的GA4跟原本GA差在哪？本文將為你介紹GA4的特色與新功能，幫助你瞭解兩者差異，快速掌握SEO趨勢。

ReadMore» 搜尋 精選活動 數位行銷講座 活動詳情 分類 B2B行銷 SEO 企業轉型 內容行銷 口碑行銷 品牌策略 國際洞察 市場策略 市場趨勢 成功案例 數位廣告 數位行銷策略 最新消息 會員經營 產業專欄 社群行銷 網站優化 行銷企劃 行銷部門規劃 電商行銷 分類 B2B行銷 SEO 企業轉型 內容行銷 口碑行銷 品牌策略 國際洞察 市場策略 市場趨勢 成功案例 數位廣告 數位行銷策略 最新消息 會員經營 產業專欄 社群行銷 網站優化 行銷企劃 行銷部門規劃 電商行銷 近期文章 8月2,2022 5月1,2022 4月15,2022 12月5,2021 最多人看 PopularComment 3月24,2018 11月11,2020 1月14,2019 3月24,2018 11月11,2020 1月14,2019 3月24,2018 近期文章 數位行銷策略 LINELAP投廣告有學問！來看看背後教你的3個行銷邏輯 「欸我LINE你了喔！」 台灣人每天 閱讀更多» 8月2,2022 尚無留言 SEO 你知道SEO優化每年都在改變嗎？2022了還不知道使用者導向SEO？ 「SEO、SEO優化、SEO優化教學、SEO優化工 閱讀更多» 5月1,2022 尚無留言 SEO SEO趨勢新知》新版GA4跟GA差在哪？3分鐘搞懂GA4新功能！ 相信大部分從事行銷相關產業的人，都對GA工具不陌生，其免費且便利的分析功能，讓眾多數位行銷人員愛不釋手，而隨著科技日新月異，Google也在近年推出了新版本的GA4，究竟新版的GA4跟原本GA差在哪？本文將為你介紹GA4的特色與新功能，幫助你瞭解兩者差異，快速掌握SEO趨勢。

閱讀更多» 4月15,2022 尚無留言 網站優化 【GA完整教學最新版】GoogleAnalytics從註冊設定到操作介面，一次學會網站流量分析！ 想知道每天有多少人造訪我的網站，最快最有效的方法就 閱讀更多» 12月5,2021 尚無留言 成功案例 【成功案例】中租全民電廠-新品牌進入市場的整合行銷心法 客戶背景與品牌故事 中租控股於20 閱讀更多» 9月30,2021 尚無留言 成功案例 【成功案例】韓國第一傢俱品牌-分眾行銷策略、扭轉折扣形象！ 客戶背景與品牌故事 「為了製作出真 閱讀更多» 9月28,2021 尚無留言 最多人看 11月11,2020 1月14,2019 3月24,2018 7月18,2021 關注我們 聯絡我們 台北市中山區中山北路二段112號4樓之1 (02)2521-8885 [email protected] (02)2521-8884 了解更多集客 關於我們 人才招募 服務案例 SEO健檢 集客力專欄 行銷播客-podcast 社群媒體 Facebook-f Spotify Linkedin Slideshare Rss Copyright©2016-2021震豪網路媒體股份有限公司AllRightsReserved ShoppingBasket 立即諮詢