如何在 GA4(Google Analytics 4)中分析頁面載入時間

How To Analyze Page Load Time Data In Ga4Google Analytics 4

從2023年7月開始,Google分析版本全面切換為GA4版本了,之前的UA(Universal Analytics)版本也會停用。UA版本的Google分析可以很方便地查看到頁面的載入速度,但是GA4卻沒有這個報告。網站的載入速度對於網站的優化是非常重要的,不論是廣告或是SEO的排名。從用戶的角度來看,網站的載入速度也是一個很重要的客戶體驗指標。所以,我們有必要時時關注網站的載入速度。

雖然GA4不能直接查看網站載入速度,但今天要介紹的方法卻可以解決這個問題。今天的方法主要用到Google 追踪碼管理器 (GTM) 與 Looker Studio 兩個工具,搭配GA4使用。這裡要特別提醒,即便你的GA4不是透過GTM部署的,今天的方法仍然適用。

第1步:變數(Variables)

你可以透過https://tagmanager.google.com/ 登入GTM後台,在左側的導覽列選擇“Variables”,然後在“User-Defined Variables”點選”New”,建立新的變數。

Image 11

點選“Variable Configuration”,再在“Page Variables”選擇“Custom JavaScript”作為變數的類型。

Image 13

該變數可以重新命名為“頁面載入時間”,且代碼可以放入自訂的 JavaScript 中。

變數命名為“Page Load Time”,並將以下代碼複製到自訂變數中。

自訂 JavaScript 代碼:

function() {
    if (window.performance && window.performance.getEntriesByType) {
        var entries = window.performance.getEntriesByType("navigation");
        if (entries.length > 0) {
            var navTiming = entries[0];
            var pageLoadTime = navTiming.loadEventEnd - navTiming.startTime;
            return Math.round(pageLoadTime / 100) / 10;
        }
    }
}
Image 3

第2步:觸發器(Triggers)

回到左側的導覽列,選擇“Triggers”,然後點選“New”建立新的觸發器。

Image 7

點選“Trigger Configuration”配置觸發器,再在“Page View”中選擇“Window Loaded”作為觸發器的類型。

Image 9

觸發器可以重新命名為“Page Loaded”並保存。

Image 6

我們還需再建立一個觸發器。一樣的,我們回到左邊的導覽列,選擇“Triggers”,然後點選“New”建立新的觸發器。這次,我們在“Other”中選擇“Custom Event”作為觸發器的類型。

Image 10

我們將觸發器命名為“Page Load Time Less Than 0”。在“Event name”填入“.*”(注意是一點再加上星號)。再勾選“Use regex matching”。在“This trigger fires on”選擇“Some Custom Events”。在下方的條件中,我們要選擇先前定義的“Page Load Time”,並設定為“less than 0”,然後保存。

Image 8

第3步:標籤(Tags)

一樣地,我們回到左邊的導覽列,選擇“Tags”後點選“New”建立新的標籤。

Image 15

點選“Tag Configuration”,選擇“Google Analytics: GA4 Event”作為標籤的類型。

Image 14

在“Configuration Tag”中,我們選擇要設定的GA4的ID。如果GA4的代碼是直

接安裝在網站後台,我們可以選擇“None-Manually Set ID”。如果是透過GTM安裝GA4則選擇對應的ID。如果選擇了“None-Manually Set ID”,我們需要在“Measurement ID”中填入GA4對應的Measurement ID。事件名我們可以設為“Page_load_time”。同時,在“Event Parameters”設定事件參數,把“Page Name”設為“loading_time_sec”,再把“Value”設定為“{{Page Load Time}}”。

Image 17

點選“Triggering”設定觸發器,於“Firing Triggers”選擇“Page Loaded”,於“Exceptions”選擇“Page Load Time Less Than 0”。

Image 4

第4步:自訂參數(Custom metrics)

這一步要在GA4中進行設定。我們通過路徑Admin -> Custom definitions -> Custom metrics,在GA4設定自訂參數。點選“Create custom metrics”,把“Metric name”設定為“Page Load Time”,把“Event parameter”設定為“loading_time_sec”,再把“unit of measurement”設定為“Seconds”。

Image 12
Image 19

第5步:測試並發佈

在GA4平台可以看到頁面載入時間的數據。我們可以回到GTM,檢查我們設定的標籤是否能正常觸發,若沒問題,就可以進行發佈。

Image 18

第6步:使用 Looker Studio

最後一步,我們要使用Looker Studio來檢視我們的報告。我們將GA4連接到Looker Studio,在“Dimension”中選擇“Page path”,而在“metric”中,我們要把Average Page Load Time、Count Page Load Time拉出來檢視。

Image 16

我們可以設定一個過濾器,讓Event name等於page_load_time,以防止發生錯誤,或是頁面載入時間為零秒或更短的資料出現。

Image 5

頁面載入時間數據分析

當你在分析頁面載入時間數據時,以下幾點建議你可以考慮:

1. 進行分析以找出載入時間較慢的頁面。建議優化這些頁面,以提升使用者體驗並最大限度地降低跳出率。

2. 重點分析高流量的頁面。建議優先對這些頁面進行優化,因為它們對網站整體的效能和使用者體驗有較大的影響。

3. 納入用戶反饋進行分析。分析用戶調查和反饋可以幫助你找出因為載入時間緩慢而影響使用者體驗的特定頁面或元素。

優化頁面載入速度的建議

1. 進行圖片優化。根據內容和瀏覽器相容性,優化檔案大小並選擇最佳格式,例如 WebP、JPEG 或 PNG。

2. 利用壓縮技術優化資源大小。例如利用gzip來進一步減少檔案大小。

3. 實施瀏覽器快取以優化網站效能。這樣可以使瀏覽器可以快取並再利用之前取得的資源,從而縮短後續的頁面載入時間。

4. 利用內容傳遞網路 (CDN)。CDN有助於分發內容到各種伺服器,從而增加基於地理位置的使用者訪問速度。

透過查看Google Analytics中的頁面載入時間指標並實施上述優化策略,你可以提升網站功能並優化使用者體驗,進而增強參與度和轉換率。

返回頂端