在每次 url 更改时跟踪单页应用程序的 GA 页面加载事件

Question

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

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

我应该如何在 gtm 或 ga 中跟踪页面加载事件以用于 SPA。

Answer 1

如果您使用的是 GTM，则可以使用 "History Change" 触发器设置标准 GA 页面查看代码以触发虚拟页面查看。 "History Change" 触发器完全用于您描述的单页应用程序。

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

您可以在 GTM 支持页面 here 上阅读更多相关信息。

Answer 2

对于 SPA，您希望以不同方式配置 GTM 触发器。标准 "All pages" 触发器会在所有页面加载时触发，如果您以这种方式为您的 SPA 配置它，并且您的 SPA 是示例。com/myapp 那么您将看到 URL 的综合浏览量在 SPA 加载时在 GA 中。

加载 SPA 后，后续 routing/screen 更改将不会再次在 GTM 中触发此 GA 标签。

我发现最通用的是在路由期间使用custom events and datalayer来管理这些。

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

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

您可以用变量替换 'My App - Screen 1' 和 '/my-screen-1' 以使其动态化，但这是您 SPA 设计的更多部分，如果您想要它是动态的还是静态的，则完全取决于您.

完成后，您将在 GTM 中设置 2 个变量、1 个触发器和 1 个 GA 代码：

变量： 您将在 GTM 中创建一个 "Data Layer Variable"，引用 datalyer 对象中的 "my-page-path" 键。像这样：我喜欢为错误检查设置一个默认值，以防万一有人触发了这个事件，但没有在 datalyer 中为它提供值，而且它还没有设置，默认值会捕捉到它。对 'my-page-title' 键执行相同的操作。

触发器 在 GTM 中创建一个 'Custom Event' 触发器，引用 'my-screen-load' 事件，确保你 select "all custom events" for "this trigger fires on" 像这样：

GA 标签 在 GTM 中创建一个新的 Google Analytics 标签。输入正确的设置（ID 或设置变量）。然后在 "more settings -> fields to set" 下添加 "page" 和 "title" 作为两个字段来设置和使用各自的 GTM 变量名称。然后添加我们刚刚创建的触发器。例子：

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

在每次 url 更改时跟踪单页应用程序的 GA 页面加载事件

Track page load event of GA for Single page application on every url change

google-analytics

event-tracking

google-tag-manager