評估單頁應用程式

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

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

範例：假設您有一個表單，可取得一些待開發客戶。表單有三個畫面：

• 第一個畫面，用於擷取顧客資訊。
• 第二個畫面：顧客表示對特定服務感興趣。
• 第三個畫面頁面，可註冊與顧客興趣相關的網路研討會。

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

事前準備

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

• 網站的 Google Analytics 4 帳戶和資源。瞭解如何設定 Google Analytics。

• 在網站上導入的 Google 代碼，會在網頁首次載入時觸發。瞭解如何設定 Google 代碼。

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

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

• 瀏覽器記錄變更 (建議)：如果 SPA 使用 History API，特別是 pushState() 和 replaceState() 方法來更新畫面，請使用這個選項。

• 自訂事件：如果網站使用 DocumentFragment 物件算繪不同畫面，請使用這個選項。

瀏覽器記錄實作 自訂事件實作

實作瀏覽器記錄變更

在 GA4 中啟用加強型評估

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

1. 開啟 Google Analytics

2. 在「管理」的「資料收集和修改」下方，依序點選「資料串流」>「網站」。

3. 將「加強型評估」下方的開關切換為 [開啟]，即可啟用所有選項。

4. 按一下即可編輯個別選項。在「網頁瀏覽量」下方，按一下「顯示進階設定」。請務必同時啟用「網頁載入」和「頁面根據瀏覽器記錄事件而變更」。

   

5. 儲存變更。

確認測量設定

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

1. 在 SPA 評估設定中，為每個代碼啟用偵錯模式。瞭解如何在 DebugView 中監控事件。

2. 按一下單頁應用程式。按一下新的虛擬畫面時，您應該會在 DebugView 中看到新的 page_view 事件。比較 page_view 事件參數與前一個 page_view 事件，確認網頁參照網址和網頁位置是否已正確更新。