Google Analytics 用戶計時(User Timings)

Google Analytics 用戶計時(User Timings)

2019.09.28 補充GA 使用者載入時間 報表
2019.10.10 更新完整的埋User Timings程式碼部份。

用戶計時(User Timings)功能很少聽到,但很實用

一般會聽到GA的功能,大部份就是瀏覽量、事件、目標之類的。即便Google Analytics有個網站速度報表,卻也比較少在用工作上有用到,因為有蠻多工具可以代替的,像是Google自家就有的PageSpeed InsightsCompare your mobile site speed,網路上搜尋就會出現很多測試頁面速度的工具。

最近發現Firebase Performance也有記錄加載速度的功能,值得一試,可參考這篇:

Firebase Performance使用筆記

會知道GA還有個用戶計時的功能,是在寫「GA Debugger 介紹」這篇時看到的,它的功能包含了User Timings,看到這行才發現GA還有這功能,這幾天就來試一下。

放個廣告賺點養主機的$$,謝謝

它的埋碼簡單,基本上就是寫GA事件,但報表呈現的資料很豐富,雖然不像一般的測速工具會顯示從request到response之前每一個階段的速度(其實很多都不知道什麼意思),但GA User Timings除了基本的顯示載入時間要多久外,還有以下優點:

記錄每個區間的比例

比方1-5秒讀完的有多少人、5-10秒讀完的有多少人,如下圖:

記錄每個區間的比例
記錄每個區間的比例

記錄每個地區平均的讀取時間

比如台灣的平均載入多久、香港的多久等等,也可以再往下一層看是城市的讀取時間,如下圖:

記錄每個地區平均的讀取時間
記錄每個地區平均的讀取時間

搭配次要維度可再細分

GA有個很厲害的就是次要維度,把資料再用更多種方式去呈現,比方載入時間搭配小時這個次要維度,就可以看見哪一個時間點的載入時間最久,如下圖:

搭配次要維度可再細分
搭配次要維度可再細分

可以看到17點時載入時間最久,有可能是那時系統正在更新,或是是一般人上網的巔峰時間,造成讀取時間較其它時段長。

以上3點是實作後看到的優點,下面筆記到看報表時會再補充。


埋User Timings程式碼

要使用Google Analytics的「使用者載入時間」報表,不用再另外開什麼功能,只需要發送GA事件就好。關於GA事件的介紹可參考這篇:Google Analytics 事件追蹤設定

User Timings的事件,官方文件的code如下:

gtag('event', 'timing_complete', {
  'name': 'load',
  'value': 3549,
  'event_category': 'JS Dependencies',
  'event_label': 'Google CDN'
});

timing_complete

這是事件動作,不能改變,一定要是timing_complete

放個廣告賺點養主機的$$,謝謝

name

計時變數,必填,因為計時的方式是用Performance API,如果對這個API很了解的高手,可以用不同的API設定不同的變量。一般使用時就直接填官方給的示範「load」就行,

value

時間,必填,單位是毫秒,1000毫秒 = 1秒。要注意的是value不能有小數點,一定要是整數。

value的值不是寫死的,是由JavaScript去抓的,文件中提供的code如下:

// 支援Performance API才執行
if (window.performance) {
  
  // performance.now():頁面從最開始加載到目前為止的時間
  // Math.round:四捨五入取整數
  var timeSincePageLoad = Math.round(performance.now());

  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
  
}

performance.now() 去取得頁面開始載入,一直到載入到這行code的時間。

用GTM埋碼的話,只需要在觸發條件中選擇「視窗已載入」就行。自己寫code的話就寫在 window.load 裡就行。這樣就會是抓頁面整個載入完成的時間。

event_category、event_label

載入時間類別(category)、計時標籤(label),非必填,不過地位就跟GA事件的類別、標籤一樣,所以建議是必填。

完整的埋User Timings程式碼

附上自己埋碼的程式碼,跟下一段看報表有關,可以參考:


GA 使用者載入時間 報表

埋完User Timings的程式碼後,GA就會開始收集傳來的資料,過幾天就可以在GA後台上看到。

報表的位置在:行為 -> 網站速度 -> 使用者載入時間。

一點進使用者載入時間報表,會先看到樣本數,以及平均的載入時間:

樣本數及平均的載入時間
樣本數及平均的載入時間

主要維度頁籤預設的是類別,也可以點變數跟標籤,以下點擊標籤:

計時標籤報表
計時標籤報表

Augustus設定抓的標籤值是頁面路徑,所以呈現的就是各頁的載入時間,可以看到讀取時間最久的是「Google Maps API學習筆記-5:抓目前位置、計算到各點距離」這篇,載入時間至少是其它頁面的2倍。

再點次要維度去查原因,樣本數5筆中,有2筆來自美國,1筆來自大陸,不知道是不是主機在新加坡的原因,還是有什麼其它原因,來自這兩個國家的讀取時間都過20秒以上:

計時標籤+國家/地區
計時標籤+國家/地區

除了基本的數據,GA上還有另外2個大頁籤,報表頁面上方可以看到:

速度報表三大項功能
速度報表三大項功能

分布情況

分布情況是每個時間的區間整理,如下圖:

速度報表 時間分布情況
速度報表 時間分布情況

可以看見載入時間1-5秒的佔了一半以上。

訪客分佈圖

訪客分佈圖就是按地理位置區分,會秀出世界地以及報表:

速度報表 訪客分佈 世界地圖
速度報表 訪客分佈 世界地圖

世界地圖的部份除了顯示載入時間,也可以切換成樣本取樣數分布。

速度報表 訪客分佈 報表
速度報表 訪客分佈 報表

報表部份除了國家,也可以再切成更細的城市。


筆記後心得

Google Analytics的使用者速度報表,就埋一個簡單的事件,便可以看到很多系統整理出的資訊。這些資訊可以給開發人員、網站維運人員來使用。

畢竟在SEO上,速度是一項很重要的評分,多多了解維運站的速度,更進階的是去了解問題點以及改善,可以對SEO有幫助。


參考資源

使用gtag衡量用戶計時

用戶計時報告


Summary
Google Analytics 用戶計時(User Timings)
Article Name
Google Analytics 用戶計時(User Timings)
Description
本篇大綱:用戶計時(User Timings)功能很少聽到,但很實用、記錄每個區間的比例、記錄每個地區平均的讀取時間、搭配次要維度可再細分、埋User Timings程式碼、完整的埋User Timings程式碼、GA 使用者載入時間 報表、分布情況、訪客分佈圖、筆記後心得、參考資源
Augustus
Let's Write
Let's Write
Publisher Logo

留言