使用react-gtm-module设置Google跟踪代码管理器同意

Question

在我的 React SPA 中，我使用 npm 模块 react-gtm-module 将其连接到 GTM。我可以使用以下语法发送事件：

  window.dataLayer.push({
    event: 'calc_price_btn'
  })

但我不确定是否以及如何发送同意更新。这个模块是否可行，或者我必须使用标准 gtag HTML 代码段？

react-gtm-module

可以做标准

gtag()

调用可以做的所有事情吗？

Answer 1

我缺少的是定义

gtag()

函数：

window.gtag = function(){
  window.dataLayer.push(arguments)
}

令我困惑的是，Google 文档 不包含

dataLayer.push()

调用，仅包含

gtag()

调用。定义函数后，可以立即使用文档中的代码片段。

Answer 2

您实际上不需要做任何特殊的编程。

这将更多是GTM中的配置。

有很多社区模板可以管理此操作，但我会选择 Simo Ahava 的 https://www.simoahava.com/custom-templates/consent-mode/

在GTM添加新标签时搜索即可。

然后您将能够通过更新将某些事件推送到数据层，如下图所示。

Answer 3

我的建议，如果您想默认为 SPA React 应用程序启用 google tag 同意，请不要使用

react-gtm-module

。我认为目前不可能。

过去 3 小时我一直在尝试，包括使用标签助手进行调试（转到 google 标签管理器并单击“预览”按钮，您可以在本地主机上测试您的设置）。但问题是

react-gtm-module

没有通过 API 添加默认同意，也无法更新同意值。

手动设置谷歌标签并不难，它将允许您使用它们的最新功能，而无需依赖于文档很少的软件包

在步骤 5 中，您会发现即使在加载 google 标签脚本之前也需要运行额外的脚本。它将告诉 google 标签将同意值默认设置为拒绝，稍后在您的自定义 cookie 横幅中，如果用户单击“接受”，您可以将同意设置为 true。

步骤：

1. 转到谷歌标签管理器，选择您的容器
2. 在概览选项中单击您的标签 ID（例如 GTM-XXXXXXX）
3. 按照说明操作，将片段添加到您的index.html页面

这3步就是initialize()函数在

react-gtm-module

中所做的事情

那么，

4. 在加载 google 标签的脚本上方添加另一个片段（位于

   <!-- Google Tag Manager -->

   上方）。在采取任何其他谷歌标签操作之前，此脚本会将默认同意值发送到谷歌标签管理器（这就是您想要的！！）

    <!-- Google Tag Manager consent -->
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }

      if (localStorage.getItem('consentMode') === null) {
        gtag('consent', 'default', {
          ad_storage: 'denied',
          analytics_storage: 'denied',
          personalization_storage: 'denied',
          functionality_storage: 'denied',
          security_storage: 'denied',
        });
      } else {
        gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
      }
    </script>
    <!-- Google Tag Manager -->
    
    <!-- End Google Tag Manager -->

5. 如果您使用 typescript

   ，请添加 

   global.d.ts

declare global {
  interface Window {
    gtag: (...args: any[]) => void;
  }
}

export {};

6. 现在您可以在代码中使用 gtag 函数。

  interface IConsentMode {
    necessary: boolean;
    marketing: boolean;
    analytics: boolean;
    preferences: boolean;
  }
  const setConsentMode = (consent: IConsentMode) => {
    const consentMode = {
      functionality_storage: consent.necessary ? 'granted' : 'denied',
      security_storage: consent.necessary ? 'granted' : 'denied',
      ad_storage: consent.marketing ? 'granted' : 'denied',
      analytics_storage: consent.analytics ? 'granted' : 'denied',
      personalization: consent.preferences ? 'granted' : 'denied',
    };
    window.gtag('consent', 'update', consentMode);
    localStorage.setItem('consentMode', JSON.stringify(consentMode));
  };

参考资料：

• 代码示例：https://github.com/googleanalytics/ga4-tutorials/blob/main/src/public/partials/consent.eta
• 说明来源：https://support.google.com/analytics/answer/9976101
• 教学视频：https://www.youtube.com/watch?v=MqAEbshMv84&t=220s&ab_channel=GoogleAnalytics