網頁載入速度報表

舊版 GA (Universal Analytics) 有網站載入速度報表，用於網站管理人員監測頁面載入速度。

舊版 GA 的「網站速度」報表，包含網頁路徑、網頁瀏覽輛、平均頁面載入時間(秒) 三項資訊。

截至目前 (2024年1月5日) GA4 中還沒有這一份報表，但是我們可以透過「自訂事件」與「自訂指標」、「計算指標」等功能復刻一份相同的探索報表。本文並再加上如何在 Looker Studio 中視覺化。

在 GA4 中期望的結果，網頁路徑搭配平均網頁載入時間(秒)。

事件追蹤設計

這次示範透過 Google Tag Manager (GTM) 來做載入時間事件追蹤，由於 GTM 可以偵測網頁載入完成事件 Window Loaded，可以做為網頁載入事件 page_load_time 的觸發時機。

事件參數的部分，以 page_load_time 參數紀錄以 "秒" 為單位的網頁載入時間。載入時間如何取得呢？可以用 JavaScript 取得網頁開始載入與結束載入時間，兩者相減獲得載入時間。

GTM偵測到的網頁結束完成，這是 page_load_time 事件觸發的時機。

設定步驟

1. GTM 設定
   1.1 新增變數：自訂 Javascript－網頁載入速度（秒）
   1.2 新增觸發條件：視窗已載入Ｗindow Loaded、視窗載入小於0秒
   1.3 新增 GA4 事件代碼：page_load_time
2. GA 設定
   2.1 新增自訂指標
   2.2 新增計算指標
3. 製作報表
   3.1 GA4 探索報表
   3.2 Looker Studio 視覺化
   
   

1. GTM 設定

1.1 新增變數：自訂 Javascript－網頁載入速度（秒）

首先要在 GTM 新增一個自訂變數，用 JavaScript 計算網頁載入時間。

設定步驟：

1. 打開 GTM
2. 左側選單「變數」
3. 「新增」
4. 選擇變數類型
5. 自訂 JavaScript
6. 輸入以下方框中的 JavaScript 代碼
7. 命名觸發條件「CJS - page load time (seconds)」
8. 儲存
   

步驟6: 輸入以下 JavaScript，這會計算以秒為單位的網頁載入時間。

function(){
   var timing = performance.timing;
   var loadTime = (timing.loadEventEnd - timing.navigationStart) /1000;
   return loadTime     //秒
}

設定截圖：

1.2 新增觸發條件：視窗已載入、視窗載入小於0秒

新增觸發條件「視窗已載入」
1. 左側選單「觸發條件」
2. 新增
3. 選擇觸發條件類型
4. 選擇＂網頁瀏覽＂下的「視窗已載入」
5. 命名觸發條件「Pageview - window loaded」
6. 儲存

新增觸發條件「視窗載入小於0秒」：
1. 左側選單「觸發條件」
2. 新增
3. 選擇觸發條件類型
4. 選擇＂其他＂下的「自訂事件」
5. 事件名稱輸入＂.*＂
6. 勾選「使用規則運算式比對」
7. 部分的自訂事件，變數選擇「CJS - page load time (seconds)」
8. 比對條件選擇「小於」
9. 條件輸入零＂0＂
10. 命名觸發條件「Custom event - page_load_time less than 0」
11. 儲存

1.3 新增 GA4 事件代碼：page_load_time

1. 左側選單「代碼」
2. 新增
3. 選擇代碼類型 > Google Analytics (分析) > Google Analytics (分析) ：GA4事件
4. 評估ID > 輸入網頁串流的評估ID (Measuremnet ID)
5. 事件名稱 > 輸入「page_load_time」
6. 事件參數 > 輸入 「page_load_time」
7. 值 > 輸入 {{CJS - page load time (seconds)}}
8. 觸發條件選擇「Pageview - window loaded」
9. 例外狀況選擇「Custom event - page_load_time less than 0」
10. 命名代碼「GA4 - Event - Page load time」
11. 儲存

2. GA4 設定

完成 GTM 設定後，需要在 GA4 新增「自訂指標」與「計算指標」。

2.1 新增自訂指標

1. 進入 GA4 介面 > 點擊左下角齒輪圖案進入「管理」介面
2. 選擇「資料顯示」分類下的「自訂定義」
3. 在自訂定義的介面選擇分頁「自訂指標」
4. 點擊「建立自訂指標」
5. 指標名稱輸入「page_load_time_sec」
6. 說明輸入「網頁載入時間（秒）」
7. 事件參數輸入「page_load_time」
8. 測量單位選擇「秒」
9. 儲存

2.2 新增計算指標

在此要使用「計算指標」功能製作平均網頁載入時間的指標。

1. 在「自訂定義」介面選擇分頁「計算指標」點擊「建立計算指標」
2. 名稱輸入「平均網頁載入時間(秒)」或「Average page load time (sec)」
3. API名稱輸入「avg_page_load_time」
4. 說明輸入「平均網頁載入時間(秒)。使用時必需搭配篩選器：事件名稱等於 page_load_time」
5. 公式輸入「{page_load_time_sec} / {事件計數}」
6. 測量單位選擇「標準」
7. 儲存

3. 製作報表

3.1 GA4 探索報表

1. 新增一份空白的探索報表
2. 在左側的「變數」設定區塊，加入維度「事件名稱」「網頁路徑與畫面類別」
3. 在左側的「變數」設定區塊，加入指標「平均網頁載入時間(秒)」、「Page Load Time」、「事件計數」
4. 點兩下「網頁路徑與畫面類別」，將其加入報表設定的「列」
5. 分別點兩下「平均網頁載入時間(秒)」、「Page Load Time」、「事件計數」，將其加入報表設定的「值」
6. 在報表設定區塊的下方「篩選器」點擊「+ 拖放或選取維度或指標」新增篩選器
7. 篩選器條件：「事件名稱」、「完全符合」、輸入「page_load_time」，點擊「套用」。
8. 完成報表設定。

如此在 GA4 中也可以觀察網頁載入速度報表。在這一份報表中，事件計數近似於於瀏覽量，因為套用事件名稱等於 page_load_time 的篩選器，而 page_load_time 事件在每個網頁只會載入一次。

網頁載入時間報表，以網頁路徑搭配平均網頁載入時間。報表中的事件計數經篩選 page_load_time 等同於瀏覽量。

也可以製作另一份每日網頁載入時間的「折線圖」，以觀測網站整體載入時間的趨勢。

報表設定：

1. 新增一份報表或分頁
2. 點擊兩下「平均網頁載入時間(秒)」將其套用至報表設定的「值」。
3. 新增篩選器「事件名稱」、「完全符合」、輸入「page_load_time」、套用。
   

到這邊我們已經完成在GA4中自己製作網頁載入報表的追蹤以及報表製作。

3.2 Looker Studio 視覺化報表

在Looker Studio 中也可以做出「網頁載入速度報表」，搭配 Looker Studio 的圖表樣式功能，可以製作出更視覺化的圖表。今天要示範的報表有兩份，一個是「每日網頁載入速度趨勢」及「平均網頁載入時間」兩張圖表。

3.2.1 每日網頁載入速度趨勢圖表

這張圖表會呈現網站每日的平均載入秒數趨勢圖。

1. 開啟 Looker Studio，新增一份空白報表

2. 連接 Goolge Analytic 4 資源

3. 修改 Average Page Load Time 欄位的類型：資源 > 管理已新增的資料來源 > 編輯 > 找到欄位 Average Page Load Time > 修改「類型」為「數字」

4. 新增圖表：選擇時間序列圖表

4. 指標選擇「Average Page Load Time」

5. 點擊「樣式」分頁，勾選「顯示資料標籤」，完成每日平均網頁載入時間的圖表。

3.2.2 平均網頁載入時間圖表

1. 新增圖表「內含長條圖的表格」

2. 維度選擇「網頁路徑」，指標選擇「Average Page Load Time」、「瀏覽」，勾選「顯示摘要列」

顯示摘要列可以在總計列查看所選區間整體平均載入時間與瀏覽量總和。

3. 切到樣式分頁，拉到下方指 標#1 將「顯示號碼」勾選，長條圖的前方就會顯示數值，方便觀察。

如果數字只到整數，將下方的「小數點精確度」改為2，代表顯示小數點後2位。

4. 因為「瀏覽」可能不需要顯示為長條圖，在樣式分頁找到 指標#2 ，把原本的長條圖改為「數字」即可。透過這張表格，就可以觀察每個網頁的載入時間表現。

到這邊就介紹完 GA4 的網頁載入數度追蹤與報表！實施起來的步驟並不多，但是對於非技術人員觀測網頁表現非常有幫助，有興趣的朋友可以試試看！