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 程式碼

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


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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot Telegram

Telegram Bot 學習筆記 – 3:鍵盤 Keyboard

Front-End

IntersectionObserver:下篇 – 實際應用 lazyload、進場效果、無限捲動

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

PWA

PWA 學習筆記 – 3:Workbox 參數

Apps Script Google

Google Apps Script 讀寫 Cloud Firestore 資料

WordPress

WordPress 好用的會員相關外掛:登入安全性、會員系統

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

Google Maps

Google Maps API 學習筆記 – 6:畫新冠肺炎分佈圖

Front-End

用 CSS :target 製作頁籤、手風琴功能

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言