CODEWITHSUNDEEP
javascriptangulargoogle-analyticsgoogle-tag-managerangular-universal
Sergio Reis
Sergio Reis

Reputation: 3286

How to manage different Google Analytics tracking codes on web page

Now I'm building the blog site to introduce various brands using Angular universal and am going to implement the GA tracking when the user visit the blog for each brand.

The Super Admin has GA tracking id for whole site and also each blog has own tracking id for appropriate brand. So while the user reads the article, it should be tracked on two GA metric dashboards - first one is main dashboard and another is for each brand's one.

But I have some troubles in firing pageview event for different tracking ids in same time. First GA event is fired successfully but second is occurring the error.

Here is the code.

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

As you can see there are franchise_code which is for main GA tracking and tracking_code for brand.

Please let me know if I'm missing something.

Thanks.

Upvotes: 0

Views: 177

Answers (1)

Дмитро Булах
Дмитро Булах

Reputation: 3847

if you have several analytics trackers initiated on a page you need to have them named and pass the tracked name in each ga('send'.. ) call:

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

Here are the docs.

Upvotes: 1

Related Questions