Javascript Google Analytics：如何在单页应用程序中跟踪页面？

目前在我的网站中，我在链接中使用HTML5和

popState

来提高速度。然而，这并不会真正改变真正的URL，而且它看起来会影响并弄乱用户的代码。（不显示url更改）是否有可能的解决方案？谢谢，

如果您使用的是较新的

analytics.js

API，则需要以下代码来触发事件：

ga('send', 'pageview', '/some-page');

如果您使用的是较旧的

ga.js

API，AJAX网站将使用

\u gaq.push

方法：

_gaq.push(['_trackPageview', '/some-page']);

---

在撰写本文时，2013年9月，
谷歌分析有一个新的JavaScript API。

包含Google新的“analytics.js”异步代码段后，使用send pageview命令跟踪页面：

ga（'send'，'pageview'）

在pushState疯狂之后，使用此send pageview命令跟踪异步导航。根据，send pageview命令将神奇地读取和跟踪pushState给定的新位置，在调用send pageview命令时，默认情况下使用以下值（尽管您可以指定它们）：

注意，Google的标准分析代码段包括一个初始的sendpageview命令。



更新：
我已经在我的网站上实现了Google Analytics跟踪，正如我前面描述的那样——但是，它似乎没有成功地跟踪任何pushState页面视图

我将尝试在sendpageview命令中显式指定位置、标题和页面名称，并查看GA是否正确跟踪

除非我忘了，否则我会发回结果。
我也有ga（“发送”、“页面浏览”）的问题；，使用history.pushState后

解决方法只是使URL显式。
ga（'send'、'pageview'、'/myURL'）
我知道这是一个老问题，但由于这个问题是谷歌关于在谷歌分析中跟踪pushState（）的第一个结果，而且所有答案都是错误的，所以我决定回答它

在其他答案中，他们提到直接使用ga（“发送”…），但这是一种错误的方式

首先，您必须“设置”参数，然后使用“发送”跟踪它

如果只想更新url，请使用以下代码


//设置新的url
ga（‘设置’、‘页面’、‘新页面’）；
//发送跟踪
ga（‘发送’、‘页面浏览’）最近的答案（2017年）
您现在可以使用谷歌的，这是一个增强
analytics.js
的脚本

它包括一个插件，自动跟踪单页应用程序的URL更改

您只需要在html中包含脚本和以下行：

ga('require', 'urlChangeTracker');

2018年2月更新-全球站点标签（gtag.js）
Google Analytics有一个新的跟踪代码片段，因此其他答案可能不适用于gtag

这是默认的跟踪代码。它只运行一次，即使我们尝试在每次URL更改时运行它

gtag('config', 'GA_TRACKING_ID');

但是使用
page\u path
参数，我们可以手动运行GA

gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});

我们可以做这样的东西

var origin = window.location.protocol + '//' + window.location.host;
var pathname = window.location.href.substr(origin.length);
gtag('config', 'GA_TRACKING_ID', {'page_path': pathname});

2020年更新
如果您使用的是
Google Analytics 4
，则如果您在数据流菜单中启用了增强测量功能中的页面视图选项，则无需再推送事件

使用
ga（'send'，'pageview'）
未在ga上注册页面视图

我的工作方式是：

window.ga.getAll（）[0]。设置（'page'，location）；
window.ga.getAll（）[0]。发送（'pageview'）；

我可以在用
历史记录更改url后使用它。pushState
。没关系，找到了。它确实更改了真实的url。在支持历史API的浏览器中，pushState应该更改地址栏和位置栏中的URL。它没有做的是更改加载的资源。这取决于您，这是历史API的全部要点。@gWiz-我的意思是它不像正常情况下那样请求新页面，脚本也没有重新加载。这篇文章提供了最合理的解释，您可能仍然希望了解事件跟踪，它对“ajaxy”应用程序很有好处。您可以跟踪的不仅仅是页面视图。因此，如果您仅使用pushState（）更改url，然后调用“u gaq.push”（[''u trackPageview'）它在GA中不起作用？@VinnyG:一年多以后，有了新的analytics.js sdk——它就可以起作用了。我的答案中有更多细节。尽管我对这个答案投了更高的票，但我相信它有点过时，正确的答案是@Nicolo写的。目前的文档建议先使用
set
命令，然后使用
send
，例如
ga（'set'，'page'，'/new page.html'）；ga（'send'，'pageview'）；
.bump。您的测试结果如何？无需担心。测试了我自己和ga（'send'，'pageview'））在历史记录之后，导航不会发送更新的URL。@gWiz:我相信我从来没有让页面视图跟踪工作过，即使我使用了Google Analytics Debugger（浏览器扩展名）为了确认我的实现将页面浏览点击正确地发送到了谷歌……但从未收到。我最终非常沮丧。因此我退出并离开了谷歌分析。现在我只使用cPanel的awstats:）这似乎不是对主要问题的回答，也许它更适合作为对ChaseMoskal答案的评论+1用于包含源代码参考。说
ga（'send'，'page'，'newpage'）；
是错误的可能有点苛刻。
源代码建议
'send'
这一点，但随后说如果你发送其他点击（例如事件或社交点击）”，你应该使用
'set'
。这必须是一个公认的答案（参见我之前的评论）直到当前的一个不是最新的，我相信这在您想要跟踪页面片段（又称散列，又称为#之后的所有内容）的场景中不会有帮助。
var origin = window.location.protocol + '//' + window.location.host;
var pathname = window.location.href.substr(origin.length);
gtag('config', 'GA_TRACKING_ID', {'page_path': pathname});