CODEWITHSUNDEEP
javascriptgoogle-analytics
Dhananjay
Dhananjay

Reputation: 1225

Dynamically change the <script> tag src

Dynamically change the src tag

I am integrating Google analytics into my Angular app. It requires to add a google tracking id in the script-src and later. It needs to load at first before anything else.

While it works fine for one env, I wanted to have different Ids for different enviorment.

I am trying something like:

<script>
    var googleTrackingId;
      switch (window.location.hostname) {
          case 'mycompany.com':
            googleTrackingId = 'UA-123123-3'; // production
              break;
          case 'staging.mycompany.com':
            googleTrackingId = 'UA-123123-2'; // staging
              break;
          default:
            googleTrackingId = 'UA-123123-1'; // localhost
      }
  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=${googleTrackingId}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', googleTrackingId);
  </script>

But the src tag is not changing.

Upvotes: 1

Views: 1016

Answers (2)

Anis R.
Anis R.

Reputation: 6902

Using Javascript, you can get the <script> element by ID, and append whatever you want to the element's src attribute.

Edit: You can alter the script element immediately when it is loaded, using the script's onload event handler:

var analyticsScript = document.getElementById('analytics');
analyticsScript.onload = function() {
  analyticsScript.src += '?id=3wrwerf45r3t36y645y4';
  console.log(analyticsScript.src);
}
<script src='https://some_source' id="analytics"></script>

Why your approach does not work

In your HTML code, you are trying to use template literals here:

<script async src="https://www.googletagmanager.com/gtag/js?id=${googleTrackingId}"></script>

However, template literals work in Javascript, not in HTML (at least not to my knowledge). Also, template literals are wrapped inside backticks (`), not double quotes (") !

Upvotes: 2

mrReiha
mrReiha

Reputation: 955

You can find the desired tracking ID based on hostname first, then create the <script> tag.

<script>

    var googleTrackingId;
      switch (window.location.hostname) {
          case 'mycompany.com':
            googleTrackingId = 'UA-123123-3'; // production
              break;
          case 'staging.mycompany.com':
            googleTrackingId = 'UA-123123-2'; // staging
              break;
          default:
            googleTrackingId = 'UA-123123-1'; // localhost
      }

      document.write( '<scr' + 'ipt async src="https://www.googletagmanager.com/gtag/js?id=' + googleTrackingId + '"></scr' + 'ipt>' );

  </script>

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

Upvotes: 3

Related Questions