为具有 # 次浏览量的单页网站启用谷歌分析 [英] Enable google analytics for single page site with # views

问题描述

我读过类似的问题，但我的问题略有不同.

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

模板如下:

<script id="tab_1" type="text/x-kendo-template">//第一页<script id="tab_2" type="text/x-kendo-template">//第二页<script id="tab_3" type="text/x-kendo-template">//第三页<script id="tab_4" type="text/x-kendo-template">//第四页

页面在域下: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 获取了代码:

1) 问题 1，因为我只喜欢跟踪这个注册页面，我已经阅读了 google 的文档，developers.google.com/analytics，这段代码能用吗?

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

2) Question2，如何让GA获取4个不同标签页的数据?我是否必须修改 onlick 操作来跟踪事件?或者只是简单地跟踪锚标签?我从 跟踪哈希 URL 中阅读了一些内容，将这段代码适用于我的情况吗?由于可能需要一些时间来显示分析性，因此现在无法对其进行测试:

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

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

解决方案

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

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

改成这样:

并且在每个标签点击事件中，添加相应的代码来跟踪点击了哪些标签:

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

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

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

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

来源

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

这篇关于为具有 # 次浏览量的单页网站启用谷歌分析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！