Autotrack v1.0发布,GA高级设置轻松搞定

大约在5个月前,极诣曾经特地撰文介绍Autotrack这个GA插件集。这个不是亲儿子胜过亲儿子的插件集在8月初正式发布了1.0版。Google Analytics的官方博客也喜大普奔详尽介绍了其新特性和区别。

从旧版本升级Autotrack

如果你是旧版本的Autotrack用户那么请注意你需要对你已经部署的代码进行更改。以往只要一行ga(‘require’, ‘autotrack’)就可安装的大礼包现在需要一个一个插件安装。也就是说你需要用几个插件就装几个插件,如下面这样:

ga(‘require’, ‘eventTracker’);
ga(‘require’, ‘outboundLinkTracker’);
ga(‘require’, ‘urlChangeTracker’);

这个更改是为了避免网站安装所以插件后出现一些“意外”。

接下来你只要下载autotrack.js这个文件覆盖掉旧的文件即可。

这次更新开发团队还加入了多种语言的使用说明,查看中文技术文档请点击这里。部分已翻译。

Autotrack新版本的新特性

对新手Web Analyzer来说Autotrack是一套非常好用的插件。这次更新主要添加了几个新插件,分别是Impression Tracker,Clean URL Tracker和Page Visibility Tracker。

Impression Tracker

Impression Tracker可以帮助你检测是否页面上的一个元素真实可见。我们知道广义上的Impression是浏览器读取一次就算作一次的。即便某些元素,如图像,视频在页面底部需要访问者向下探索才能看到也会被算作一个展现(Impression)。这是不科学的,也是会对我们的决策产生干扰的。该插件使用了浏览器API中的IntersectionObserver,当元素出现在用户可视范围内时被触发。这项功能在Chrome 51以上版本默认适用,在其他浏览器上你需要载入polyfill

<script src=”path/to/intersection-observer.js”></script>

你可以把这个js文件放在你的服务器上。具体的用法是在加载插件时直接设定Option。

ga(‘require’, ‘impressionTracker’, {elements: [{id: ‘foo’, threshold: 0.5}, {id: ‘bar’, threshold: 0.5}]});

上面这个例子是指示当id为foo的元素或者id为bar的元素可见超过50%时触发一个GA的event。这个GA Event的category,action和label分别为Viewport,impression,元素id。

Clean URL Tracker

我们在GA报表中很多时候可以看到Page的URL后面会带斜杠/,带参数?,带文件名。那么如何把这些其实是同一页面的PageView聚合到一起呢?Clean URL Tracker就是起到这个作用。Clean URL Tracker的功能我们大多数可以用GA的过滤器功能实现。但是如果你对过滤器不是很熟悉的话也可以使用这个插件。使用方法和上面的插件非常类似。举个例子:

ga(‘require’, ‘cleanUrlTracker’, { stripQuery: true, queryDimensionIndex: 1, indexFilename: ‘index.html’, trailingSlash: ‘remove’ });

上面的这个代码片段说明我们需要把URL后面的参数去掉,同时把参数保存到自定义的维度,再去掉所有的index.html,最后去掉斜杠。这里需要注意的是queryDimensionIndex仅支持Hit-level的自定义维度。以下三种情况最后被推送到GA的都会是/contact。

  • /contact/
  • /contact?hl=en
  • /contact/index.html

第二种情况的hl=en会被推送到dimension1中。

Page Visibility Tracker

生活中我们时常会遇到这样一种情况,你打开了某个网页,扫了一眼,也不关掉,然后去忙其他的事情了。而对于某些单页面应用来说很多页面也许根本就不曾关闭。这种情况下,传统的PageView以及Session的统计显得有些“过时”了。为了解决这一问题Autotracker开发组为我们提供了pageVisibilityTracker插件。如果你使用了此插件,当你的页面打开后,用户查看别的浏览器标签,离开几小时或几天后再回来时会计算作一个新的PageView和新的Session。

该插件的原理是监听浏览器visibilitychange的事件。如果之前的Session过期了的话会推送一个新的Session和PageView给GA。这里大家仍然要注意的是浏览器版本的兼容性问题。比如IE浏览器至少要10以上才能支持。当你开启此插件后,你会发现页面访问数和访问量增加了。这不是什么错误,只是因为过去未能抓取的数据现在可以被收集了。

下面来介绍一下用法:

ga(‘require’, ‘pageVisibilityTracker’, options);

激活插件的方法很类似,关键在于options参数。极诣在此简要介绍一下:

  • sessionTimeout参数决定多少分钟以后Session过期,默认值是30(分钟)
  • changeTemplate方法用于覆盖原有的eventLabel。
  • hiddenMetricIndex和visibleMetricIndex用于设置自定义指标索引,生效之后该页面有多少秒可见,多少秒不可见(被其他页面覆盖)就会被记录于其中。下面的示例1。
  • fieldsObj用于GA加载的参数设置,如nonInteraction我们可以设置成null,这样每一次触发Event都会成为一个Interaction。这样你会发现Average Time On Page和Average Session Duration会延长。下面的示例2。
  • hitFilter参数可以更自由地操控Model对象,篇幅关系,不便展开。下面的示例3。

下面举几个例子:

  1. ga(‘require’, ‘pageVisibilityTracker’, { hiddenMetricIndex: 1, visibleMetricIndex: 2, });
  2. ga(‘require’, ‘pageVisibilityTracker’, { fieldsObj: { nonInteraction: null } });
  3. ga(‘require’, ‘pageVisibilityTracker’, { hitFilter: function(model) { model.set(‘dimension1’, String(model.get(‘eventValue’)), true); } });

让Web Analytics更科学更智能

极诣通过对Autotrack v1.0的介绍揭示了我们在网站分析上的新思路。互联网从一片混沌到如今的各种可靠的衡量方法在过去的十年间有着长足的进步。笔者依稀记得当年打开最老版本的Google Analytics时的那种兴奋之情。Web Analytics是数字营销的基石,它将会在未来的几年内持续颠覆我们在数字广告上的认识。

在介绍早先版本的Autotrack时极诣曾经说如果你对GTM不太了解,那么Autotrack是一个很好的替代方式。在进化到1.0之后,我们发现Autotrack的新功能仍然需要部署一定的代码量并且对JS需要有足够的基础。这就出现了一个在Autotrack这个插件集和GTM之间取舍的问题,而“不需要写代码”变成了一个很弱的理由。那么你会怎么选择呢?

感谢关注极诣!