如何在Google Analytics 4中追蹤網頁加載速度

更新時間：2024年12月17號

這一篇介紹如何在Google Analytics 4 中追蹤頁加載速度，有兩種方式：

• 一種是用單獨的事件去追蹤頁加載速度，如網頁加載後，單獨發送一個事件去追蹤頁加載速度，這種方式會增加請求的發送量
• 一種是將網頁加載速度合併到網頁瀏覽裡面，如用自訂JavaScript通過瀏覽器API獲取網頁加載速度，將其設定為事件參數，隨著PV一起發送，這種方式不會增加請求的發送量

這一篇介紹是第二種方式，使用這種方法，有兩個需要注意的地方：

• 觸發條件要用視窗已載入，而不是網頁瀏覽，因為如果使用網頁瀏覽，可能窗口還沒載入，會導致獲取不到頁加載速度，而窗口已載入，就一定是加載完，可以獲取到頁加載速度。因為網頁瀏覽觸發條件的優先順序如下：同意聲明初始化>初始化>網頁瀏覽（也叫容器已載入）>DOM就緒>視窗已載入，延伸閱讀：深入認識GTM中網頁瀏覽觸發條件：Dom就緒、網頁瀏覽和視窗已加載 和GTM 入門介紹——認識觸發條件。
• 窗口已載入之前不要觸發事件，如果事件比PageView更快觸發，會影響歸因。

接下來看具體設定過程：

變數：自訂JavaScript

在GTM裡新建一個自訂JavaScript的變數類型，這個變數的作用是通過瀏覽器API獲取網頁加載速度。

在GA4裡點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「自訂 JavaScript」，命名為“Page Load Time”，如：

Source Code：

function(){
  var timing = performance.getEntriesByType('navigation')[0] || performance.timing;

var load_time = ((timing.loadEventStart-timing.fetchStart)/1000).toFixed(2);

if(load_time>0){
	return load_time;
 }
}

代碼：默認網頁瀏覽追蹤

找到GA4默認網頁瀏覽的代碼，在共用事件設定裡新增：

然後將這個代碼的觸發條件改為窗口已載入：

預覽

設定好後就在GTM裡預覽調試：

可以看到，事件參數page_load_time追蹤到網頁加載速度。

註冊事件參數

在GA4中點擊「管理」——「自訂定義」——「自訂指標」——「建立自訂指標」，然後做如下設定：

這樣就可以。

探索：資料驗證

收集些資料後，可以在探索裡用任意形式去驗證資料：

這裡的Page Load Time是多個網頁加總，如果要看平均的，可以用計算指標，公式是{Page Load Time}/{事件數}，報表如：

你可以知道每個網頁的平均加載時間了。