如何在网页上管理不同的 Google 分析跟踪代码

Question

现在我正在构建博客站点以使用 Angular universal 介绍各种品牌，并打算在用户访问每个品牌的博客时实施 GA 跟踪。

超级管理员拥有整个网站的 GA 跟踪 ID，而且每个博客都有自己的适合品牌的跟踪 ID。因此，当用户阅读文章时，应该在两个 GA 指标仪表板上对其进行跟踪 - 第一个是主仪表板，另一个是每个品牌的仪表板。

但是我在同时为不同的跟踪 ID 触发 pageview 事件时遇到了一些麻烦。第一个 GA 事件成功触发，但第二个事件发生错误。

Here is the code.

google-analytics.service.ts

public appendGaTrackingCode(franchise_code, tracking_code, gtm_code) {
    try {
      const script = document.createElement('script');
      script.setAttribute('id', 'tracking_code');
      script.type = 'text/javascript';
      script.innerHTML = `
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
        ga('create','${franchise_code}','auto');
        ga('send','pageview');
        ga('create','${tracking_code}','auto');
        ga('send','pageview');
        ga('require','displayfeatures');
        setTimeout(ga('send','event','Profitable Engagement','time on page more than 3 minutes'),180000);
      `;
      document.head.appendChild(script);
      if (gtm_code) {
        const script_2 = document.createElement('script');
        script_2.setAttribute('id', 'gtm_code');
        script_2.type = 'text/javascript';
        script_2.innerHTML = `
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${gtm_code}');
        `;
        document.head.appendChild(script_2);

        const no_script = document.createElement('noscript');
        no_script.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtm_code}"
        height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
        document.body.appendChild(no_script);
      }
    } catch (ex) {
    }
  }

如您所见，franchise_code 用于主要 GA 跟踪，tracking_code 用于品牌。

如果我遗漏了什么，请告诉我。

谢谢。

Answer 1

如果您在一个页面上启动了多个分析跟踪器，您需要为它们命名并在每个 ga('send'.. ) 调用中传递跟踪名称：

ga('create', 'UA-XXXXX-Y', 'auto');
ga('create', 'UA-XXXXX-Z', 'auto', 'otherTracker');
ga('send', 'pageview');
ga('otherTracker.send', 'pageview');

这里是the docs.

如何在网页上管理不同的 Google 分析跟踪代码

How to manage different Google Analytics tracking codes on web page

javascript

google-analytics

google-tag-manager

angular-universal

angular