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

发布于 2025-01-15 19:49:45 字数 486 浏览 0 评论 0原文

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

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

但我不确定是否以及如何发送同意更新。这个模块是否可行，或者我必须使用标准 gtag HTML 代码段？ react-gtm-module 可以执行标准 gtag() 调用可以执行的所有操作吗？

原文

In my React SPA, I use npm module react-gtm-module to connect it to GTM. I can send events, using this syntax:

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

but I am not sure if and how I can send consent updates. Is it possible with this module, or will I have to use the standard gtag HTML snippet? Can react-gtm-module do everything that standard gtag() calls can?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝影如岚 2025-01-22 19:49:45

我的建议是，如果您想为您的 SPA React 应用默认启用 Google 标签同意，请不要使用 react-gtm-module。我认为目前不可能。

我在过去的 3 个小时里一直在尝试，包括使用标签助手进行调试（转到谷歌标签管理器并单击“预览”按钮，您可以在本地主机上测试您的设置）。但问题是，react-gtm-module 没有通过 API 添加默认同意，也无法更新同意值。

手动设置 google tag 并不难，它允许您使用它们的最新功能，而不依赖于文档很少的软件包。

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

步骤：

转到 Google 标签管理器，选择您的容器，
在概览操作中点击您的标签 ID（例如 GTM-XXXXXXX），
按照说明操作，将代码段添加到您的 index.html 页面

这 3 个步骤是在 react-gtm-module 中初始化()函数的作用

然后，

在加载 google 标签的脚本上方添加另一个代码段（在）。此脚本将在执行任何其他 google 标签操作之前将默认同意值发送到 google 标签管理器（这就是您想要的！！）

    <!-- 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 -->

如果您使用 typescript 则添加 global.d.ts

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

export {};

现在您可以在代码中使用 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 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

My advice, don't use react-gtm-module if you want to enable the google tag consent by default for your SPA react app. I don't think its possible at the moment.

I've been trying for the last 3 hours, including debugging with the tag assisant (go to google tag manager and click the Preview button, you can test your setup on localhost). But the problem is that the react-gtm-module does not add the default consent via the API and also has no way of updating the consent values.

Its not that hard to setup google tag manually and it will allow you to use their latest funcionalities without depending on a package with very little documentation

In step 5 you see that you need an extra script to run even before the google tag script is loaded. It will tell the google tag to set the consent values by default to denied, and later on in your custom cookie banner you can set the consent to true if the user clicked accept.

Steps:

Go to google tag manager, select your container
Click your tag id in the overview op (eg GTM-XXXXXXX)
follow the instructions, add the snippets to your index.html page

These 3 steps is what the initialize() function does in react-gtm-module

Then,

add another snippet above the script that loads the google tag (above ). This script will send the default consent values to google tag manager, before any other google tag actions are taken (this is what you want!!)

    <!-- 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 -->

add a global.d.ts if you are using typescript with

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

export {};

now you can use gtag functions in your code.

  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));
  };

references:

code example: https://github.com/googleanalytics/ga4-tutorials/blob/main/src/public/partials/consent.eta
instruction source: https://support.google.com/analytics/answer/9976101
instruction video: https://www.youtube.com/watch?v=MqAEbshMv84&t=220s&ab_channel=GoogleAnalytics

回复收藏 0 原文

扶醉桌前 2025-01-22 19:49:45

我缺少的是定义 gtag() 函数：

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

令我困惑的是 Google 文档不包含 dataLayer.push() 调用，仅包含 gtag() 调用。定义函数后，可以立即使用文档中的代码片段。

What I was missing was defining the gtag() function:

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

It confused me that the Google documentation did not include the dataLayer.push() calls—only the gtag() calls. After defining the function, the code snippets from the docs can be used right away.

回复收藏 0 原文