本指南說明如何使用 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 追蹤程式碼片段對傳統網站的功能。因為這麼做的話,可能會傳送不正確的參照網址以及上述的廣告活動資料不正確。