單頁應用程式評估

本指南說明如何使用 analytics.js,針對內容動態載入 (不需傳統完整頁面載入) 的網站評估網頁活動。

總覽

單一頁面應用程式 (SPA) 是網頁應用程式或網站,會在使用者初次載入網站時,載入整個網站所需的一切資源。當使用者按一下連結並與網頁互動時,系統會動態載入後續的內容。應用程式經常會更新網址列中的網址,模擬傳統網頁瀏覽方式,但系統完全不會提出另一個完整的網頁要求。

預設的 Google Analytics (分析) 代碼適用於傳統網站,因為每當使用者載入新網頁時,系統都會執行這段程式碼。不過,如果網站以動態方式載入新網頁內容,而非完整載入頁面,針對單一網頁應用程式,analytics.js 程式碼片段只會執行一次。也就是說,載入新內容時,必須手動擷取後續 (虛擬) 網頁瀏覽。

追蹤虛擬網頁瀏覽

當應用程式動態載入內容並更新網址列中的網址時,儲存在追蹤器上的資料也會更新。

如要更新追蹤器,請使用 set 指令並提供新的 page 值:

ga('set', 'page', '/new-page.html');

設定新網頁價值後,所有後續傳送的命中都會使用該新值。若要記錄網頁瀏覽,請在更新追蹤器後立即傳送網頁瀏覽命中。

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

雖然嚴格來說,網頁瀏覽命中的 send 指令接受選用的 page 欄位做為第三個參數,但當您評估單一頁面應用程式時,我們不建議以這種方式傳遞 page 欄位。這是因為透過 send 指令傳遞的欄位並不會在追蹤程式上設定,只會套用到目前的命中。如果不更新追蹤器,如果應用程式傳送任何非網頁瀏覽命中 (例如事件或社交互動),就會發生問題,因為這些命中會與追蹤器建立時提供的任何 page 值建立關聯。

處理同一資源的多個網址

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

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

  • /about.html
  • /#about.html
  • /home.html#about.html

為避免報表重複,建議將這些網頁瀏覽全部擷取為 /about.html

重要事項

請勿更新文件參照網址

使用 create 指令建立追蹤程式物件時,document.referrer 的值會儲存在追蹤器的 referrer 欄位。在不使用完整頁面載入的單一頁面應用程式中,referrer 欄位將一律保持不變。

儘管如此,在傳送網頁瀏覽命中前,您不需要手動更新參照網址欄位。Google Analytics (分析) 可以自動判斷正確的導覽路徑。

不要更新文件位置

如同追蹤程式在 referrer 欄位使用 document.referrer 的方式,它也會為 location 欄位使用 document.location,後者可能包含廣告活動資料或其他中繼資料 (格式為附加在網址結尾的查詢參數)。

如果更新 Google Analytics (分析) 檢查的廣告活動欄位或其他中繼資料,可能會導致目前的工作階段結束,並開始新的工作階段。為了避免這個問題,評估單頁應用程式中的虛擬網頁瀏覽時,請勿更新 location 欄位。請改用 page 欄位。

不要建立新的追蹤程式

請勿在單一頁面應用程式中建立新的追蹤程式,藉此模仿 JavaScript 追蹤程式碼片段對傳統網站的功能。因為這麼做的話,可能會傳送不正確的參照網址以及上述的廣告活動資料不正確。