跟踪用户交互时长，简单的实例教程详解
|

跟踪用户交互时长，简单的实例教程详解

作者Hermes Ma
跟踪用户交互时长，简单的实例教程详解
跟踪用户交互时长，简单的实例教程详解

我们在分析网站的过程中无不例外地会关注网页载入时长。页面载入时长包括许多方面，如域名的解析，HTML的响应时间，服务器计算伺服时间，HTML下载时间，其他资源下载时间等。这些信息都包含在Google Analytics的Site Speed的Page Timing报表中。只要你正确安装了ga的统计代码就会自动收录。

不过有些时候我们会对另外一些时间量度感兴趣，比如某一个第三方的js文件载入花了多少时间，再比如用户填写网页上某一个表单用了多久时间等等。本文极诣将通过Simo Ahava在他最新博文中所举的一个例子来向读者介绍跟踪统计用户计时的方法。

用户计时（User Timing）

打开GA的Site Speed中的User Timing报表，你会发现其中内容是空的。那是因为你并没有定义你要跟踪的用户用时。GA提供了JavaScript接口让你可以把这些数据推送到GA。

[table width =”100%” style =” table-hover” responsive =”true”]
[table_head]
[th_column]参数[/th_column]
[th_column]类型[/th_column]
[th_column]必选[/th_column]
[th_column]描述[/th_column]
[/table_head]
[table_body]
[table_row]
[row_column]timingCategory[/row_column]
[row_column]String[/row_column]
[row_column]是[/row_column]
[row_column]用于测量数据的分组类别名称（如：jQuery）[/row_column]
[/table_row]
[table_row]
[row_column]timingVar[/row_column]
[row_column]String[/row_column]
[row_column]是[/row_column]
[row_column]用于记录测量数据的变量的名称（如：JavaScript载入）[/row_column]
[/table_row]
[table_row]
[row_column]timingValue[/row_column]
[row_column]Number[/row_column]
[row_column]是[/row_column]
[row_column]毫秒数（千分之一秒），如果该值为负将无法被处理。[/row_column]
[/table_row]
[table_row]
[row_column]timingLabel[/row_column]
[row_column]String[/row_column]
[row_column]否[/row_column]
[row_column]用于进一步区别变量从而在报表中体现（如：Google CDN）[/row_column]
[/table_row]
[/table_body]
[/table]

推送的方法如下，后四个即为上述四个参数：

[notification type=”alert-info” close=”false” ]ga(‘send’, ‘timing’, ‘jQuery’, ‘Load Library’, 20, ‘Google CDN’);[/notification]

由此我们可以看到用户用时的推入方法和Event事件的推入方法非常相似。

跟踪用户表单填写用时

我们再举一个例子来实现统计每个表单项的用户用时。这对了解用户是否能够顺利使用表单有相当多的指导意义。我们分成几步：

1. 建立一个自定义HTML标签（Custom HTML Tag）

这个标签就是为了新建几个监听器，当用户焦点进入这个输入框和退出这个输入框时我们记录下其间隔距离，然后将其数据推送到DataLayer用于和GTM的DataLayer进行数据交换。代码如下，极诣添加了一些中文注释，以便各位理解：

[notification type=”alert-info” close=”false” ]

<script>
(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>

[/notification]

这个标签我们会调用在有表单的页面，所以触发器我们会选择表单所在的页面集合。

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变量，方法如下图所示：

在变量中激活内建的Event变量
在变量中激活内建的Event变量

接着我们新建一个Custom Event变量，名字就叫event。当event为fieldTiming时，我们触发用户用时标签。或者我们直接建一个Custom Event标签，当Event Name为fieldTiming时触发。

4. GA推送标签

最后我们只需要推送这个标签即可。详细的做法如下所示：

将数据层内容推送给GA
将数据层内容推送给GA

大功告成后我们便可以测试发布了。

总结

以上的例子中我们用GA的API记录了用户的行为的花费时间并推送给GA。这是我们网站分析中极为实用的。但是在实现的过程中我们要注意的是GA对每个会话中的交互次数有500次的上限，因此在记录哪些，放弃哪些的问题上我们要斟酌。当你收集到了足够的信息后，你就可以在Site Speed -> User Timing中对你收集的信息进行分析。你可以研究哪些字段用户填写起来有些困难，以及从次数统计上发现用户到第几步发生放弃表单填写的行为。

类似文章