javascript Google Analytics：如何在单页应用程序中跟踪页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9628547/
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
Google Analytics: How to track pages in a single page application?
提问by u283863
Currently in my website, I used HTML5's pushState()and popStatein links to increase the speed. However, this doesn't really change the realURL and it looks like it will affect and mess up the Google Analytics's code. (doesn't show a url change) Is there a possible solution for this? Thanks,
目前在我的网站中，我使用 HTML5pushState()和popState链接来提高速度。然而，这并没有真正改变真实的URL，而且看起来它会影响和弄乱Google Analytics的代码。（不显示网址更改）是否有可能的解决方案？谢谢，
回答by u283863
If you are using the newer analytics.jsAPI, Google's documentationrequires the following code to trigger the event:
如果您使用较新的analytics.jsAPI，Google 的文档需要以下代码来触发事件：
ga('send', 'pageview', '/some-page');
If you are using the older ga.jsAPI, David Walsh suggestsAJAX websites to use the _gaq.pushmethod:
如果您使用的是旧ga.jsAPI，David Walsh 建议AJAX 网站使用该_gaq.push方法：
_gaq.push(['_trackPageview', '/some-page']);
回答by Nicolo
I know it's old question but since this question is first result in Google about tracking pushState() in Google Analytics and all answers are wrong I decided to answer it.
我知道这是个老问题，但由于这个问题是谷歌关于在谷歌分析中跟踪 pushState() 的第一个结果，而且所有答案都是错误的，我决定回答它。
In other answers they mentioned to use directly ga('send' ..... ) but this is wrong way to do it.
在其他答案中，他们提到直接使用 ga('send' ..... ) 但这是错误的方法。
First you have to 'set' parameters and then use 'send' to track it.
首先，您必须“设置”参数，然后使用“发送”来跟踪它。
If you want to update only url, use following code
如果您只想更新 url，请使用以下代码
// set new url
ga('set', 'page', '/new-page');
// send it for tracking
ga('send', 'pageview');If you want to update url and title, add title parameter to it
如果要更新 url 和标题，请为其添加标题参数
// set new url and title
ga('set', {
page: '/new-page',
title: 'New Page'
});
// send it for tracking
ga('send', 'pageview');Source Single Page Application Tracking - Web Tracking (analytics.js)
回答by GG.
Recent answer (2017)
最近的回答（2017）
You can now use Google's autotrack.js, a script that enhances analytics.js.
您现在可以使用谷歌的autotrack.js，脚本增强analytics.js。
It includes a plugin that automatically tracks URL changesfor single page applications.
它包含一个插件，可以自动跟踪单页应用程序的URL 更改。
You just need to include the script and the following line in your html:
您只需要在 html 中包含脚本和以下行：
ga('require', 'urlChangeTracker');
回答by ozgrozer
February 2018 Update - Global Site Tag (gtag.js)
2018 年 2 月更新 - 全球网站代码 (gtag.js)
Google Analytics has a new tracking code snippet, so the other answers might not work for gtag.
Google Analytics 有一个新的跟踪代码段，因此其他答案可能不适用于 gtag。
This is the default tracking code. It only runs once even though we try to run it each URL changes.
这是默认的跟踪代码。即使我们尝试在每次 URL 更改时运行它，它也只会运行一次。
gtag('config', 'GA_TRACKING_ID');
But with a page_pathparameter we can make GA run manually.
但是通过一个page_path参数，我们可以手动运行 GA。
gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});
And we can make something like this.
我们可以做这样的事情。
var origin = window.location.protocol + '//' + window.location.host;
var pathname = window.location.href.substr(origin.length);
gtag('config', 'GA_TRACKING_ID', {'page_path': pathname});
Single page application tracking with gtag.js (Google documentation)
回答by ChaseMoskal
At the time of writing, here in September 2013,
Google Analytics has a new JavaScript API.
在撰写本文时，即 2013 年 9 月，
Google Analytics 有一个新的 JavaScript API。
After you've included Google's new "analytics.js" asynchronous snippet, use the send pageview commandto track pages:
在您包含 Google 的新“ analytics.js”异步代码段后，使用send pageview 命令来跟踪页面：
ga('send','pageview');
ga('send','pageview');
After your pushState madness, use this send pageview commandto track your asynchronous navigation. According to Google's Documentation on Page Tracking with Analytics.js, the send pageview command will magically read and track the new location given by pushState,as it will, in the moment the send pageview commandis called, use the following values by default (though you can specify them):
在你的 pushState 疯狂之后，使用这个发送页面浏览命令来跟踪你的异步导航。根据Google's Documentation on Page Tracking with Analytics.js，send pageview 命令将神奇地读取和跟踪 pushState 给出的新位置，因为它会在调用send pageview 命令的那一刻，默认使用以下值（尽管您可以指定它们）：
var locationToTrack = window.location.protocol+'//'
+window.location.hostname
+window.location.pathname
+window.location.search;
var titleToTrack = document.title;
var pathToTrack = location.pathname+location.search;
Note, Google's standard analytics snippet includes an initial send pageview command.
请注意，Google 的标准分析代码段包括一个初始发送页面浏览命令。
Update:
更新：
I've implemented Google Analytics tracking on my website in the way above that I described -- however, it does not seem to be successfully tracking any of the pushState page views.
我已经按照上面描述的方式在我的网站上实施了 Google Analytics 跟踪——但是，它似乎没有成功跟踪任何 pushState 页面浏览量。
I'm going to try specifying the location, title, and page name explicitly on the send pageview command, and see if GA tracks properly.
我将尝试在发送 pageview 命令上明确指定位置、标题和页面名称，并查看 GA 是否正确跟踪。
I'll post back with the results, unless I forget.
除非我忘记了，否则我会将结果发回。
回答by Tiago
I also had problems with ga('send','pageview');, after using history.pushState.
在使用 history.pushState 之后，我也遇到了 ga('send','pageview'); 问题。
The workaround was simply make the URL explicit. ga('send','pageview','/my-url')
解决方法只是使 URL 显式。ga('send','pageview','/my-url')
