使用＃个视图为单页网站启用Google Analytics [英] Enable google analytics for single page site with # views

问题描述

我读过类似的问题，但我的问题稍有不同。

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

模板如下：

 < div id =app_container><<< ; / DIV> 
< script id =tab_1type =text / x-kendo-template> 
 //第一页
< / script> 
< script id =tab_2type =text / x-kendo-template> 
 //第二页
< / script> 
< script id =tab_3type =text / x-kendo-template> 
 //第三页
< / script> 
< script id =tab_4type =text / x-kendo-template> 
 //第四页
< / script> 
  

该网页位于 www.xxxxxxxx.com/register域名下。当用户点击菜单中的选项卡时，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> 
 
（函数（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 ， '脚本'， '// www.google-analytics.com/analytics.js','ga'）; 
 
 ga（'create'，'UA-XXXXXXX-1'，'xxxxxxxx.com'）; 
 ga（'send'，'pageview'）; 
 
< / script> 
  

1）Question1，因为我只想跟踪这个注册页面，所以我已经阅读了google的文档， developers.google.com/analytics ，此代码是否可以正常工作？

  ga（'send'，'pageview'，'/register.html'）; 
  

2）问题2，如何启用GA以获取4个不同标签页的数据？我必须修改onlick动作来跟踪事件吗？或者只是简单地跟踪锚标签？我已阅读跟踪哈希网址的内容，将这些代码适用于我的情况？因为显示分析可能需要一些时间，所以现在无法进行测试：

  _gaq.push（['_ trackpageview'， /+ window.location.hash]）; 
  

如果这行代码适用于单页应用程序，我应该在哪里放置这行代码？ p>

解决方案

回答1：是的，这会很好地工作： ga（'send'，'pageview'，' /register.html'）;

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

更改为：

 < 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'）; code>

来源

I've read the similar questions, but my question is slightly different.

I am implementing a single page registration processing page for a site using Kendo UI. The site has 4 pages which was generated dynamically when user clicks menu tabs. For example, when user clicks tab1 on the menu, then tab_1 would be injected into app_container container.

templates as below:

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

The page is under the domain: www.xxxxxxxx.com/register.html.

when user clicks the tabs in menu, then the http link address changed to this: www.xxxxxxxx.com/register.html#/p1

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

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

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

I've grabbed the code from 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) Question1, as I just only like to track this registration page, I've read google's documentation, developers.google.com/analytics,will this codes work?

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

2) Question2, how to enable GA to get data for 4 different tab pages? Do I have to modify onlick actions to track the event? or just simple track the anchor tag? I've read something from Tracking Hash URLs, will this codes work for my situation? As it may take some time to show analystic, can't test it now:

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

where shall I put this line of code to if it is working for this single page application?

解决方案

Answer 1: Yes this will work perfectly fine: ga('send', 'pageview', '/register.html');

You don't need the 3rd parameter if they are on the page where the code is being executed. It will automatically grab the current page where the code is being ran from if the 3rd parameter is undefined. But than this parameter allows you to set the page yourself, which could be useful if you need to send a pageview to a different page other than the page that the code is being executed on.

change to this:

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

And in each tabs click event, add the corresponding code to track which tabs are clicked:

Tab 1 click event: ga('send', 'event', 'tab1', 'clicked');

Tab 2 click event: ga('send', 'event', 'tab2', 'clicked');

Tab 3 click event: ga('send', 'event', 'tab3', 'clicked');

Tab 4 click event: ga('send', 'event', 'tab4', 'clicked');

Source

这篇关于使用＃个视图为单页网站启用Google Analytics的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！