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

Question

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

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

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

然后我尝试手动添加 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>

Answer 1

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

请考虑一下这份文件。

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

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

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

您只需配置第二个跟踪器

无需<script>再次添加

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