使用#view为单页网站启用Google Analytics

时间:2013-09-05 02:28:54

标签: javascript jquery html google-analytics single-page-application

我已经阅读了类似的问题,但我的问题略有不同。

我正在使用Kendo UI为网站实施单页注册处理页面。该网站有4个页面,这是用户单击菜单选项卡时动态生成的。例如,当用户点击菜单上的tab1时,tab_1会被注入app_container容器。

模板如下:

<div id="app_container"></div>
<script id="tab_1" type="text/x-kendo-template">
//first page
</script>
<script id="tab_2" type="text/x-kendo-template">
//second page
</script>
<script id="tab_3" type="text/x-kendo-template">
//third page
</script>
<script id="tab_4" type="text/x-kendo-template">
//fourth page
</script>

该网页位于以下网址:www.xxxxxxxx.com/register.html

当用户单击菜单中的选项卡时,http链接地址更改为: www.xxxxxxxx.com/register.html#/p1

www.xxxxxxxx.com/register.html#/p2

www.xxxxxxxx.com/register.html#/p3

www.xxxxxxxx.com/register.html#/p4

我抓住了GA的代码:

<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-XXXXXXX-1', 'xxxxxxxx.com');
  ga('send', 'pageview');

</script>
问题1,因为我只是想跟踪这个注册页面,我已经阅读了谷歌的文档developers.google.com/analytics,这个代码会有效吗?

ga('send', 'pageview', '/register.html');

2)问题2,如何启用GA获取4个不同标签页的数据?我是否必须修改单击操作才能跟踪事件?或者只是简单地跟踪锚标签?我从Tracking Hash URLs读到了一些内容,这些代码能否适用于我的情况?由于显示分析可能需要一些时间,现在无法测试:

_gaq.push(['_trackPageview', "/" + window.location.hash]);

如果它适用于这个单页应用程序,我应该把这行代码放在哪里?

1 个答案:

答案 0 :(得分:8)

答案1:是的,这将完全正常:ga('send', 'pageview', '/register.html');

如果它们位于正在执行代码的页面上,则不需要第3个参数。如果未定义第3个参数,它将自动获取正在运行代码的当前页面。但是,此参数允许您自己设置页面,如果您需要将页面视图发送到除正在执行代码的页面之外的其他页面,这可能很有用。

改为:

<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-XXXXXXX-1', 'xxxxxxxx.com');
  ga('set', 'page', '/register.html');
  ga('send', 'pageview');
</script>

在每个标签点击事件中,添加相应的代码以跟踪点击的标签:

标签1点击事件:ga('send', 'event', 'tab1', 'clicked');

标签2点击事件:ga('send', 'event', 'tab2', 'clicked');

标签3点击事件:ga('send', 'event', 'tab3', 'clicked');

标签4点击事件:ga('send', 'event', 'tab4', 'clicked');

Source