Google Analytics installation - React and Next.js
Tags: react, javascript, tutorial, todayilearned
Published: 2020-04-14 10:16:34

[Google Analytics](https://analytics.google.com/analytics/web/provision/#/provision) provides us with a means to track users, browsers and devices that visit our website. It is good to know that this is a free tool.

### Jump to tutorial
[React.js](#1)
[Next.js](#2)

In this article, I am going to be guiding you through installing google analytics on React.js and Next.js projects. I noticed a number of tutorials that make this a bit complex than it should be so I thought I should make this post to help people like me.

In case you are completely new, you will need to have a **gmail account** with which you should please visit the [homepage](https://analytics.google.com/analytics/web/provision/#/provision)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fj8s3woq5wnia0c97qux.JPG)

Follow the **"Set Up for Free"** or **"Start Measuring"** button  as the case may be, to create a project. It is pretty straight forward. That should bring you to this page:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l5flubk60zi4uki52te9.JPG)

From the the image, I have:
1. The **Tracking ID**
2. Code snippet containing the **Tracking ID**

Alright, this is where it gets exciting. Yaye!!!

<a name="1"></a>
### React.js
1. In you React Project, locate your **public/index.html** and Paste the code snippet in the *head* tag like in this project [here](https://github.com/EBEREGIT/covid-19/edit/master/public/index.html).

2. Save your work and start your development server **(npm start)** if you have not done so and wait for you project to load on the browser.

3. Return to your google analytics dashboard and click on the **Home Icon**. You should have one user registered like in the image below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1c730gi9qemc9mhv6q0g.JPG)

Walah!!! You have successfully installed Google analytics in your **React** website

<a name="2"></a>
### Next.js
1. In your Next.js Project, locate where you have your **Head** component setup. Some persons do it in **_document.js** file and others might use a custom component like I am using in this [project](https://github.com/EBEREGIT/COVID-19-barter-trade). I named it **Layout**.

2. Unlike React where we pasted the code snippet exactly as we got it, we will need to put it in a back tips closing like in this [project](https://github.com/EBEREGIT/COVID-19-barter-trade/blob/master/components/Layout.js). So you should have something like this:

```javascript
        <script
          dangerouslySetInnerHTML={{
            __html: `
                <code snippet goes here>
              `,
          }}
        />
```

Next, Save your work and start your development server **(npm run dev)** if you have not done so and wait for you project to load on the browser.

FInally, Return to your google analytics dashboard and click on the Home Icon. You should have one user registered like in the image below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1c730gi9qemc9mhv6q0g.JPG)

Walah!!! You have successfully installed Google analytics in your **React** website

## Conclusion 
We have seen how to to simply install Google Analytics on our Reactjs and Nextjs websites and those are pretty straight forward. Please don't forget to leave a **star** on my github projects you may have visited while going through this tutorial.

The one user you are seeing on your Google Analytics dashboard is **YOU**. When you finally deploy your project, you will see more users as they visit your website.

Other ways to do this installation is through ``react-ga`` for React.js and ``next-ga`` for Next.js.

If you have questions, comments or suggestions, please drop them in the comment section.

You can also follow me and message me on social media platforms. 

**[Twitter](https://twitter.com/eberetwit) | [LinkedIn](https://www.linkedin.com/in/samson-ebere-njoku-profile/) | [Github](https://github.com/EBEREGIT)**

Thank You For Your Time.