文章目錄
更新時間：2025年6月26號
我們這一節來介紹Google Analytics 4 中如何對單頁應用做跟蹤。
什麼是單頁應用程序
單頁應用（英語：single-page application，縮寫SPA）是一種網路應用程式或網站的模型，它通過動態重寫當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。
使用者在訪問頁面的時候，URL雖然會有變化，但頁面是沒有重新加載的，這種方法避免了頁面之間切換打斷使用者體驗，使應用程式更像一個桌面應用程式。
單頁應用追蹤會遇到什麼問題
但對於單頁應用，頁面只在使用者訪問的時候加載一次，之後的訪問都不再加載頁面，那麼Google Analytics原有的頁面加載跟蹤機制就不適用，會導致，使用者之後的頁面瀏覽都追蹤不到。
單頁應用的追蹤原理
單頁應用的追蹤原理是虛擬頁面(Virtual Pageview)。
虛擬頁面就是實際上沒有產生瀏覽，我們將其看做一個頁面瀏覽行為來追蹤，如SPA中除了第一個頁面之後的其他頁面都是沒有加載，沒有產生瀏覽，我們想把它看做是一個頁面瀏覽，這個就是虛擬頁面。
如何判斷你的網站是不是單頁應用
你可以在GTM 的預覽模式裡從A頁面點擊訪問B頁面，在這個過程裡看Tag Assistant有沒有重新加載頁面，如果重新加載，那麼就不是單頁應用，如果沒有重新加載，出現很多的History，就是單頁應用。
預覽之前，先需要開起這個觸發條件，在GTM中點擊「觸發條件」——「新增」——「請選擇觸發條件類型以開始設定…」——「記錄變更」，然後做如下設定：
然後在變數裡，將內建變數的有關記錄的變數都勾選：
然後點擊“預覽”，隨意點擊一個頁面，然後看Tag Assistant:
點擊後，Tag Assistant出現History，那就是單頁應用。
需要注意，現在有些網站，部分頁面是單頁應用，部分是普通網頁，所以你需要多點擊幾個頁面看看。
如何對單頁應用做追蹤
Google Analytics 4中單頁應用的追蹤方法有如下幾種：
- 加強型評估，這是Google Analytics 4內置支持，最便捷
- 記錄變更（History Change）
- 延遲發送，它是變更記錄和dataLayer同時使用
- dataLayer方法
方法一：加強型評估
Google Analytics 4 的加強型評估裡內置了虛擬頁面追蹤，只需要勾選“頁面根據瀏覽器記錄事件而變更”，当浏览器历史記錄事件发生变化时，加強型評估就會自動發送網頁瀏覽事件，非常方便。
在Google Analytics 4 中點擊「管理」——「資料串流」，然後選擇要設定的資料串流：
然後點擊增強型評估下面右側的這個圖標：
就可以看到加強型評估的設定頁面，點擊“隱藏進階設定”，就可以看到“頁面根據瀏覽器記錄事件而變更”選項，勾選它，然後儲存。
這樣就完成設定了，如果你在GTM的預覽模式下的History裡API Call裡能看到gtm.historyChange-v2，就表示被追蹤到了。
方法二：用記錄變更觸發條件（History Change）
當加強型評估（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之前觸發，主要用於更新配置參數：
延伸閱讀：GA4上對單頁應用(SPA)做追蹤——記錄變更(History Change)
方法三：延遲發送的方法（History Change&dataLayer.push）
延時發送是對GA4上對單頁應用(SPA)做追蹤——記錄變更(History Change)的最佳化，可以解決URL和頁面標題不準確的問題。
思路是頁面載入/History Change延遲500ms，等待頁面打開，然後才執行js取得當前頁面準確的Page URL和Page Title，再透過dataLayer.push發送出去。
Step 1：History Change觸發條件
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「記錄變更」，命名為History Change，做如下設定：
Step 2：設定延時發送
在GTM中點選「代碼」—「新增」—「選擇一個代碼類型以開始設定」——「自訂HTML」，命名為SPA-Delayed Send，然後做如下設定
這個配置的作用是History Change的時候，做了延時，確保新頁面打開，獲取準確的網頁標題，然後透過dataLayer.push將其發送資料。
Step 3：設定資料層變數
在GTM中點擊「變數」—「新增」—「選擇一個變數條件類型以開始設定」——「資料層變數」，命名為dlv—pagePath，做如下設定：
用同樣的方法設定dlv—pageTitle和dlv—pageUrl：
Step 4：設定代碼
先要設定一個Google Tag，不需要設定觸發條件，在GTM中點選「代碼」—「新增」—「選擇一個代碼類型以開始設定」——「Google Anlaytics」——「Google代碼」，命名為GA4 update：
注意：這個代碼不需要觸發條件。
在GTM中點選「代碼」—「新增」—「選擇一個代碼類型以開始設定」——「Google Anlaytics」——「Google Analytics：GA4 事件」，命名為GA4-Page View Event，做如下設定：
GA4 update在GA4-Page View Event之前觸發，主要用於更新配置參數：
方法四：dataLayer方法（最推薦的方方法）
對於複雜的SPA或不依賴History API的應用，開發者協助透過dataLayer.push方法推送自訂事件是最可靠的追蹤方式。
開發者可以在SPA的路由變更或內容更新時，主動推送page_view事件到資料層，GTM再根據這些事件觸發GA4標籤。
Step 1：ataLayer.push發送資料
頁面發送的資料結構如下，每個頁面都需要這樣發送，這一步是需要開發人員去實作：
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Pageview',
'pageUrl': 'https://www.example.com/something/contact-us',
'pagePath': '/something/contact-us',
'pageTitle': 'Contact us'
});
</script>
Step 2：設定資料層變數
在GTM中點擊「變數」—「新增」—「選擇一個變數條件類型以開始設定」——「資料層變數」，命名為dlv—pagePath，做如下設定：
用同樣的方法設定dlv—pageTitle和dlv-pageUrl。
Step 3：設定觸發條件
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為Custom Event—Pageview，做如下設定：
Step 4：設定代碼
在GTM中點選「代碼」—「新增」—「選擇一個代碼類型以開始設定」——「Google Anlaytics」——「Google代碼」，命名為GA4 Basic Tracking，做如下設定：
總結
如果你的SPA是比較簡單的，網址標題是不變的，那麼使用加強型評估
如果你的網址標題會變化，但沒有開發資源的支援的，用延時發送
如果你想要GA4裡的資料準確的，有開發資源支援，使用dataLayer.push方法，這是我最推薦的方式。
