阻止gtag /全局站点标签跟踪初始页面加载 SPA即 Vue、React 等

编程问答 2022-12-07

问题描述

我们有一个使用Gtag（全球站点标签）的页面应用程序，并且我们手动管理页面跟踪，以提供我们要跟踪的正确页面名称。所以我们打电话

gtag('config',gaPropertyId,gtagPageConfig)

每次都改变路线。

这意味着我们不希望gtag自动为我们跟踪页面，因为我们当前跟踪所有初始页面两次。第一次是gtag通过发送浏览器标题和URL自动触发对页面的跟踪，第二次是当我们从代码中触发页面视图时，为我们要查看的页面提供标题在Google Analytics（分析）中。

经过大量研究和调试，我将其范围缩小到设置屏幕，在该屏幕上选中了“页面加载”，并且无法将其禁用，请参见以下图片：

Unable to prevent page loads

我们这样加载脚本：

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxx-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js',new Date());
    gtag('config','G-xxx',{ 'send_page_view': false });
</script>

当我删除行gtag('js',new Date());时，它不再跟踪页面，但这可能会导致某些不良行为。

我们是否可以阻止初始页面加载跟踪？我到处搜索过，但找不到解决方法。

解决方法

简单地说，您不应该在不想向 Google 发送任何数据的页面上包含这些字段：

gtag('js',new Date());
gtag('config','G-xxx');

你的代码片段应该是这样的，没有日期和配置：

<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxx"></script>
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}

发送数据

SPA（即 Vue、React 等）

如果您使用的是 SPA（即 Vue、React），您可以在路由更新后运行 gtag 函数：

gtag('js','G-xxx',{ page: path: route.path,page_title: route.meta.title })

PHP

您可以有条件地显示日期和配置：

<?php if (/* suits my needs*/): ?>
  gtag('js',new Date());
  gtag('config','G-xxx');
<?php endif; ?>
,

文档中介绍了有关衡量网页浏览量的信息：

要禁用默认的网页浏览匹配，请在gtag.js代码段中将send_page_view参数设置为false。

gtag('config','GA_MEASUREMENT_ID',{
  send_page_view: false
});

https://developers.google.com/analytics/devguides/collection/gtagjs/pages

google-analyticsgtag.js