Google Tag Manager – Larry的午茶時光

GTM (Google Tag Manager) 網頁捲動 & 元素可見度事件追蹤

Larry — Mon, 28 Sep 2020 05:50:42 +0000

GTM (Google Tag Manager) 網頁捲動事件是一個滿多人會設定的 GTM 事件，它可以顯示出使用者是否往下捲動你的網頁 (往下閱讀)，還是一進來你的網頁就跳出。當然，使用者能把你的文章文案看完，是最理想的狀態。如果對 GTM 基本設定還不熟的讀者，可以參考之前文章 GTM 基本設定教學 & 按鈕點擊事件追蹤

首先，新增觸發條件，類型選擇「捲動頁數」

圖一

一般是選擇「垂直捲動頁數」(因為一般網頁設計是長型的，往下捲動)。很多人是用「百分比」當比例尺，填入 25,50 … 等，就是使用者捲動 25%, 50% 的網頁後，觸發事件。

圖二

也可以用「像素」當比例尺，例如填 765,1024 … 等，就是使用者捲動 765px, 1024px 的網頁後，觸發事件。像是 RWD 的網頁在手機顯示時，右側邊欄會擠到文章下方顯示。這個情況下，如果還是以「百分比」當比例尺，50% 的桌機捲動幅度，跟 50% 的手機捲動幅度，是完全不同的 (因為 RWD 手機版變長條，手機的 50% 實際長度會多很多)。如果擔心這個情況，可以用「像素」當比例尺，像素數值的部分，再請懂前端工程的朋友幫你看。

圖三

到變數menu按設定，將 Scroll Depth Threshold 和 Scroll Depth Units 打勾

圖四

再來新增代碼，如 GTM 基本設定教學 & 按鈕點擊事件追蹤的按鈕點擊事件追蹤，追蹤類型選「事件」。下圖中 GA 追蹤碼的變數，上述連結中有設定。

圖五

類別填你想要的名稱，動作跟標籤可以參考上圖填法，基本上

{{Scroll Depth Threshold}} 就是你圖二或圖三設定的值
{{Scroll Depth Units}} 是 % 或 pixels
{{Page Path}} 是觸發網頁的網址

了解變數代表的意義，圖五的表格可以自己決定填什麼，以方便在 GA 後台檢視為主。為了在 GA 後台可讀性高一點，動作可以填 {{Scroll Depth Threshold}}% 或 {{Scroll Depth Threshold}}px，就是變數+自訂文字。

「非互動匹配」預設是 False, 也就是觸發事件時算一次互動。要特別注意這個選項，因為它跟跳出率有關。如果單一工作階段，有 2 個 event 或以上 (第一個是進來網頁的 page view event)，就不算跳出。可以參考之前的文章 GA 跳出率 & 一頁式網站

如果「非互動匹配」選擇是 False，你的觸發條件又是 10% 或是 100pixel，這樣使用者一進來網站就會觸發事件 (這是第 2 個，第 1 個是 page view)。這樣網站的跳出率可能會變得極低，甚至是 0。所以設定「非互動匹配」時，要想一下你這個事件，是不是很容易被觸發，會不會影響到跳出率的合理性。

延伸聊一下，如果有客戶或朋友跟你說他網站的跳出率多低多低，先問他事件是怎麼設定的。不限於本篇的捲動事件，塞滿沒有管理的事件，當然網站的跳出率會很低。

最後選擇觸發條件，選擇你在圖一、二、三設定的觸發條件，儲存，這樣就完成了。右上角點「提交」再點「發布」後，試著捲動網頁，在 GA 後台即時 -> 事件中觀察是否有事件產生。

元素可見度事件追蹤

當你的網站上有一個區塊，例如一塊 banner，一個按鈕，想要追蹤它曝光的數量，就可以使用元素可見度事件追蹤。

元素可見度的官方文件，其中menu也包含了其他的觸發條件 (包含上述的網頁捲動觸發條件)
https://support.google.com/tagmanager/answer/7679410

首先，新增觸發條件，類型選擇「元素可見度」

圖六

選取方式可以選擇 ID 或 CSS選擇器，這部分請懂前端工程的同事或朋友，幫你看你要追蹤的元素該怎麼填。

圖七

啟動此觸發條件的時機

每個網頁一次：不管追蹤的元素 (例如說按鈕)，在單一頁面有多個，或是來回捲動網頁 (可見不見切換)，單一網頁都只觸發事件一次。
每個元素一次：追蹤的元素 (例如說按鈕)，在單一頁面有多個時，例如網頁右側跟下方都有符合選取條件的元素，右側的元素會觸發一次，下方的元素會觸發一次。
每次元素在畫面上顯示時：當使用者上下捲動網頁，追蹤的元素出現 -> 離開 -> 又出現，會依照追蹤的元素出現的次數，每次都會觸發事件。

可見百分比，畫面持續時間下限等字面上應該可以理解，就不再贅言。

再來如圖五新增代碼，此時當然不用填 {{Scroll Depth Threshold}}，{{Scroll Depth Units}}。其他新增代碼的填法請參考圖五。

GTM 的事件設定是非常重要的工具，因為它大幅降低了設定事件的成本。相較於找工程師寫 JavaScript 送 GA event，每次改事件設定是要改code的，有形無形成本會變得很高。GTM 的事件設定非常重要也值得學習，有興趣的讀者可以參考一下。

GTM (Google Tag Manager) 基本設定教學 & 按鈕點擊事件追蹤

Larry — Sun, 03 Nov 2019 11:27:04 +0000

之前寫過一篇 analytics.js, gtag.js 還是 GTM, 其中提到 GA (Google Analytics) 預設提供的追蹤碼是 gtag.js, 但進階、或是想繼續鑽研數位行銷的讀者，可以使用 GTM (Google Tag Manager). 本篇就來走一遍 GTM 的基本設定教學，並提供一個按鈕點擊事件追蹤的範例。

首先用你的 gmail 帳號登入 https://tagmanager.google.com

順著它 UI 的指引，建立一個「帳戶」及「容器」。你可以把「帳戶」想成公司名稱，「容器」則是你公司底下的其中一個網站 (網址填到「容器」裡)。當然，你的公司可能有超過一個網站 (ex: 一個官網，一個商城)，在同一「帳戶」底下可以再建立第 2, 3 個「容器」。

(事實上你也可以建立多個「帳戶」，但使用的機率不高)。

之前一篇文章 Google Analytics 帳戶、資源、資料檢視和權限提到，

“你可以把 GA 的帳戶想成公司，資源想成網站，資料檢視則是每個網站不同篩選條件的檢視方式。”

大家可以對照一下，GTM 是「帳戶」和「容器」，GA 是「帳戶」和「資源」，這樣比較好記。

回到 GTM 面板，建立完「容器」後它會跳出一追蹤碼，要放到和裡，如果當下沒 copy 下來也沒關係，如下圖，還可以找得到

圖一

埋好上述追蹤碼後，還要將 GTM，網站，與 GA 產生聯繫，GTM 面板找到

圖二

點下新增後，會出現「代碼設定」和「觸發條件」兩個區塊。點一下「代碼設定」會出現

圖三

選擇紅框處 (通用 Analytics 分析)，追蹤類型選網頁瀏覽，「選取設定變數…」選新增變數，會看到

圖四

追蹤編號就查你的 GA 後台，格式是 UA-xxxxxxxxx-x. 按儲存，如果網頁有問你的變數名稱之類，你就key一個喜歡的字串，沒有關係。

記得還有一個「觸發條件」嗎？點「觸發條件」，選擇 All Pages, 按儲存。這樣圖二中就會有一筆資料了。最後在 GTM 面板右上角點「提交」，再點「發布」，這樣 GTM、網站、GA 的串接就完成了。

你可以開一下你網站的網頁，看 GA 後台是否有即時資料，應該要有。

再來是按鈕點擊事件的設定。回到你 GTM 的後台，如圖二，左側menu選「觸發條件」。點新增，點觸發條件設定，會看到

圖五

點「所有元素」，然後選擇「所有點擊」，輸入你喜歡的名稱，按儲存。在 GTM 面板右上角點「預覽」，回到你的網站重整網頁，你會看到瀏覽器底端有一個面板，如下圖

圖六

隨便點擊文字或圖片 (網頁不要跳掉就好，比較好觀察)，注意這面板內容的變化，選擇 Variables view, 可以看到一堆變數 (如上圖)。

回到你 GTM 的後台，如圖二，左側menu選「變數」。點「設定」按鈕，會看到

圖七

紅框處全部勾起來，然後在橘色區塊點「重新整理」，回到你的網站也重新整理。隨便點擊你網站的文字或圖片如圖六的步驟，但這次 Variables view 裡，多了很多變數

圖八

可以看到圖八裡多的變數就是圖七裡所勾選的。實際執行時可以跳過圖六的步驟，直接做圖七、圖八。做圖六的步驟只是為了強調有無勾選變數(圖七)的差異。

GTM preview panel 有一個很 tricky 的點，當你點的按鈕會造成換頁，例如連結或表單送出，當下 preview panel 會立即更新，也就是說你看不到之前點的 Variables view. 所以實際應用時還是請懂前端網頁的朋友，幫你看 Click Classes, 或 Click ID, 或是你自己用 Click Text 來做後續設定。注意即使是這樣，也不用改網站的 code.

接著如圖五步驟，新增一觸發條件，但這次選「部分點擊」

圖九

如圖九，如果你是要追蹤「結帳」按鈕，條件用 Click Text 包含「結帳」，此時要檢查你的網頁有無其他「結帳」字樣，不然會被錯誤追蹤。比較精確的話可以同時下該按鈕的 Click Classes 或 Click ID.

最後要新增代碼。如圖三，但這次追蹤類型選「事件」，

圖十

類別、動作、標籤等都是自訂欄位，至少類別、動作填一下，會在 GA 後台顯示比較好辨認。紅框處選擇你在圖四步驟新增的變數。然後選擇觸發條件，選擇你在圖九設定的觸發條件。最後在一樣右上角點「提交」，再點「發布」。

一個基本的按鈕點擊事件的設定到此就完成了。你可以隨便選你網站的一個區塊來測試上述步驟 (不一定要「按鈕」，你也可以選擇一張圖片，等)。如果設定成功，在你 GA 後台，「事件」menu, 應該就可以看的到點擊的事件。

GTM 的設定很複雜，但他的好處是埋好基本的 code 後就不用再改 code。以本篇文章來說，點擊追蹤的部分 (圖五開始)，不會改到網站的 code。其實也不能說 GTM 複雜，一樣的追蹤功能，以 gtag 來說，難道你要請工程師去寫 JavaScript 送 GA event 嗎？你要追蹤其他事件，要找工程師再改嗎？你有算到程式碼管理的成本嗎？這樣算起來，GTM 好像也就不那麼複雜了

analytics.js，gtag.js (Global Site Tag)，還是 GTM (Google Tag Manager)

Larry — Wed, 26 Jun 2019 13:17:24 +0000

之前有朋友問到，不知道是否有讀者有相同的疑問：到底該用 analytics.js, gtag.js, 還是 GTM (Google Tag Manager)?

很多 GA (Google Analytics) 的設定，又依上述三者有不同的設定程序。所以是現在網站裝什麼就繼續使用？還是 analytics.js, gtag.js, GTM 哪個比較好，那我們網站就全部換成它？

首先我們看 gtag.js, 他全稱叫 Global Site Tag (全域網站代碼)。GA 預設提供的追蹤碼就是 gtag.js, 所以大多數網站埋的是 gtag.js.

https://developers.google.com/analytics/devguides/collection/gtagjs/migration
雖然這篇官方文件主要是講 analytics.js 和 gtag.js function call 有什麼不同，但他的語意隱含建議使用者使用 gtag.js

另外如果觀察 Google Ads 的轉換追蹤碼，它也是 gtag 系統，這就很明顯了，至少以簡化追蹤碼和減少錯誤來說，analytics.js 和 gtag.js 擇一的話就使用 gtag 吧！

再來我們看 GTM, 全稱 Google Tag Manager (Google 代碼管理工具)。GTM 與 gtag.js 是完全不同的產品，GTM 至少包含以下幾個好處：

可以填入第三方追蹤碼，例如 Facebook Pixel
追蹤事件 (轉換) 或其他項目時，不用請工程師再改 code. (會有費用和程式更改的風險)
可大幅簡化設定事件的難度，例如網頁捲動事件、修正跳出率的計算等

「大幅簡化設定事件的難度」這一點就 larry 來看是不得不改用 GTM 的關鍵因素。以網頁捲動事件為例，難道你要請工程師真用 javascript 算捲到 70% 後 send 一個 GA event?

結論，GA 預設提供 gtag.js，請工程師貼上後就可以看用戶數、流量來源、page view 等，這是大部分網站的現況。GTM 有學習門檻，甚至可以獨立出來當作一門學科。如果你想進階去追蹤使用者行為，或是繼續鑽研數位行銷的話，應該要選擇 GTM。