文章目錄
更新時間：2025年6月26號
什麼是單頁應用程序
單頁應用（英語：single-page application，縮寫SPA）是一種網路應用程式或網站的模型，它通過動態重寫當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。
使用者在訪問頁面的時候，URL雖然會有變化，但頁面是沒有重新加載的，這種方法避免了頁面之間切換打斷使用者體驗，使應用程式更像一個桌面應用程式。
在傳統網站中，每次頁面載入都會觸發GA4的page_view事件，而在SPA中，由於頁面不刷新，GA4需要額外的配置來正確記錄「虛擬頁面瀏覽」和其他使用者互動。
GA4追蹤單頁應用的挑戰
- 頁面瀏覽未被記錄：由於頁面不重新加載，GA4的預設page_view事件可能只在首次加載時觸發，後續的頁面內容變更不會自動記錄。
- URL和頁面標題不準確：SPA可能透過pushState更新URL，但GA4預設使用document.location.pathname，可能無法捕獲完整的URL或正確的頁面標題。
- 工作階段與引薦來源問題（Rogue referrer）：如果不正確配置，SPA可能導致工作階段資料斷裂或引薦來源資料錯誤，影響使用者旅程分析。
- 事件重複或遺漏：自動追蹤（如加強型評估）可能導致頁面瀏覽事件重複計數，或在某些情況下未能觸發。
如何判斷你的網站是不是單頁應用
你可以在GTM 的預覽模式裡從A頁面點擊訪問B頁面，在這個過程裡看Tag Assistant有沒有重新加載頁面，如果重新加載，那麼就不是單頁應用，如果沒有重新加載，出現很多的History，就是單頁應用。
預覽之前，先需要開起這個觸發條件，在GTM中點擊「觸發條件」——「新增」——「請選擇觸發條件類型以開始設定…」——「記錄變更」，命名為History Change，然後做如下設定：
然後點擊「預覽」，隨意點擊一個頁面，然後看Tag Assistant:
點擊後，Tag Assistant出現「記錄」，那就是單頁應用。
需要注意，現在有些網站，部分頁面是單頁應用，部分是普通網頁，所以你需要多點擊幾個頁面看看。
用History Change對SPA做跟踪
當加強型評估（Enhanced Measurement）無法滿足需求時，可以透過Google Tag Manager（GTM）的History Change觸發器來追蹤SPA的頁面瀏覽。 History Change觸發器監聽瀏覽器的popstate事件或History API的URL變化，觸發GA4的page_view事件。
實現步驟
Step 1：History Change觸發條件
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「記錄變更」，命名為History Change，做如下設定：
然後在GTM裡點擊「預覽」，點擊訪問不同的網頁，可以在Tag Assistant裡看到「記錄」：
Step 2：設定資料層變數
點選「記錄」，然後再API呼叫裡面看裡面的訊息，主要找到oldUrl和newUrl：
oldUrl是上一個頁面，也就是Referral，newUrl是目前頁面，需要用資料層變數來取得它。
在GTM中點擊「變數」—「新增」—「選擇一個變數條件類型以開始設定」——「資料層變數」，命名為dlv-oldUrl，做如下設定：
用同樣的方法設定dlv-newUrl：
Step 3：設定代碼
先要設定一個Google Tag，不需要設定觸發條件，在GTM中點選「代碼」—「新增」—「選擇一個代碼類型以開始設定」——「Google Anlaytics」——「Google代碼」，命名為GA4 update：
注意：這個代碼不需要觸發條件。
在GTM中點選「代碼」—「新增」—「選擇一個代碼類型以開始設定」——「Google Anlaytics」——「Google Analytics：GA4 事件」，命名為GA4-Page View Event，做如下設定：
GA4 update在GA4-Page View Event之前觸發，主要用於更新配置參數：
普通頁面加載該如何跟踪
這裡說的普通頁面加載是正常的頁面加載。
如果普通頁面加載沒有觸發「記錄」，那麼你需要配置一個單獨的Google Tag去跟踪，就正常的GA4頁面跟踪就可以，如：
如果普通頁面加載觸發「記錄」，那麼普通頁面就會合併到GA4-Page View Event去觸發跟踪，但我們仍然需要觸發Google Tag，加載基礎配置，但不發送page_view事件，將send_page_view設置為false即可：
URL和頁面標題不準確
你可能會發現，在虛擬頁面追蹤裡，虛擬頁面的網頁標題（Page Title）往往是上一個頁面，是錯位的，如下頁面訪問行為流：
- 頁面1：Page Title A/Page URL A
- 虛擬頁面2: Page Title A/Page URL B
虛擬頁面2標題應該是Page Title B，但實際上是Page Title A，這是因為在頁面1中點擊的時候，就觸發「記錄」，這時候獲取到頁面標題還是Page Title A。
可以透過一個延遲來處理這個問題，History Chang觸發的時候，延時500ms，再發送獲取當前頁面準確的網頁標題，但會帶來新的問題，不管延時多久，使用者再次點擊跳轉或離開都有可能會導致資料遺失
優點
- 靈活性更高：允許自訂page_location和page_referrer，適合複雜的SPA。
- 無需大量開發工作：只需配置GTM，無需修改網站程式碼
缺點
- URL和頁面標題不準確：無法自訂頁面標題或參數，依賴預設的document.location.pathname。
適用場景
History Change觸發條件適合URL變化頻繁、需要自訂頁面參數的SPA，但仍依賴History API的應用。
