試用 Google Analytics 的 MCP 伺服器。從 GitHub 安裝，詳情請參閱公告。

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

評估單頁應用程式

本文適用於想使用 Google Analytics 評估單頁應用程式網頁瀏覽量的開發人員。

單頁應用程式 (SPA) 是指載入一次 HTML 文件，並使用 JavaScript API 擷取任何額外內容的網站。

範例：假設您有表單要收集一些待開發客戶資料。表單有三個畫面：

第一個畫面，用於擷取顧客資訊。

第二個畫面：顧客表示對特定服務感興趣。

第三個畫面頁面，可註冊與顧客興趣相關的網路研討會。

如要正確評估 SPA 的網頁瀏覽次數，請務必計算使用者與每個畫面互動的網頁瀏覽次數，並取得正確的網頁參照網址，這樣才能正確追蹤使用者歷程。

事前準備

本頁假設您已具備以下條件：

網站的 Google Analytics 帳戶和資源。瞭解如何設定 Google Analytics。
在網站上導入的 Google 代碼，會在網頁首次載入時觸發。瞭解如何設定 Google 代碼。

導入單頁應用程式評估功能

如要實作準確的 SPA 評估功能，請使用下列任一方法觸發新的虛擬網頁瀏覽：

瀏覽器記錄變更 (建議)：如果 SPA 使用 History API，特別是 pushState() 和 replaceState() 方法來更新畫面，請使用這個選項。
自訂事件：如果網站使用 DocumentFragment 物件算繪不同畫面，請使用這個選項。

實作瀏覽器記錄變更

如果單頁應用程式使用 History API，您可以在 Google Analytics 中啟用加強型評估，根據瀏覽器歷記錄事件自動追蹤網頁瀏覽。

在 GA4 中啟用加強型評估

如要根據瀏覽器記錄自動評估 page_views：

開啟 Google Analytics
在「管理」的「資料收集和修改」下方，依序點選「資料串流」>「網站」。
將「加強型評估」下方的開關切換為「開啟」，即可啟用所有選項。
按一下即可編輯個別選項。在「網頁瀏覽量」下方，按一下「顯示進階設定」。請務必啟用「網頁載入」和「頁面根據瀏覽器記錄事件而變更」。
儲存變更。

注意：如果啟用「根據瀏覽器記錄事件的網頁變更」加強型評估功能，Google Analytics 會自動監聽記錄事件 (例如用於單頁應用程式的事件)，並傳送 page_view 事件。您不需要在 Google 代碼管理工具中設定特定記錄變數或觸發條件，即可將網頁瀏覽傳送至 GA4。

使用 Google 代碼管理工具觸發條件處理記錄事件

如需根據瀏覽器記錄變更，在 Google 代碼管理工具中觸發其他類型的代碼 (例如將資料傳送至其他行銷平台)，可以使用「記錄變更」觸發條件類型。

設定代碼或變數以搭配「記錄變更」觸發條件時，請務必使用 Google 代碼管理工具提供的正確內建變數：

History New URL Fragment：歷史記錄事件發生後的網址片段。
History Old URL Fragment：歷史記錄事件發生前的網址片段。
History New State：新的記錄狀態物件。
History Old State：舊的歷史記錄狀態物件。
History Source：記錄事件的來源 (例如 popstate、pushState、replaceState)。

您可能需要在 Google 代碼管理工具中啟用這些內建變數，操作步驟如下：依序前往「變數」 >「設定」。

如要進一步瞭解這項觸發條件，請參閱「記錄變更觸發條件」。

確認評估設定

如要確認單頁應用程式是否正確評估網頁瀏覽次數，請按照下列步驟操作：

在 SPA 評估設定中，為每個代碼啟用偵錯模式。瞭解如何在 DebugView 中監控事件。
按一下單頁應用程式。按一下新的虛擬畫面時，您應該會在 DebugView 中看到新的 page_view 事件。比較 page_view 事件參數與前一個 page_view 事件，確認頁面參照網址和頁面位置是否已正確更新。

單頁應用程式的其他注意事項

除了傳送 page_view 事件，如要與 Google Analytics 進行健全的 SPA 整合，並提供更優質的使用者體驗，請考慮下列其他層面：

管理捲動位置

使用者在 SPA 中瀏覽不同檢視畫面時，瀏覽器通常會保留目前的捲動位置。這表示使用者可能看不到新虛擬網頁的頂端，而且可能會影響捲動頁數追蹤。

建議：在每次虛擬網頁轉換後，以程式輔助方式將捲動位置重設為網頁頂端或主要內容容器。

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

這項異動生效後，使用者會從新內容的頂端開始瀏覽，Google Analytics 捲動追蹤功能也能準確評估新虛擬網頁的參與度。

確保瀏覽器功能可存取內容

如果使用者回報瀏覽器功能 (例如網頁搜尋 (Ctrl+F)) 在虛擬網頁載入後無法運作，這可能表示 SPA 更新 DOM 的方式有問題。

建議：請確保 SPA 框架和轉送邏輯會完整且同步更新 DOM 的相關部分，並提供新網頁的內容。如果延遲算繪或從主要 DOM 樹狀結構隱藏內容，瀏覽器的搜尋功能可能無法立即為這些內容建立索引。在虛擬導覽後測試網頁內搜尋功能，確認內容是否可存取。

對自動事件的影響

如果您在 SPA 中正確導入虛擬網頁瀏覽評估，Google Analytics 就會適當處理其他自動事件。如果系統未記錄畫面變更的虛擬網頁瀏覽，Google Analytics 會將 SPA 視為單一網頁，導致指標失真。

舉例來說，user_engagement 事件會評估使用者在網頁上主動停留的時間。如果沒有虛擬網頁瀏覽，所有參與時間都會歸因於載入網頁，因此無法分析個別畫面上的時間。

正確導入虛擬網頁瀏覽評估功能後，系統會執行下列操作：

使用者從一個虛擬網頁前往另一個虛擬網頁時，系統會傳送 user_engagement 事件。
系統會計算上一個虛擬網頁的參與時間，並與 user_engagement 事件一併傳送，通常是在處理新虛擬網頁的 page_view 事件之前。
其他事件 (例如點擊或捲動) 則與使用者目前瀏覽的虛擬網頁 page_location 相關聯。

您可以分析 SPA 中個別畫面或區段的使用者參與度和其他指標，更準確地瞭解使用者歷程。

評估網頁瀏覽量

設定購買事件