Skip to content

數據酷

[GTM] 如何正確的送出 GA4 網頁瀏覽事件?

[GTM] 如何正確的送出 GA4 網頁瀏覽事件?

如果你還沒有 Google Analytics 4 資源,可以前往 如何在網站與APP安裝新版 Google Analytics 4 資源 建立你的 GA4 資源。

在前一篇文章,我們提到了如何使用 GTM 建立 GA4 設定代碼,其中包含了網頁瀏覽事件的設定方式,在大部分的情況下,我們都會使用預設開啟的載入這項設定時傳送一次網頁瀏覽事件選項,在設定代碼被觸發的同時自動送出一個網頁瀏覽事件。能夠自動為什麼要手動?本篇文章將會告訴你兩者之間的差異

載入這項設定時傳送一次網頁瀏覽事件

手動 vs 自動,兩者到底差在哪裡?

事實上,這一切都和時間有關,手動設定網頁瀏覽事件,可以自由控制在任何時間點觸發,自動送出的網頁瀏覽事件則會在網頁載入時觸發,到底該使用自動還是手動送出網頁瀏覽事件,可以透過下面兩個問題找到解答:

  1. 什麼時候應該送出網頁瀏覽事件?
  2. 網頁瀏覽事件包含了哪些參數和使用者屬性?

如果你的網頁瀏覽事件只會在每次網頁載入時觸發,且沒有使用任何參數和使用者屬性,那麼你可以放心的使用自動送出網頁瀏覽事件的功能即可。

什麼時候應該送出網頁瀏覽事件?

在大多數的情況,網站使用者瀏覽不同頁面時,會產生跳轉的行為,網頁會從原本的網址導向新的網址並重新載入,追蹤網頁瀏覽事件最好的做法就是在網頁載入時送出網頁瀏覽事件。

但是,如果你的網站是屬於單頁應用網站(Single Page Application 簡稱 SPA),事情就沒那麼簡單了,由於 SPA 網站是通過動態覆寫當前頁面的內容,因此瀏覽不同頁面時網頁不會每次都重新載入,雖然這對使用者體驗是好的,但網頁載入時觸發網頁瀏覽事件將不適用於這種狀況,所以,如果你使用的是 SPA 類型的網站,不要使用自動送出網頁瀏覽事件的功能

備註:如果你是電子商務網站,可以注意一下,很多網站的結帳流程都是使用 SPA 架設的,如果你想將結帳流程之間的行為定義為不同頁面,可以同步參考下面的解決方式。

解決方案 – 使用 DataLayer 訊號送出網頁瀏覽事件

當網站使用 SPA 架構,最好的解決方式就是和網站工程師溝通,在頁面動態覆寫新的頁面內容時(或任何你想定義為新的網頁瀏覽時機),送出網頁瀏覽的訊號到 dataLayer(詳細說明可參考開發者文件):

dataLayer.push({'event': 'page_view'});

接下來就可以透過 GTM 自訂事件把這個訊號作為網頁瀏覽事件的觸發條件,詳細說明可以參考 [GTM] Data Layer 資料層 基礎介紹

GTM page view 自訂事件

網頁瀏覽事件包含了哪些參數和使用者屬性?

在先前的文章(Google Analytics 4 事件,你必須知道的4件事情),我們有提到過所有 GA4 事件都可以使用事件參數和使用者屬性收集額外的資訊,這些額外的資訊在後續的分析以及應用上可以提供很大的幫助,但前提是我們要確保這些資訊能夠正常的被收集。

確認所有參數和使用者屬性都可以在網頁瀏覽送出時被正常的讀取。在大多數的情況下,使用的變數(參數或使用者屬性)會來自網站本身,例如頁面分類、文章編號等等,這些資訊要在網頁瀏覽送出時讀取並不會有什麼問題,但如果變數來自網站以外,常見的例如網站會員資料庫、廣告商訊號等等,就很有可能發生變數在網頁瀏覽之後才能取得,這時候如果強制送出網頁瀏覽事件,因為變數值為空(還沒收到資訊),網頁瀏覽事件將收不到任何參數或使用者屬性資訊,更詳細的說明可以參考 [GTM] 發送 GA User-ID 追蹤訊號 的案例。

解決方案 – 使用 DataLayer 訊號送出網頁瀏覽事件

當我們使用的變數來自網站以外,因為無法保證變數值什麼時候會回傳到網站,所以使用內建的觸發條件就會相對的危險(例如網頁瀏覽、DOM 就緒、視窗以載入等等)。最好的解決方式就是和網站工程師溝通,在變數回傳到網站時將資訊送到 DataLayer,並送出網頁瀏覽的訊號(詳細說明可參考開發者文件):

dataLayer.push({
	'event': 'page_view',
	'參數範例': 'xxxx',
	'使用者屬性範例': 'xxxxx'
		});

注意:這邊一定要將名稱定義為網頁瀏覽(‘event’: ‘page_view’),如果沒特別宣告名稱,後續將無法判別出網頁瀏覽的訊號。

接下來就可以透過 GTM 自訂事件把這個訊號作為網頁瀏覽事件的觸發條件,詳細說明可以參考 [GTM] Data Layer 資料層 基礎介紹

ga4 網頁瀏覽

手動新增網頁瀏覽事件

如果你打算手動新增網頁瀏覽事件,不管是因為上面提到的哪一個原因,你都應該已經按照上述說明取得訊號並建立好網頁瀏覽的觸發條件,接下來將會一步一步教你如何正確的新增 GA4 網頁瀏覽事件代碼。

Step1: 關閉自動發送網頁瀏覽事件選項

確實關閉(取消打勾)自動發送的選項,避免重複發送網頁瀏覽事件。

Step1: 關閉自動發送網頁瀏覽事件選項

Step2: 新增 GA4 事件代碼

Step2: 新增 GA4 事件代碼

Step3: 正確的命名網頁瀏覽事件

網頁瀏覽事件名稱一定要使用規定的名稱(page_view),這麼做除了能夠收集額外的自動收集參數,還可以啟用網頁瀏覽相關的報表,詳細說明可以參考官方文件

Step3: 正確的命名網頁瀏覽事件

Step4: 新增參數和使用者屬性

填入欲使用的參數和使用者屬性,雖然 GA4 會繼承設定代碼的參數和使用者屬性配置,但要注意設定代碼的參數不會即時更新,詳細說明可以參考 GA4 事件代碼說明

Step4: 新增參數和使用者屬性

Step5: 設定觸發條件

將先前建立的網頁瀏覽自訂事件當作代碼的觸發條件。

Step5: 設定觸發條件

Step6: 檢查並發布代碼

使用 GTM 預覽模式,檢查網頁瀏覽事件是否能夠正常的被觸發,使用的事件參數和使用者屬性也收的到正確的值,確認無誤後即可發布新的 GTM 版本。

Step6: 檢查並發布代碼

廣告版位

文章許願池

想看什麼文章主題?
我們會儘快為您安排

廣告板位

文章許願池

想看什麼文章主題?
我們會儘快為您安排

廣告版位

文章許願池

想看什麼文章主題?
我們會儘快為您安排
Scroll To Top