評估單頁應用程式

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

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

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

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

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

事前準備

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

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

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

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

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

實作瀏覽器記錄變更

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

在 GA4 中啟用加強型評估

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

  1. 開啟 Google Analytics

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

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

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

    顯示網頁瀏覽設定的圖片

  5. 儲存變更。

注意：如果啟用「根據瀏覽器記錄事件的網頁變更」加強型評估功能，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 代碼管理工具中啟用這些內建變數，操作步驟如下：依序前往「變數」 >「設定」。

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

確認評估設定

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

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

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

對自動事件的影響

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

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

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

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

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

上一頁
評估網頁瀏覽量
下一頁
設定購買事件