javascript 为具有 # 次浏览量的单页网站启用谷歌分析
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18626788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable google analytics for single page site with # views
提问by JavaScripter
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_1would be injected into app_containercontainer.
我正在使用 Kendo UI 为站点实现单页注册处理页面。该站点有 4 个页面，当用户单击菜单选项卡时会动态生成这些页面。例如，当用户单击菜单上的 tab1 时，tab_1将被注入到app_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.
该页面位于域下：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
当用户单击菜单中的选项卡时，http 链接地址更改为：
www.xxxxxxxx.com/register.html#/p1
www.xxxxxxxx.com/register.html#/p2
www.xxxxxxxx.com/register.html#/p2
www.xxxxxxxx.com/register.html#/p3
www.xxxxxxxx.com/register.html#/p3
www.xxxxxxxx.com/register.html#/p4
www.xxxxxxxx.com/register.html#/p4
I've grabbed the code from GA:
我从 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?
1）问题1，因为我只喜欢跟踪这个注册页面，我已经阅读了谷歌的文档，developers.google.com/analytics，这个代码能用吗？
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:
2）问题2，如何让GA获取4个不同标签页的数据？我是否必须修改 onlick 操作来跟踪事件？或者只是简单地跟踪锚标签？我从Tracking Hash URLs 中读到了一些内容，这些代码是否适用于我的情况？由于显示分析性可能需要一些时间，因此现在无法测试：
_gaq.push(['_trackPageview', "/" + window.location.hash]);
where shall I put this line of code to if it is working for this single page application?
如果这行代码适用于这个单页应用程序，我应该把它放在哪里？
回答by Solomon Closson
Answer 1: Yes this will work perfectly fine: ga('send', 'pageview', '/register.html');
回答 1：是的，这将工作得很好： 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');
标签1点击事件： ga('send', 'event', 'tab1', 'clicked');
Tab 2 click event: ga('send', 'event', 'tab2', 'clicked');
标签2点击事件： ga('send', 'event', 'tab2', 'clicked');
Tab 3 click event: ga('send', 'event', 'tab3', 'clicked');
Tab 3 点击事件： ga('send', 'event', 'tab3', 'clicked');
Tab 4 click event: ga('send', 'event', 'tab4', 'clicked');
Tab 4 点击事件： ga('send', 'event', 'tab4', 'clicked');
