Google Analytics单页面应用url地址无法监听解决方案

来源:互联网 发布:java加大数据 编辑:程序博客网 时间:2024/05/22 15:25

自从 Google Analytics 问世以来,Web 已经发生了很大改变。在当时,大多数网站实际是由单独的页面组成,通过点击链接并发出整页请求从一个页面转到另一个页面。对于这样的网站,一个通用的 JavaScript 跟踪代码段 就可以跟踪到大部分相关的用户交互。

但如今的 Web 比以前要复杂多样。除了传统的静态网站,还有功能全面的 Web 应用。用户交互不限于点击链接和提交表单,而“页面查看”并不总是意味着整个页面加载。

Web 已经改变,但分析的实现方法基本还停留在原地。大多数 Google Analytics 用户只是复制粘贴默认的跟踪代码段,仅此而已。他们知道还可以用 Google Analytics 做更多事情,但往往不重视进行学习。

Autotrack for analytics.js 为这一问题提供了新解决方案。它试图在利用尽可能多的 Google Analytics 的同时尽量避免手动实现。它为开发人员提供了跟踪现代化 Web 相关用户数据的基础(autotrack.js学习网址: http://www.tuicool.com/articles/RJbayiI)
通过这个网站我们可以了解autotrack被开发出来的目的,在单页面应用中,由于页面不再是通过重新加载页面实现app的相应功能。所以很多时候,在url地址改变的时候,我们期望能够通过Google Analytics来搜集相关的页面改变事件的时候,Analytics.js却做不到,(并且html原声事件中貌似也没有可以监听地址栏变化的api,未禁实际认证,网上资料查询得知)。而autotrack.js却成功的解决了这个且不仅仅包括这个的很多棘手的问题,话不多说,直接上代码:

<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('***', '***', '***');</script>

上面是引用Analytics的最简单应用。
下面的代码是加了autotrack.js可以实时监测url地址栏变化的代码

<script async src='https://cdnjs.cloudflare.com/ajax/libs/autotrack/1.1.0/autotrack.js'></script><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('require', 'urlChangeTracker');ga('***', '***', '***');</script>

上面的地址https://cdnjs.cloudflare.com/ajax/libs/autotrack/1.1.0/autotrack.js可以在线引用autotrack.js文件。
以上

0 0