文章目錄
我們這一節來介紹Google Analytics 4 中如何對單頁應用做跟蹤，如果你用的是Universal Analytics，請看Google Analytics中做單頁應用追蹤。
什麼是單頁應用程序
單頁應用（英語：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中點擊「管理」——「資料串流」，然後選擇要設定的資料串流：
然後點擊增強型評估下面右側的這個圖標：
就可以看到加強型評估的設定頁面，點擊“隱藏進階設定”，就可以看到“頁面根據瀏覽器記錄事件而變更”選項，勾選它，然後儲存。
這樣就完成設定了，如果你在GTM的預覽模式下的History裡API Call裡能看到gtm.historyChange-v2，就表示被追蹤到了。
方法二：用記錄變更觸發條件
首先看看，記錄變更裡的變數哪些是可以用的。
在GTM裡點擊“預覽”，然後隨意點擊一個頁面，返回到Tag Assistant，在Summary裡找到History，然後看History相關的變數的值：
這種方式只獲取到Page Path，獲取不到Page Title，如果你想獲取Page Title，那麼可以使用延遲發送的方法。
方法三：延遲發送的方法
延遲發送的方法就是History觸發的時候，延遲1000ms或500ms，通過JavaScript獲取Page Title和Page Path，再通過dataLayer發送出去，然後在通過GTM的設定，實現頁面的追蹤。
新建HTML延遲發送
在GTM中的點擊「代碼」——「新增」——「請選擇代碼類型以開始設定…」——「自訂HTML」，然後做如下設定：
程式如下：
<script>
// Push the page path and title into the datalayer for all occurrences of the custom event pageview
setTimeout(function(){
if (history.pushState) {
var path = window.history.state.as;
var title = document.title;
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'Pageview',
pagePath: path,
pathTitle: title,
});
}
}, 500);
</script>
觸發條件：Custom Event—Pageview
在GTM中的點擊「觸發條件」——「新增」——「請選擇觸發條件類型以開始設定…」——「自訂事件」，然後做如下設定：
這裡的事件名稱要與datalayer裡的event對應。
變數：dlv—pagePath & dlv—pageTitle
要新建兩個變數，在GTM中的點擊「變數」——「新增」——「請選變數類型以開始設定…」——「資料層變數」，然後分別做如下設定：
這裡的資料層變數名稱要與datalayer裡變數名稱對應。
設定代碼
在GTM中的點擊「代碼」——「新增」——「請選變數類型以開始設定…」——「Google Analytics (分析)：GA4 設定」，然後做如下設定：
方法四：dataLayer方法
dataLayer方法和延遲發送都用到dataLayer，兩種的不同之處在於，延遲發送，是在GTM上控制自己發DataLayer，而datalayer方法是由工程師控制發送，更準確，dataLayer方法是一個萬能的方法，一定可以解決單頁應用的追蹤問題，它需要工程師在用戶點擊不同頁面的時候發送如下示例的資料：
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Pageview',
'pagePath': '/something/contact-us',
'pageTitle': 'Contact us' //some arbitrary name for the page/state
});
</script>
工程師需要注意，window.dataLayer = window.dataLayer || [] 的作用是用於清空對象，避免混亂；pagePath和pageTitle都是動態變化，且是一一對應的。
接下來就是在GTM上設定，DataLayer方法的GTM設定和延遲發送方法的GTM設定是一樣，請直接參照 觸發條件：Custom Event—Pageview 起的設置。
Rogue Referral問題
虛擬頁面雖然能解決單頁應用的頁面追蹤問題，但它引入Rogue Referral問題，本來是付費流量，如來自Adwords，可能會被錯誤的劃分到有機搜索或引薦來源。
如果你的單頁應用是有付費流量，那麼你一定不能忽略這個問題，詳細解決方案可以看：解決單頁應用追蹤中出現Rogue Referral的幾個方法
