如何用 GTM 設定「網頁捲動」追蹤事件?(非 GA4 加強型評估事件)

其實在 GA4 的加強型評估當中,已經有一個預設的網頁捲動事件追蹤(Scroll),但很可惜的是,這個追蹤事件只有當網頁捲動到 90% 的時候,才會觸發捲動追蹤事件,如下圖所示,GA4 內建的 Scroll 事件僅能做到如此,但萬一我們今天想要看捲動到網頁 25%、50%、75%、90% 的使用者佔比是多少,我們可以怎麼做?



捲動事件使用情境

你的網頁可能有點長度,內容較多,老闆想要了解大家是否有將整個頁面內容看完?較底部的廣告或是行銷活動 Banner 是否有曝光?(這個也可以用可見度元素來設定)或是單純想知道使用者在頁面上儘管沒有點擊,但到底看到了哪裡?如果沒看超過一半,是否網站載入速度太慢讓使用者不想等?

設定網頁捲動追蹤,可以幫助我們針對特定頁面進行判斷,如果有某些頁面確實無法讓使用者看超過一半,那就可以思考是否要把最重要的消息放在較前面的位置,讓使用者可以率先看到,透過這樣的事件,去思考使用者在瀏覽網頁時發生了什麼事?我們該如何去優化這個頁面?


透過 GTM 設定網頁捲動追蹤事件

首先關閉 GA4 裡的捲動事件

點擊 GA4 左下角「管理」齒輪 > 「資料串流」 > 「加強型評估設定」 > 關閉「捲動」事件

因為接下來我們會採用 GTM 設定「捲動事件」並傳送給 GA4,所以先關閉 GA4 預設避免造成資料混亂。

來到 GTM 中的「觸發條件」設定頁面

新增一個觸發條件,選擇觸發條件類型為「捲動頁數」。

將百分比設定為你想要觀察的數字,一般來說會設定在 25/50/75/90,也就是當使用者捲動畫面到「顯示在使用者眼前的網頁畫面」多少百分比的時候,當滿足 25%、50%、75% 以及 90% 時,捲動事件就會觸發。

設定完畢後如果都沒問題,命名後直接儲存,稍後設定代碼的時候我們會用到這此作為代碼觸發條件。

勾選啟用內建的「捲動變數」

來到變數設定頁面,GTM 已經為我們設置好了捲動相關變數,我們只需要將內建變數中捲動項目勾選打開即可,稍後代碼設定時,我們會使用「捲動深度門檻(Scroll Depth Threshold )」做為我們的值,這是一個 0-100 的數值,將會依照我們觸發條件設定的百分比位置,傳送相對應的數字到 GA4 當中:

例如:捲動到畫面 25% 的地方時,傳送一個 25 的值。

設定捲動事件追蹤代碼

透過上面幾個步驟,我們已經設定完了觸發條件以及捲動變數,接著就是要在事件代碼中將所有東西組合起來。

代碼頁面 > 選擇 GA4 事件追蹤 > 填入 GA4 評估 ID> 設定事件名稱、參數以及值  

同場加映:將 GA4 評估 ID 設為「常值」變數

注意到圖中橘框處,在 9 月 GTM 改版之後,原先的 GA4 追蹤配置設定走入歷史,通通改成了 Google Tag,所有 Google 服務相關代碼,都需要透過 Google Tag 建置,例如:Google Ad、Google Analytics 等,但如果每次設定 GA4 事件我都需要填入一次評估 ID 的話,其實相當麻煩,所以這邊我們會為這個評估 ID 設定一個常值變數(constant),未來要使用的時候直接像過去一樣用選擇的就可以了。

GTM 左側變版選擇「變數」 > 選擇「常值」變數 > 填入 GA4 評估 ID

選擇觸發事件為剛剛設定的「捲動畫面觸發」,當都設定完成之後,就可以儲存後預覽測試並且發布。

GTM 預覽測試以及 GA4 資料確認

在做任何代碼發布前,一定要進行預覽測試,這點相當重要。

我們可以看到左邊網頁動作追蹤的部分啟動了 Scroll Depth 的事件,剛剛設定的代碼也確定被成功觸發,接著我們就是來到 GA4 當中,看是否有依照我們設定的將值傳送進來。

在 GA4 即時報表或是 Debug View 中我們都可以看到 scroll 的事件,進一步點擊後會看到 percent_scrolled 的參數,針對參數再點擊之後,可以看到值是 25,事件被記錄為 1。

這邊需要注意的是,如果我們在同一個頁面繼續捲動下去至底部的話,依照剛剛的設定,這邊會出現 25、50、75、90 的數值,但是如果我們回捲畫面,這些代碼是不會再被觸發的,除非你對頁面重新整理。


回到 GA4 當中自訂維度

在 GTM 當中自訂的事件參數,雖然在 GA4 當中的即時報表可以看見相關事件參數,但如果要讓事件參數出現在報表中的話,就必須要到 GA4 的後台設定中進行「自訂維度」。

點擊 GA4 介面左下角齒輪 > 「自訂定義」 > 「建立自訂維度

填寫維度名稱 > 下拉選擇事件參數 (percent_scrolled)

接著等待 24-48 小時,就可以在 GA4 的報表中,選擇 percent_scrolled 維度,也可以在事件報表中,看到這個參數的資訊卡。


總結

仔細想想不是每個網站,都一定要做這樣的追蹤事件,做捲動追蹤的用處在於讓我們了解到使用者看到網頁上的哪裡,進一步針對網頁的配置去進行改善,所以還需要跟網頁設計師以及工程師配合,這樣的追蹤才會有意義,而不是只是提交數字報告出來,但如果後續沒有改善以及測試動作,花時間做這樣的追蹤跟設定也是枉然,還會佔用你的自訂維度額度。

還是回到那些老話,你為什麼要做這樣的追蹤設定?得到結果之後,你能做什麼改變?先確認問題是有意義的之後,我們再來規劃追蹤設定,幫助我們解決問題。


延伸閱讀: