GTM教學-追蹤碼實作篇，點擊事件按鈕一次就學好

II.VI. 步驟5、選取設定變數欄位：選擇GA追蹤ID Home/網站優化/GTM教學-追蹤碼實作篇，點擊事件按鈕一次就學好 GTM教學-追蹤碼實作篇，點擊事件按鈕一次就學好 這篇實作文章將著重在GoogleTagManager（簡稱GTM，Google代碼管理工具）事件代碼的設置，例如按鈕和表單追蹤，如果你對於GTM還不熟悉，可以先閱讀我們GTM教學系列的第一篇【GTM教學-新手觀念篇，追蹤網站數據你只需GoogleTagManager代碼】，它將從最基本的觀念切入，非常適合新手自學。

那接著就讓我們邁入第二章，示範如何追蹤使用者在網頁上的行為，包含按鈕點擊和表單提交的追蹤，讓數據導向的行銷決策更上一層樓吧！   內容目錄 隱藏 I. 實作前，先認識GTM的3大元素：代碼、觸發條件、變數 II. 如何透過GTM追蹤按鈕/事件？ II.I. 按鈕/事件追蹤設定一覽表 II.II. 步驟1、進入預覽模式 II.III. 步驟2、新增代碼：通用Analytics分析 II.IV. 步驟3、追蹤類型：事件 II.V. 步驟4、設定非互動匹配(Non-InteractionHit) II.VI. 步驟5、選取設定變數欄位：選擇GA追蹤ID II.VII. 步驟6、設定觸發條件類型：點擊所有元素 II.VIII. 步驟7、選取變數：ClickElement II.IX. 步驟8、檢視代碼埋設是否成功 II.X. 步驟9、提交版本 III. 如何透過GTM追蹤表單提交？ III.I. 表單追蹤（提交後網頁有跳轉）設定一覽表 III.II. 表單追蹤（提交後網頁無跳轉）設定一覽表 III.III. 步驟1、判別表單類型：傳送後網頁是否有跳轉？ III.IV. 步驟2、新增代碼：通用Analytics分析 III.V. 步驟3、設定觸發條件類型：元素可見度 III.V.I. 點擊所有元素：數據可能被灌水，不夠精確 III.V.II. 表單提交：功能不完整，仍會有誤觸的狀況 III.V.III. 元素可見度是什麼？ III.VI. 步驟4、選取方式：CSS選擇器是什麼？ III.VII. 步驟5、元素選擇器：CopySelector怎麼用？ III.VIII. 步驟6、啟動此觸發條件的時機：每個網頁一次 III.IX. 步驟7、設定最低可見百分比 III.X. 步驟8、勾選觀察DOM改變情形 III.XI. 步驟9、觸發條件的啟動時機 III.XII. 步驟10、提交版本 IV. 如何在GA檢視GTM的事件追蹤？ IV.I. GA行為事件報表解讀 V. 結語：GoogleTagManager讓集客式行銷發酵 實作前，先認識GTM的3大元素：代碼、觸發條件、變數   GTM為一套代碼管理工具，讓網站分析師與行銷人員不用更改網站的程式碼，透過GTM即能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中。

而在追蹤以上數據時需要填寫三個重要元素：   ▶代碼(Tag)：即為追蹤事件的程式碼片段，如GA、FacebookPixel ▶觸發條件(Trigger)：觸發條件具體定義出代碼如何被觸發 ▶變數(Variable)：變數是觸發條件的一環，定義觸發條件的執行準則   以下我們將以自身SEO經驗，示範2個事件追蹤的實作來加深各位對GTM的印象，並配合GoolgeAnalytics的目標設置，增加你解讀數據的維度。

開始吧！   如何透過GTM追蹤按鈕/事件？ 如果你想檢視瀏覽者對於特定按鈕是否點擊時，也能用GTM來埋追蹤代碼。

舉例來說，原本我們官網的Header當中有個「撥打電話」欄位，我們想要檢視將其放置在這麼明顯的區塊，真的會帶來比較多的致電聯繫嗎？還是我們應該將其放到側邊欄位，改以浮動式電話小工具來呈現？這時候就是GTM上場的時候了！   補充：在此之前要先開啟GAPageview的功能喔！參考此篇GTM初學者教學來設置。

  按鈕/事件追蹤設定一覽表 1.代碼(Tag)：通用Analytics分析程式碼片段 –追蹤類型：事件 2.觸發條件(Trigger)：點擊所有元素 3.變數(Variable)：ClickElement   步驟1、進入預覽模式 在埋設追蹤之前，我們要先額外新增一個觸發條件為「點擊」，以追蹤在頁面上所有點擊中附帶的資訊。

有了這設定，之後的代碼追蹤都將更輕鬆。

  接著，按右上角的「預覽」，之後GTM介面就會顯示「正在預覽工作區」，這代表我們開啟了「偵錯模式」，使用同個網路瀏覽器造訪你的網站，就能即時顯示我們埋設的追蹤碼有哪些，同時顯示他們的狀態是否有被觸發。

成功進入「預覽」模式後，你的網站下方會出現以上GTM預覽區域。

TagsNotFiredOnThisEvent可以檢視所有的代碼設置，其中若有代碼被觸發了，該代碼就會跳到TagsFiredOnThisEvent區域。

之前有提過了，這個偵錯模式只會在你的瀏覽器顯示，並不會影響到使用者瀏覽。

  以上步驟完成後，就讓我們來追蹤電話是否有被點擊吧！   步驟2、新增代碼：通用Analytics分析 因為往後會在GA當中分析資料，代碼要設為通用Analytics分析。

  步驟3、追蹤類型：事件 此時我們不選擇「網頁瀏覽」是因為我們要追蹤「特定動作」的發生，因此需要使用「事件」。

  在事件追蹤參數設定中，有類別、動作、標籤欄位，這裡填寫的名稱會回傳到GoogleAnalytics行為的事件報表當中。

在填寫準則上只要你或工作團隊能夠理解即可，建議可以用Excel檔案整理命名規則。

  步驟4、設定非互動匹配(Non-InteractionHit) 非互動匹配是什麼？首先我們必須先知道跳出率的定義，而這裡的非互動匹配（Non-InteractionHit）指的是，當你選擇「False否」的時候，這個事件便會被GA判定為「有造成互動的工作階段」，並且完成該事件的工作階段並不會被計算成跳出。

  因此，如何設定就端看你事件的設置內容是什麼了。

而對我們來說，如果瀏覽者有點擊電話，那麼表示他對我們的服務有興趣，因此就應該把它標示為「有造成互動的工作階段」，所以把點擊電話標示為「False否」是合理的。

  步驟5、選取設定變數欄位：選擇GA追蹤ID 選擇要綁定的GAID即可，如果忘記怎麼設置，可以回顧上一篇GTM新手教學。

  步驟6、設定觸發條件類型：點擊所有元素 因為我們所指定的動作為「點擊撥打電話」，因此類型需要選擇「點擊」，若你想追蹤的點擊是開啟特定網頁連結，也可選擇「僅連結」。

記住，在埋設追蹤時，沒有唯一解答，只要我們能夠抓取到網頁重要的元素，以此來設定觸發條件，就能設置成功。

  步驟7、選取變數：ClickElement 這裡我們需要用變數定義觸發條件的執行準則。

一般來說，當觸發條件為「點擊」和「僅連結」時，我們較常使用三者其中之一：ClickClasses、ClickElement、ClickURL。

至於點擊電話變數要怎麼抓取呢？這是許多人追蹤時遇到的最大困難，不過我們有很簡單的方法可以教你，讓你一次就成功。

實際在網頁上點擊Header的電話，會發現工作區域左側多跳出了「Click」，這裡抓取到的資訊就是該點擊所帶的變數資料，因此其中的值都能作為我們設定觸發條件的變數。

  將ClickEmement複製並貼回到GTM觸發條件設定當中，儲存代碼，並按「重新整理」，就能夠將更新的代碼預覽在當前的網站中。

  步驟8、檢視代碼埋設是否成功 最後我們要測試代碼是否埋設成功。

在預覽模式下，點擊重新整理(橘色區域)，再到網頁點擊電話，應該就會發現我們設置的「GA_點擊電話」被觸發了，跳到了TagsFiredOnThisEvent區域。

  與此同時，在GA的即時>事件報表當中（即時事件報表就是反映當下網站的即時狀況，因此我們能夠在這裡看到GTM事件代碼的即時觸發狀況），也可以看到剛剛被觸發的代碼已經傳送到GA後台了。

其中事件類別與事件動作會對應我們GTM>新增代碼>追蹤類型中相符。

  總結：檢驗代碼觸發的方式有兩種，第一個方式是在前台觀察代碼是否有從TagsNotFiredOnThisPage跳到TagsFiredOnThisPage，第二個就是在GA即時事件報表當中，觀察設置的事件類別名稱是否有在代碼被成功觸發後出現。

但不管是第一種還是第二種方式，GTM都必須先進入預覽模式。

  步驟9、提交版本 在完成以上檢查步驟後，且在預覽的情況下確保無誤，就能提交此版本了。

  如何透過GTM追蹤表單提交？ 表單有追蹤的必要嗎？每當有表單傳送後，都會傳送副本到指定的郵件信箱，但若你想在GA當中用維度來分析哪個頁面有助於表單的傳送，以及在時間線性下表單傳送次數是否有跟著流量一同成長，這樣以GTM來追蹤表單就有其必要性。

然而，追蹤表單是很多新手在埋設GTM代碼時常遇到的瓶頸，往往表單還沒成功送出，代碼就被誤發。

別擔心，以下我們將教各位如何一次就成功追蹤表單。

  表單追蹤（提交後網頁有跳轉）設定一覽表 1.代碼(Tag)：通用Analytics分析程式碼片段 –追蹤類型：網頁瀏覽或事件（建議用事件，方便在GA行為事件報表內分析） 2.觸發條件(Trigger)：網頁瀏覽 3.變數(Variable)：PageURL=https://example/thankyou   表單追蹤（提交後網頁無跳轉）設定一覽表 1.代碼(Tag)：通用Analytics分析程式碼片段 –追蹤類型：事件 2.觸發條件(Trigger)：元素可見度 –選取方式：CSS選擇器 3.變數(Variable)：若不限制表單提交網頁，可不指定   步驟1、判別表單類型：傳送後網頁是否有跳轉？ 表單傳送後，如果網頁有跳轉到新的網址（例如從https://example/contact到https://example/thankyou），這樣的表單比較容易追蹤。

我們只需追蹤該頁面，即https://example/thankyou，是否有被成功載入就好。

然而，如果你網站的表單外掛是用ContactForm7或者ARForms，提交後網址通常都不會跳轉，而是跳出一個區塊，如上圖，這樣的情況要如何追蹤代碼呢？讓我們繼續看下去。

  步驟2、新增代碼：通用Analytics分析 這步驟和按鈕/事件追蹤一樣，以事件做為追蹤類型，至於類別、動作、標籤的設置，不管要輸入文字或變數都行，只要你好辨識和管理就好。

其中標籤我選擇變數{{PagePath}}網址路徑，因為我想追蹤該表單是從哪個頁面寄出。

你也可以選擇{{PageURL}}完整網址，但{{PagePath}}會省略網域名稱，在分析時較容易辨識。

舉例，選擇{{PageURL}}的話，傳送的網址為：https://inboundmarketing.com.tw/數位行銷顧問，但在{{PagePath}}為/數位行銷顧問，在分析上較好辨識。

  步驟3、設定觸發條件類型：元素可見度 很多人在觸發條件類型中會選擇「點擊所有元素」或「表單提交」，但這樣會產生幾個問題：   點擊所有元素：數據可能被灌水，不夠精確 你可能會追蹤按「傳送表單」按鈕，但不是所有人都能一次就將表單成功傳出，可能會有資料漏填而傳送不出去的狀況，因此只追按鈕就會有數據被灌水的嫌疑。

  表單提交：功能不完整，仍會有誤觸的狀況 很可惜，雖然GTM內建有表單追蹤功能，但其功能不完整，即使等待代碼和檢查驗證已經開啟，但仍會有誤觸代碼的情況，因此我們也不建議選擇表單追蹤。

有鑑於此，觸發條件應該選擇「元素可見度」，這最能精準計算代碼觸發與否。

  元素可見度是什麼？ 簡單來說，就是某特定元素「出現或顯示」在瀏覽頁面時，就會啟動觸發條件。

在表單提交的例子時，因為該「感謝填寫」的區塊段落是在成功送出表單後才會出現的，所以我們就能夠用元素可見度來抓取資料。

換句話說，當它出現時，表單一定已經成功提交，故可將其設定為觸發條件。

  步驟4、選取方式：CSS選擇器是什麼？ CSS選擇器(CSSSelector)是一種元素定位的方法，幫助你找到要設計的HTML元素，可以想成元素的GPS位置。

CSS選擇器根據HTML元素的id、class、類型(type)、屬性(attribute)等來協助定位，因此不管那個元素在頁面的哪個地方，只要使用CSSSelector就能夠精準幫它定位，讓我們可以迅速將它找出來。

基本上CSS選擇器是設計網頁時常使用的，但我們知道它還能夠「定位」元素，所以我們就搭配「元素可見度」來檢視該元素是否有出現，並以「CSS選擇器」來抓取該元素的位置。

當以上兩個條件都符合時，就會被觸發。

  步驟5、元素選擇器：CopySelector怎麼用？   在上圖範例當中，該文字段落是提交表單後才跳出的區塊，所以我們只要擷取其中任何一個元素的位置都能夠設為觸發條件。

我想要定位「感謝您的填寫，期待與您聊聊」這段HTML元素的位置。

  首先，我們先點擊右鍵進入檢視畫面，在右邊檢視區塊找到該元素後，再點一次右鍵>Copy>CopySelector，就能成功取得該元素的定位了。

將剛剛以CopySelector複製的內容貼到元素選擇器的欄位當中，就完成了元素的GPS網頁定位。

  步驟6、啟動此觸發條件的時機：每個網頁一次 觸發條件時機有三個分別的意思如下： 每個網頁一次：觸發條件對各個網頁只會觸發一次。

如果某網頁上有多個元素與ID或CSS選取器相符，觸發條件只會在其中一個元素首次在該網頁上變成「可見」時觸發。

每個元素一次：觸發條件對各個網頁上的各個選定元素只會啟動一次，如果某網頁上有多個元素與CSS選擇器相符，各個元素首次在該網頁上變成「可見」時，觸發條件都會啟動;但如果若該網頁有多個元素的ID相同，那麼只有第一個相符元素會啟動這個觸發條 每次元素在畫面上顯示時：每次有相符元素變得「可見」，觸發條件就會自動或透過使用者互動啟動，所以當你來回滾動就會重複觸發 因此綜合以上來說，在表單追蹤的案例當中，選擇「每個網頁一次」或者「每個元素一次」都是精準的，但如果選擇「每次元素在畫面上顯示時」就可能會將重複填寫表單的使用者計算進去。

  步驟7、設定最低可見百分比 你可以用這個選項指定百分比來限定選定元素必須有多大的範圍顯示在畫面上，才能觸發事件。

根據預設，元素必須至少有50%的面積顯示在畫面中，才會觸發事件。

而在表單追蹤當中，我們這欄位依照預設即可。

  步驟8、勾選觀察DOM改變情形 DOM(DocumentObjectModel，文件物件模型)就是把一份HTML文件內的各個標籤，包括文字、圖片等都定義成物件，而這些物件最終會形成一個樹狀結構。

  要勾選觀察DOM改變情形的原因是表單傳送後，您看到「感謝您的填寫」是額外跳出的區塊元素，它原本不存在DOM當中，是在成功傳送後才會新增在DOM樹狀結構當中，因此透過查看DOM的變化能確認該元素的是否有顯示。

這裡有概念要釐清，不是所有「觀察元素可見度」的例子都需要勾選「觀察DOM改變情形」，而決定於頁面是否有新增元素，其DOM是否有新增或減少來決定。

  步驟9、觸發條件的啟動時機 除非你是要限制觸發時機，不然不須另外指定變數。

例如，如果你的表單在網站的所有頁面當中都能提交，但我想要檢視在產品頁面當中提交表單的人數，就可以鎖定變數PageURL為特定值，該代碼才會被觸發。

  步驟10、提交版本 當代碼完成追蹤，且在預覽的情況下確保無誤後，就能提交此版本了。

  如何在GA檢視GTM的事件追蹤？ 現在你已經學會如何在GoogleTagManager當中埋設事件按鈕和表單的追蹤了，但該如何在GoogleAnalytics當中檢視數據呢？   GA行為事件報表解讀 如果以上的代碼的追蹤類型都是事件(Event)，那麼能在GA>行為>事件報表當中檢視其觸發的次數。

  在熱門事件當中，你可以透過新增「次要維度」來解讀出更多的數據意涵。

例如我可以檢視在月的線性時間下，我的OnsiteClick是否有增加、點擊都是發生在哪個頁面….等。

  如果你對於GA還不熟悉，可以閱讀我們的GA教學文章。

  結語：GoogleTagManager讓集客式行銷發酵 當我們在進行SEO優化時，樂於看到排名跟流量的提升，但轉單和網站的互動狀況是否也會隨之上升呢？在學會了埋設GTM後，我們就揭開了瀏覽者在網站上的足跡，讓集客式行銷真正的發酵，不管事件按鈕、滾動深度、還是表單提交都難不倒你。

有了GTM，你不用是專業的程式人員，也能輕鬆產出專業的行銷洞見和觀察，希望大家都有從我們的GTM教學系列當中學到些什麼，來幫助自己的企業在激烈的競爭當中更上一層樓。

  延伸閱讀，邁向數位行銷的下一階段吧： 【數位行銷必看】什麼是SEM搜尋引擎行銷？看這篇釐清SEM和SEO的關係與差異！ 想快速登上首頁？８個你該避免的SEO錯誤策略! 免費預約數位顧問諮詢 InboundAsia集客數據行銷公司，專注於集客式行銷服務，協助客戶網站建置、SEO流量成長、社群操作、內容行銷、數位廣告、數據分析，以專業數位顧問角色協助客戶成功！ 搶先諮詢，「集客」解決你的數位瓶頸 集客數據行銷觀察員 數位行銷趨勢採編，匯聚多元行銷成長方法報導與案例分享。

4月28,2020 11:05上午 網站優化 你知道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» 【GA完整教學最新版】GoogleAnalytics從註冊設定到操作介面，一次學會網站流量分析！ 12月5,2021 想知道每天有多少人造訪我的網站，最快最有效的方法就 ReadMore» 搜尋 精選活動 數位行銷講座 活動詳情 分類 B2B行銷 SEO 企業轉型 內容行銷 口碑行銷 品牌策略 國際洞察 市場策略 市場趨勢 成功案例 數位廣告 數位行銷策略 最新消息 會員經營 產業專欄 社群行銷 網站優化 行銷企劃 行銷部門規劃 電商行銷 分類 B2B行銷 SEO 企業轉型 內容行銷 口碑行銷 品牌策略 國際洞察 市場策略 市場趨勢 成功案例 數位廣告 數位行銷策略 最新消息 會員經營 產業專欄 社群行銷 網站優化 行銷企劃 行銷部門規劃 電商行銷 近期文章 5月1,2022 4月15,2022 12月5,2021 9月30,2021 最多人看 PopularComment 2月7,2018 10月9,2018 1月25,2020 12月31,2020 2月7,2018 10月9,2018 1月25,2020 12月31,2020 近期文章 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 尚無留言 品牌策略 【行銷趨勢】2021消費者行為洞察–混沌式的消費者購物旅程 明明已經投入成本在社群廣告推播、SEO關鍵字廣告、 閱讀更多» 7月26,2021 尚無留言 最多人看 2月7,2018 10月9,2018 1月25,2020 12月31,2020 2月8,2018 關注我們 聯絡我們 台北市中山區中山北路二段112號4樓之1 (02)2521-8885 [email protected] (02)2521-8884 了解更多集客 關於我們 人才招募 服務案例 SEO健檢 集客力專欄 行銷播客-podcast 社群媒體 Facebook-f Spotify Linkedin Slideshare Rss Copyright©2016-2021震豪網路媒體股份有限公司AllRightsReserved ShoppingBasket 立即諮詢