Global Site Tag (gtag) in React Js without npm package

Analytics is an important key to get overall overview of the performance of any website. We have already discussed a bit about website analytics in previous article Analytics in React Js App with Google Analytics and the process to integrate Google Analytics. Now, here we will be implementing Global Site Tag (gtag) with react js in plain js (without npm package).

Global Site Tag designed to use the entire Google suite and third parties and simplify the labeling, exchange and analysis between different products. It makes processes easier by keeping tags from different products in one place of code without requiring additional accounts or separate interface to manage.

We can use an already existing npm package for react to integrate Google Analytics to reduce the workload. But risk of using non-official npm packages are that if you run into any issues, might not be able to resolve it due to limited resources available about the package.

While going with vanilla JS version, we might be able to find the solution as there are plenty of resources available about Google Analytics.

Here we can find the process to install gtag in web page.

Add gtag.js to your site

To install the global site tag, add the following code in the head tag or immediately after the head tag of index.html page of your React app inside public folder.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  window.gtag = gtag;
  gtag('js', new Date());
</script>

Here, we added a line of code window.gtag = gtag; in the code we copied form Google Analytics after defining gtag function. This makes gtag function always available via window.gtag

Page view tracking

Our react js app is SPA. We installed the gtags.js in index.html of public folder. React router page routing is not recorded until page refresh. So, on each route we have to post the page view event manually. For that, we can add following code in the top level component which gets executed when the location path changes.

componentDidUpdate(prevProps){
    if (this.props.location !== prevProps.pathname) {
        window.gtag("config", "GA_MEASUREMENT_ID", {
            page_title: this.props.location.pathname,
            page_path: this.props.location.pathname,
        })
    }
}

Above code is executed only when the component as well as the location path gets updated.

Event Tracking

Event tracking means recording any record able event in the page while user interacts with the page. We can track different events like click on buttons and links, login events, sale events, scroll events, etc. Be sure to track business-specific events that are important for the website.

We will define a method that we will call when any events occurs, that we want to track.

function gtagEvent(ACTION, category, label, value) {
    window.gtag("event", "<ACTION>", {
        event_category: "<category>",
        event_label: "<label>",
        value: "<value>"
    })
}

We simply call the gtagEvent method to record any event inside the page. As we have access to window.gtag anywhere inside our app, we can record events as required. Find more about event tracking here.