一页有多个 Google Analytics 4 脚本跟踪器

Briefly:主要想法是我有一个集成了 Google Analytics 4 (GA4) 的网站和一个集成到该网站中的独立小部件，该网站也具有 GA4。结果，事件被发送到两个跟踪器。我如何才能将其彼此隔离？

详细的：有 2 个 React Web 应用程序。其一是parent-website 和另一个集成在它的小部件中（作为 React 应用程序，使用 Webpack 构建成 2 个文件 - js 和 css）。该小部件可以通过脚本标签和 CSS 链接集成到任何网站。这个小部件需要有谷歌分析。但一个parent-网站还可以集成谷歌分析。 如果这parent-网站有Universal Analytics，没关系，发送的事件是隔离的，但如果两者都有新的GA4麻烦就发生了。

我尝试在react-ga4库的帮助下将GA集成到两个[测试]应用程序中。结果，两个跟踪器帐户都会获取从小部件和父网站发送的所有事件。 并且还尝试在父网站中手动添加脚本标签和小部件应用程序react-ga4库中使用。而且所有事件都无处不在。Inspect

然后我尝试手动添加 GA4 脚本，并为两个跟踪器设置两个配置。同样的情况也会发生 - 所有事件都会发送到两个跟踪器。

主要问题如何隔离事件发送？

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID_1"
        ></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag() {
            dataLayer.push(arguments);
          }
          gtag("js", new Date());
    
          gtag("config", "TRACKING_ID_1");
        </script>
    
        <!-- Global site tag 2 (gtag.js) - Google Analytics -->
        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID_2"
        ></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag() {
            dataLayer.push(arguments);
          }
          gtag("js", new Date());
    
          gtag("config", "TRACKING_ID_2");
        </script>

我认为您需要稍微修改一下 gtag 事件代码。

请拍一下这个文件.

gtag('event', 'sign_in', { 'send_to': 'G-XXXXXX-2' });

主要思想是添加一个参数调用send_to并要求事件仅发送到跟踪 ID。

如果您需要配置多个跟踪ID。

您只需配置第二个跟踪器

无需添加<script> again

<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID_1"></script>

<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "TRACKING_ID_1");
gtag("config", "TRACKING_ID_2");
</script>