Google Analytics 進階:GA4也能追蹤網站速度

文章目錄

分享給更多人知道

為什麼要追蹤網站速度?

在開始設定環節之前,讓我們先想一個最根本的問題 — 為什麼要追蹤網站速度?。老實說當我剛接觸UA (Universal Analytics)的時候,我根本搞不懂網站速度報表,到底用來做什麼的。

但其實我們在瀏覽網頁的時候,網站速度卻是非常的關鍵。想像一下,當你Google一個關鍵字,終於找到你需要的資訊,結果打開網頁後,竟然跑不出任何東西,這個時候你作何感想呢?

知名SEO網站SEMrush,針對網站速度對使用者跳出率的影響,做了一項研究。報告顯示,當一個網頁需要1到3秒時,使用者跳出網站的機率為32%,然而當讀取時間拖到10秒時,跳出率來到驚人的123%。可見網頁讀取速度對使用者體驗有如此大的影響。

網頁讀取速度大幅影響網頁跳出率
網頁讀取速度大幅影響網頁跳出率 資料來源:semrush.com

對於如此重視使用者體驗的Google,早在2018年的『速度更新』中就已經宣布,把網頁速度列入行動搜尋(Mobile Search)的排名依據。截至2023年8月為止,仍作為市占第一的Google,至今還未改變這項聲明。想當然其他搜尋引擎,例如Bing, Yahoo, Yandex等,相信也會跟隨它的腳步。

回顧UA網站速度報表

如果你還記得UA的網站速度報表,裡面所提供的資訊還挺完整的,包括:

Avg. Page Load Time (平均網頁載入時間) – 網頁載入所需的平均時間。

Avg. Redirection Time (平均重新導向時間) – 使用者前往網頁前,所需的轉址時間。

Avg. Domain Lookup Time (平均網域查詢時間) – DNS查詢網頁所需的平均時間。

Avg. Server Connection Time (平均伺服器連線時間) – 使用者連上伺服器所需的時間。

Avg. Page Download Time (平均伺服器反應時間) – 伺服器回應使用者請求所需的時間。

但隨著通用GA (Universal Analytics)在2023七月一號正式謝幕,這個報表也不復存在。

UA網站速度報表
UA網站速度報表

在GA4追蹤網頁速度

但問題來了,GA4根本沒有網站速度報表,究竟該怎麼辦?一想到去年的KPI之一就是網頁讀取速度,真的是急得直跳腳。老實說,非技術背景的我,當初也是找遍了各大網站及看遍各種YouTube影片,好不容易在thyngster找到一個輕鬆使用Google代碼管理工具,就能完成設定的方式。以下也和你分享,該如何使用PerformTiming在GA4追蹤網頁速度!

Step 1 使用GTM埋入HTML代碼

首先先創建一個代碼,並且選擇“自定義HTML”,並且複製貼上下方的程式碼。

<script>
(function() {
var y = function(c) {
return (isNaN(c) || Infinity == c || 0 > c || 300000 < c) ? 0 : c
};
var t, d;
if (
(t = window.performance && window.performance.timing) && (d = window.dataLayer) &&
y(t.loadEventStart – t.navigationStart) > 0
) {
d.push({
‘navigation_start_time’: t.navigationStart,
‘page_load_time’: y(t.loadEventStart – t.navigationStart),
‘domain_lookup_time’: y(t.domainLookupEnd – t.domainLookupStart),
‘server_connection_time’: y(t.connectEnd – t.connectStart),
‘server_response_time’: y(t.responseStart – t.requestStart),
‘page_download_time’: y(t.responseEnd – t.responseStart),
‘redirection_time’: y(t.fetchStart – t.navigationStart),
‘document_interactive_time’: y(t.domInteractive – t.navigationStart),
‘document_content_loaded_time’: y(t.domContentLoadedEventStart – t.navigationStart),
‘event’: ‘site_speed’
});
}
})();
</script>

建立自定義HTML
建立自定義HTML (Custom HTML)

再來為剛所建立的代碼,建立一個觸發條件。這個條件是用來告訴GTM什麼時候啟用剛所植入的HTML代碼。在我們的案例中,請選擇當“視窗已載入”時啟動該代碼。

建立觸發條件 - 網頁已載入
建立觸發條件 - 網頁已載入 (Window Loaded)
啟用觸發條件
記得在自定義HTML中,選取剛設定的觸發條件

Step 2 用資料層 (DataLayer) 建立GTM變數

在這個步驟當中,會需要將所有會用到的變數(Variables)設定完成,讓所有參數(Parameters)都能顯示在GA4事件報表當中。

以下是會需要用到的參數(Event Parameters):

  1. navigation_start_time
  2. page_load_time
  3. domain_lookup_time
  4. server_connection_time
  5. server_response_time
  6. page_download_time
  7. redirection_time
  8. document_interactive_time
  9. document_content_loaded_time

由於總共有9個參數,所以我們必需為各個參數設定一次變數。以下我會以設定page_load_time為例,執行一次設定,請務必繼續完成剩下的八個變數設定

設定速度相關參數
注意!在設定變數時,所有的英文字都必須跟上方的參數一模一樣

Step 3 創建GA4事件

請依下方圖片的流程,設定相關事件參數:

  1. 建立新的代碼
  2. 選擇“Google Analytics (分析):GA4 設定
  3. 輸入你的專屬”評估ID
  4. 輸入事件名稱: “site_speed”
  5. 輸入事件參數 (即Step 2設定9次的參數及變數)
  6. 將代碼觸發選項設定為”每個網頁一次”

在這邊你會發現,我額外設定了一項事件參數page_load_sample,這項參數會在之後Looker Studio報表中用到。

完成事件參數後,前往進階設定的代碼觸發選項,選擇”每個網頁一次”。調整這個的用意,主要是確保在每次讀取網頁時,都能追蹤到相關數據。

建立事件名稱及事件參數
建立事件名稱及事件參數

Step 4 建立GTM事件觸發條件

在這個步驟,我們會再建立一個新的觸發條件。你可能會想,我們在Step 1不是已經做過了嗎?但其實那是用來觸發JavaScript data push的條件。而這次設定的條件,是專門用來觸發site_speed事件 (Step 3所設定的GA4事件)的。

依下圖一,創建新的觸發條件,這邊我將它命名為 cEvent – site_speed,然後選擇”自訂事件”,最後將事件名稱,命名為site_speed。 

觸發條件設定完成後,記得回到GA4 Event – Site Speed代碼 (如下圖二),新增新的觸發條件。

建立GA4事件觸發條件
建立GA4事件觸發條件
在GA4事件中啟用觸發條件
在GA4事件中啟用觸發條件

Step 5 測試事件並送出

完成Step 1 ~ 4之後,就可以開始測試所有的代碼、觸發條件、變數等,是否都有設定成功。首先前往GTM Dashboard 點擊”預覽”,就可以照著以下流程確認囉。

測試GA4事件是否有安裝成功
測試GA4事件是否有安裝成功
檢查事件參數是否有成功顯示
檢查事件參數是否有成功顯示
測試完成後,提交代碼
測試完成後,提交代碼

Final Step - 在GA4創建自訂維度及指標

最後,為了在GA4報表中能看到所有的事件參數,還需要在GA4額外設定自訂維度和指標。步驟也跟在GTM差不多 (Step 2):

自訂維度 (維度名稱可自定義)

  1. Navigation Start Time
    1. 範圍:事件
    2. 事件參數:navigation_start_time

自訂指標 (指標名稱可自定義)

  1. Page Load Sample
    1. 範圍:事件
    2. 測量單位:標準
    3. 事件參數:page_load_sample
  2. Page Load Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:page_load_time
  3. Domain Lookup Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:domain_lookup_time
  4. Server Connection Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:server_connection_time
  5. Server Response Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:server_response_time
  6. Page Download Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:page_download_time
  7. Redirection Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:redirection_time
  8. Document Interactive Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:document_interactive_time
  9. Document Content Loaded Time
    1. 範圍:事件
    2. 測量單位:毫秒
    3. 事件參數:document_content_loaded_time
前往GA4,選擇管理>自訂定義
前往GA4,選擇管理>自訂定義
建立自訂指標
建立自訂指標

製作Looker Studio儀表板

最後要想用所有的指標和維度,製作成網站速度報表,就必須使用到Google Looker Studio

這款資料視覺化工具,不僅免費,還可以用簡易拖拉的方式,根據不同需求,製作出一個即時的數位儀表板。

以下我們就來實際執行一次,快速製作出類似於Universal Analytics的網站速度報表吧!

管理匯入的GA4資料

首先,我們先任意建立一個報表,並在上方導覽列,選擇”管理已新增的資料來源“。

管理資料源
管理資料源

編輯GA4資料庫

進入資料源管理介面後,選擇編輯你所會用到的資料源,在這個範例中,我們會用到Google Analytics 4的資料。

編輯資料源
編輯資料源

為時間指標新增欄位

由於我們是用GTM搜集自定義資料,例如網頁載入時間、網頁載入取樣⋯⋯等,所以在處理這些資料時,要特別的小心。萬一不小心,定義沒搞清楚,呈現出來的數據可能會不夠精確。

在這個步驟,我們會需要點選”新增欄位”,為各個自定義指標建立各自的欄位,並且使用簡單的數學公式,來呈現會需要用到的數據。

新增欄位
新增欄位

計算時間指標公式

由於我們得到的Page Load Time是讀取所有網頁花費的總時間,所以要是想要得到平均網頁載入時間,就會需要將總載入時間除上總網頁載入取樣。

所以,平均網頁載入時間的計算方式會是:

(總載入時間 ÷ 總網頁載入取樣) ÷ 1000 = (Page Load Time / Page Load Sample) / 1000

在這個公式中,會需要除以1000是因為在GTM所追蹤到的時間單位是”毫秒“,而1000毫秒等於1秒鐘,所以如果要顯示平均載入秒數,會需要把總平均值再除以1000

平均載入時間計算公式
平均載入時間計算公式

除了平均網頁載入時間,請繼續為下方指標建立各自的欄位

  • 平均重新導向時間 = (Redirection Time / Page Load Sample) / 1000
  • 平均網域查詢時間 = (Domain Lookup Time / Page Load Sample) / 1000
  • 平均伺服器連線時間 = (Server Connection Time / Page Load Sample) / 1000
  • 平均伺服器反應時間 = (Server Response Time / Page Load Sample) / 1000
  • 平均網頁下載時間 = (Page Download Time / Page Load Sample) / 1000
其他時間指標
其他時間指標

建立網站速度報表

建立完所有的時間指標後,最後一步就是要建立網站速度儀表板。以下截圖就是我自己用來監控我的網站速度的Looker Studio報表。如果你懶得自己一個一個拉圖表,歡迎點擊下方按鈕,直接下載我的報表模板。

Looker Studio網站速度報表
Looker Studio網站速度報表
Lewis Ko
Lewis Ko
Hi 我是Lewis,曾任職in-house行銷人員,現職某跨國企業的SEO Specialist。熱愛學習最新的科技和知識,努力透過簡單易懂的方式,分享我學習的過程和心得。如果你/妳剛好也在學習SEO、GA、GTM、Looker Studio的道路上,希望我的內容對你有幫助!

延伸閱讀