DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Alejo Garcia
Alejo Garcia

Posted on • Originally published at reactshark.com

How to install GA in React (Easiest way in 2021)

Introduction

I'm very excited to be writing this article, such as it is coming from one of my favorite topics, which apart from being React, is Search Engine Optimization.

Google Analytics is the key step for any SEO process.

It is used to track conversions, look at demographics, and events.

It also helps keep track of how your traffic is behaving.

The idea behind GA is to have a solid understanding of not only knowing how many visitors do you have, but also why they are on your website, and what are they doing there.

Having said that I'm going to show you the EASIEST way, for you to install GA in a React app and start tracking visitors accordingly.

A little caution with this method is that you may not want to use this for the long run or use it for big web apps.

Ideally, this article is for those who just want to have GA in their React app, and don't want to spend more than 5 minutes in the process.

How to install Google Analytics in React.js (Easiest way)

First step: Get your Global site tag (gtag.js)

Go to your Google Analytics account

And search for Data Streams, and click on it

Screen capture of Data Streams

Click on your data stream

Image of data stream
A copy your gtag.js

Gtag screen capture in GA

Second step: Paste the g.tag.js inside index.html (located in the public folder)

Do you know the public folder when you do npx create-react-app?

Well, what we are going to do is to paste the exact script that Google Analytics gives us, and paste it in our index.html inside our public folder.

Folder structure screenshot
Inside index.html we are going to paste the exact g.tag code at that GA gave to us:

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

  gtag('config', 'GA-CODE');
</script>
</html>
Enter fullscreen mode Exit fullscreen mode

So in some sense, we are not going to be working with JSX, and you can even say without React.

The issue with this method

This technique will allow you to install GA in a really simple and bugless manner.

It is dead simple, and for landing pages made with React, I think it works great.

But for a blog like this one or even a full web app you might need to go the react-ga route.

Read more articles like this one on:

reactshark.com

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.