Question

我在单页应用程序中都使用了GTM和GA。为了跟踪每个网址更改的综合浏览量，我在GTM中编写了代码和触发器，并能够在每个网址更改的情况下跟踪GA中的网址。但是如何在每次更改URL时跟踪页面加载事件？这是我的大问题。据我所知，我们仅使用正常的ga操作跟踪网址并在网站上的每个页面加载时发送综合浏览量。

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

我应该如何跟踪gtm或ga中SPA的页面加载事件。

Answer 1

如果您使用的是GTM，则可以使用“历史记录更改”触发器设置标准的GA页面视图标记，以触发虚拟页面视图。如上所述，“历史记录更改”触发器完全用于单页应用程序。

在GTM中，点击您的GA标签，然后转到触发器->新建->触发器配置->历史记录更改

您可以在GTM支持页面here上了解有关此内容的更多信息。

Answer 2

对于SPA，您希望以其他方式配置GTM触发器。如果您以这种方式为SPA配置了标准的“所有页面”触发器，则将在所有页面加载时触发，并且您的SPA位于example.com/myapp，那么当SPA加载时，您将在GA中看到该URL的综合浏览量。

一旦加载了SPA，后续的路由/屏幕更改将不会再次触发GTM中的此GA标签。

我发现最通用的是在路由过程中使用custom events和datalayer来管理它们。

例如，在您的SPA中，当路由到新屏幕时，您可以将以下内容推送到数据查看器：

dataLayer.push({
    'my-page-title': 'My App - Screen 1',
    'my-page-path': '/my-screen-1',
    'event': 'my-screen-load'});

您可以将“我的应用-屏幕1”和“ / my-screen-1”替换为变量以使其具有动态性，但这是SPA设计的一部分，如果要动态或静态，则完全由您自己决定

完成此操作后，在GTM中，您将设置2个变量，1个触发器和1个GA标签：

变量： 您将在GTM中创建一个“数据层变量”，并引用datalyer对象中的“ my-page-path”键。像这样：我想为错误检查设置一个默认值，以防万一有人触发了该事件并且没有在数据分析器中为其提供值并且该值尚未设置，则默认值将捕获该事件。对“我的页面标题”键进行相同的操作。

触发在GTM中创建一个“自定义事件”触发器，引用“我的屏幕加载”事件，确保为“此触发器触发”选择“所有自定义事件”，如下所示：

GA代码 在GTM中创建一个新的Google Analytics（分析）标记。输入正确的设置（ID或设置变量）。然后在“更多设置->要设置的字段”下，将“页面”和“标题”添加为两个字段，以设置和使用各自的GTM变量名称。然后添加我们刚刚创建的触发器。例：

这应该允许您跟踪SPA中的屏幕浏览。