CODEWITHSUNDEEP
javascripthtmlgoogle-analyticsgtag.js
Petar Petrovic
Petar Petrovic

Reputation: 215

Reading a tracking ID from env variable and using it in GA script tag in head section of HTML file

I have a tracking ID that i should pass as an environment variable to a Google Analytics script that is included in head section of HTML file.My question is what is the easiest way to do that as src tag cannot use literal string.This is the snippet:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXX-1');
</script>

I just need to replace every appearance of "UA-XXXX-1" with process.env.GA_TRACKING_CODE and i tried with https://www.googletagmanager.com/gtag/js?id={process.env.GA_TRACKING_CODE} but its not possible so any ideas?

Upvotes: 2

Views: 1601

Answers (2)

URL_Flip
URL_Flip

Reputation: 163

I came across this question while asking myself the same question and would like to add what I found. I'll first explain my thinking and then give you concrete code.

Since you have access to process.env, I assume you are constructing a Single-Page-Application (SPA) in node-based frontend framework, for example React, Vue.js or Angular. I view the question as:

How do I dynamically put something in my SPA's index.html file, specifically in the head-tag?

What I'd recommend is to find an early time in your whole SPA's life-cycle to run a function, lets call it injectGtagScript(). It will get process.env.GA_TRACKING_CODE, construct the script-tags and inject it into your head-tag. That early time would likely be in a js-file that is run to set everything up, called something like app.ts or main.js depending on your framework. A pro of this is that you can setup collection of GA-events before you've even created your SPA's top component, so you can be completely sure that the collection does not miss any page views or other events. By inject I mean using vanilla JS to manipulate the HTML-DOM, which we are used to thinking of as ugly when working with SPA's, but remember that this is outside the actual SPA tree of components in a static html-file. I found that way of solving the problem in an npm-package for Angular that does this: https://github.com/maxandriani/ngx-google-analytics/blob/master/projects/ngx-google-analytics/src/lib/initializers/google-analytics.initializer.ts#L82 Furthermore, Google's method of doing this would probably be with Google Tag Manager, which is a tool just for injecting script-tags into static html, so that is really what you're doing in the background in that case.

Here is a snippet with an example of how I'd write injectGtagScript()

export function injectGtagScript() {
  const tagId = process.env.GA_TRACKING_CODE;
  const s: HTMLScriptElement = document.createElement('script');
  s.async = true;
  s.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
  const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
  head.appendChild(s);
}

That should answer the question at hand. With this solution comes the follow-up how to call gtag() like you did in your snippet. There I'd recommend writing a version of it in the dynamic code dynamicGtag() and call it from there right after you run injectGtagScript(). A snippet for this is:

export function dynamicGtag() {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push(arguments);
}

So now you can run the following in your app.js or corresponding:

injectGtagScript();
dynamicGtag('js', new Date());
dynamicGtag('config', process.env.GA_TRACKING_CODE);

Upvotes: 1

Igor Ostapiuk
Igor Ostapiuk

Reputation: 619

<script async src="https://www.googletagmanager.com/gtag/js?id={{env('GOOGLE_ANALYTICS_ID')}}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '{{env('GOOGLE_ANALYTICS_ID')}}');
</script>

Upvotes: 0

Related Questions