跟踪用戶交互時長，簡單的實例教程詳解

我們在分析網站的過程中無不例外地會關注網頁載入時長。頁面載入時長包括許多方面，如域名的解析，HTML的響應時間，服務器計算伺服時間，HTML下載時間，其他資源下載時間等。這些訊息都包含在Google Analytics的Site Speed的Page Timing報表中。只要你正確安裝了ga的統計代碼就會自動收錄。

不過有些時候我們會對另外一些時間量度感興趣，比如某一個第三方的js文件載入花了多少時間，再比如用戶填寫網頁上某一個表單用了多久時間等等。本文HubSpot One將通過Simo Ahava在他最新博文中所舉的一個例子來向讀者介紹跟踪統計用戶計時的方法。

用戶計時（User Timing）

打開GA的Site Speed中的User Timing報表，你會發現其中內容是空的。那是因為你並沒有定義你要跟踪的用戶用時。 GA提供了JavaScript接口讓你可以把這些數據推送到GA。

參數	類型	必選	描述
timingCategory	String	是	用於測量數據的分組類別名稱（如：jQuery）
timingVar	String	是	用於記錄測量數據的變量的名稱（如：JavaScript載入）
timingValue	Number	是	毫秒數（千分之一秒），如果該值為負將無法被處理。
timingLabel	String	否	用於進一步區別變量從而在報表中體現（如：Google CDN）

推送的方法如下，後四個即為上述四個參數：

ga(‘send’, ‘timing’, ‘jQuery’, ‘Load Library’, 20, ‘Google CDN’);

由此我們可以看到用戶用時的推入方法和Event事件的推入方法非常相似。

跟踪用戶表單填寫用時

我們再舉一個例子來實現統計每個表單項的用戶用時。這對了解用戶是否能夠順利使用表單有相當多的指導意義。我們分成幾步：

1. 建立一個自定義HTML標籤（Custom HTML Tag）

這個標籤就是為了新建幾個監聽器，當用戶焦點進入這個輸入框和退出這個輸入框時我們記錄下其間隔距離，然後將其數據推送到DataLayer用於和GTM的DataLayer進行數據交換。代碼如下，HubSpot One添加了一些中文註釋，以便各位理解：

( function ( ) {

//假設表單的ID為commentform

var form = document . querySelector ( ‘#commentform’ ) ;

var fields = { } ;

//當焦點進入控件時獲取時間

var enterField = function ( name ) {

fields [ name ] = new Date ( ) . getTime ( ) ;

}

//當焦點離開控件時獲取時間並將結果推送到數據層

var leaveField = function ( e ) {

var timeSpent ;

var fieldName = e . target . name ;

var leaveType = e . type ;

if ( fields . hasOwnProperty ( fieldName ) ) {

timeSpent = new Date ( ) . getTime ( ) – fields [ fieldName ] ;

//這裡我們也可以調整到大於10，因為有些時候我們快速按Tab會產生不必要的數據。

if ( timeSpent > 0 && timeSpent < 1800000 ) {

window . dataLayer . push ( {

‘event’ : ‘fieldTiming’ ,

‘timingCategory’ : ‘評論表單項填寫耗時’ ,

‘timingVariable’ : fieldName ,

‘timingLabel’ : leaveType ,

‘timingValue’ : timeSpent

} ) ;

}

delete fields [ fieldName ] ;

}

if ( form ) {

//建立監聽器，三者分別為，進入焦點，未更改離開焦點，更改後離開焦點

form . addEventListener ( ‘focus’ , function ( e ) { enterField ( e . target . name ) ; } , true ) ;

form . addEventListener ( ‘blur’ , function ( e ) { leaveField ( e ) ; } , true ) ;

form . addEventListener ( ‘change’ , function ( e ) { leaveField ( e ) ; } , true ) ;

}

} ) ( ) ;

</script>

這個標籤我們會調用在有表單的頁面，所以觸發器我們會選擇表單所在的頁面集合。

2. 在Google Tag Manager中建立數據層變量

我們接著按照下面的部署新建四個數據層變量：

Name: {{DLV – timingCategory}}
Data Layer Variable Name: timingCategory
Name: {{DLV – timingVariable}}
Data Layer Variable Name: timingVariable
Name: {{DLV – timingLabel}}
Data Layer Variable Name: timingLabel
Name: {{DLV – timingValue}}
Data Layer Variable Name: timingValue

3. 新建一個自定義的觸發條件

我們曾經介紹過新版的GTM中你需要在變量中激活內建的Event變量，方法如下圖所示：

接著我們新建一個Custom Event變量，名字就叫event。當event為fieldTiming時，我們觸髮用戶用時標籤。或者我們直接建一個Custom Event標籤，當Event Name為fieldTiming時觸發。

4. GA推送標籤

最後我們只需要推送這個標籤即可。詳細的做法如下所示：

大功告成後我們便可以測試發布了。

總結

以上的例子中我們用GA的API記錄了用戶的行為的花費時間並推送給GA。這是我們網站分析中極為實用的。但是在實現的過程中我們要注意的是GA對每個會話中的交互次數有500次的上限，因此在記錄哪些，放棄哪些的問題上我們要斟酌。當你收集到了足夠的訊息後，你就可以在Site Speed -> User Timing中對你收集的訊息進行分析。你可以研究哪些字段用戶填寫起來有些困難，以及從次數統計上發現用戶到第幾步發生放棄表單填寫的行為。