使用 gtag.js 進行單頁應用程式評估

本頁說明如何使用 gtag.js 評估使用者與網頁內容動態載入網頁的互動情形,不必進行傳統的完整頁面載入。

總覽

單頁應用程式 (SPA) 是網頁應用程式或網站,可在網頁首次載入時載入整個網站所需的一切資源。當使用者點選連結並與網頁互動時,後續的內容會動態載入。應用程式通常會更新網址列中的網址來模擬傳統網頁瀏覽方式,但一律不會發出獨立的完整頁面要求。

Google 代碼可搭配傳統網站使用,因為每當使用者載入新網頁時,這段程式碼就會執行。然而,如果是單頁應用程式,網站會以動態方式載入新網頁內容,而不是完整載入頁面,則 gtag.js 程式碼片段只會執行一次。也就是說,系統必須在載入新內容時,手動評估後續 (虛擬) 網頁瀏覽。

評估虛擬網頁瀏覽

如果您的應用程式以動態方式載入內容,並更新網址列中的網址,使用 gtag.js 儲存的網頁網址也應該會隨之更新。您也可以把網站位址的變化視為網頁瀏覽來評估。

如要設定 gtag.js 報表,請使用 set 指令指定 page_path 參數的值:

gtag('set', 'page_path', page_path);
gtag('event', 'page_view');

例如:

gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');

新增 page_path 的新值後,所有傳送到該屬性的後續事件都會使用該新值。

處理同一資源的多個網址

部分 SPA 只會在動態載入內容時,更新網址的雜湊部分。這種做法可能會導致許多不同的網頁路徑指向同一個資源。在這種情況下,通常最好選擇標準網址,並只將 page_path 值傳送至 Google Analytics (分析)。

舉例來說,假設某個網站可以透過下列任一網址存取「關於我們」網頁:

  • /about
  • /#/about
  • /home/#/about

為避免在報表中重複,建議您使用 /about 記錄 page_path 的所有頁面。