Autotrack,菜鸟的高级GA锦囊

Autotrack,菜鸟的高级GA锦囊

Autotrack,菜鸟的高级GA锦囊

极诣不遗余力地推了GTM两年,有多少读者真正开始用了呢?没有搭建在GTM上的Google Analytics就像一个不完整的产品,用下来的感觉就只能用一句话概括:太麻烦了!Google的GA团队也深知九成的GA用户只不过把GA代码在网页中一扔,而这九成中又有九成九只关心PV和访问这些最基本的数据。一个多月前GA的博客发布了GA的Autotrack插件,这个插件的问世将填补菜鸟用户对GA应用的鸿沟。本周极诣就将带读者了解一下Autotrack的使用。请注意,即便是菜鸟,Noob中的Noob你也需要有一点点HTML的皮毛知识。那么我们开始吧。

Autotrack是什么

Autotrack是基于Universal Analytics的analytics.js的插件包。Autotrack并非是GA根正苗红的产品,它仅仅是GA的开发者关系团队自发创作的为了解决菜鸟用户90%的跟踪需求的插件包。目前这个插件包包括了6大插件,Autotrack总大小也只有3KB。因此我们可以轻松地把它全部载入,而不必担心取舍问题导致的js包大小。

插件描述
eventTracker跟踪Event
mediaQueryTracker跟踪屏幕环境(响应式版本,分辨率,移动设备方向)
outboundFormTracker外链表单跟踪
outboundLinkTracker外链点击跟踪
socialTracker自动以及强化社交分享跟踪
urlChangeTracker单页面应用的URL变化跟踪

如果你对GTM得心应手,那么以上这些跟踪自然只是小把戏。但是对大多数用户,这个插件可以极大地拓展自己能获得的数据的丰富性。

安装Autotrack

如果你还在使用ga.js即传统的GA,那么很抱歉还请你升级成Universal Analytics。因为Autotrack是基于analytics.js的。如果你使用的是标准的UA安装代码,那你的代码会是这样的:

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXX-Y‘, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

你需要的仅仅是将代码替换成下面的代码(标红的是你的GA的Property ID):

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga(‘create’, ‘UA-XXXXX-Y‘, ‘auto’);
ga(‘require’, ‘autotrack’);
ga(‘send’, ‘pageview’);
</script>
<script async src=’https://www.google-analytics.com/analytics.js’></script>
<script async src=’path/to/autotrack.js‘></script>

接下来要注意的是绿色的部分,你可以下载autotrack.js放置在你自己的服务器上,绿色的部分就是你存放的路径,这个路径可以是一个相对路径也可以是一个绝对路径,如:http://yoursite.com/autotrack.js。替换了每个页面的UA安装代码以后,就安装完毕了。通常来说,我们要对它进一步配置。不过为了不让本文变得非常复杂,我们跳过接下去直接举一个应用的例子。

Autotrack使用实例一,跟踪按钮点击

我们常用的按钮标签是<button>按钮文字</button>。如果我们要跟踪这个按钮用户点了多少次,并且将它通过GA的Event记录下来。原始的做法是在响应回调的时候的同时调用ga的方法:

ga(‘send’, ‘event’, ‘Videos’, ‘play’, ‘Fall Campaign’);

这种方法非常难维护,因为js代码到处都是很容易就丢了。如果安装了Autotrack就简化了,只需要改button的标签:

<button
data-event-category=”Videos”
data-event-action=”play”
data-event-label=”Fall Campaign”>
Play Now
</button>

超级简单是不是?事实上不单是button标签其他DOM元素标签也可以使用。只要你添加了这几个标签属性,Autotrack插件就会起作用。我们在GTM中是用gtm.click这个消息,一样可以实现这个效果。

Autotrack使用实例二,跟踪外链点击和外部表单提交

我们知道默认的GA是无法跟踪外链点击的。因为在点击后访客就离开了你的网站。你安装的js代码自然也失效了。表单提交也一样,结果的页面并没有安装你的GA代码。贴心的Autotrack就可以帮你跟踪这些用户行为。下面我们介绍一下使用方法:

使用方法就是你不需要做任何事情!Autotrack会自动帮你用GA Event的形式记录下这些用户行为。

对于外链点击你可以在ga:eventCategory==Outbound Link,ga:eventAction==click找到;相应地ga:eventCategory==Outbound Form,ga:eventAction==submit。

更多其他Autotrack的详细应用详见以下参考链接:

https://ga-dev-tools.appspot.com/autotrack/

https://github.com/googleanalytics/autotrack/

http://analytics.blogspot.hk/2016/02/introducing-autotrack-for-analyticsjs.html