在不重新加载页面的情况下使用Google Analytics跟踪URL变化

Question

我有一个按钮，它会触发JS并根据随机逻辑返回不同的模态框。 为了保持无缝流畅的体验，我不能重新加载页面，但我需要追踪哪个模态框被打开，以及其中点击的是哪个按钮。

我可以利用JS window.location改变URL来追踪所显示和点击的内容。

window.location.hash = 'clicked1'

这将会改变我的URL，变成www.site.com/#clicked1或者www.site.com/#clicked2。问题是，我如何在Google Analytics中跟踪它呢？

有人能指导我理清这个过程吗？我应该使用事件跟踪吗？还是我可以在不重新加载页面的情况下跟踪URL？

- jonny pixel

Answer 1

这里有一篇关于如何使用Google Analytics跟踪单页应用程序的文章。要跟踪动态加载内容以区分页面访问量，您可以向Google Analytics发送一个页面访问量命中，并通过设置页面字段来指定文档路径。请参考链接：single page application。

ga('send', 'pageview', '/#clicked1);

通常在发送点击事件之前，最好先更新跟踪器对象中的页面信息。这将确保所有点击事件都与正确的页面数据相关联。

要更新跟踪器对象，请使用set方法：

ga('set', 'page', '/#clicked1);

如果您想更新的不仅是页面字段，还可以将键/值对的对象传递给set方法。

ga('set', {
  page: '/#clicked2',
  title: 'Clicked 2'
});

一旦跟踪器已更新新页面的相关数据，您可以发送一个打点信号（hit）而无需覆盖与页面相关的参数。例如：

ga('send', 'pageview');

- Matt

Answer 2

如果您正在使用 analytics.js:

ga('set', 'page', '/your-own-path');
ga('set', 'title', 'Your custom title');
ga('send', 'pageview');

如果你在使用 gtag.js：

gtag('config', 'UA-0000000-1', {
   'page_title' : 'Your custom title',
   'page_path': '/your-own-path'
});

如果您正在使用GTM，您可以使用任何您想要的dataLayer键；以下是一个示例：

dataLayer.push({
   event: 'pageview',
   page: {
      path: '/your-own-path',
      title: 'Your custom title'
   }
});

一个很棒的文章，解释了不同的技术（其中的示例是直接引用自它）：https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics/

- Philippe