DEV Community

NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on • Updated on

Google Analytics installation - React and Next.js

Google Analytics 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
Next.js

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

Alt Text

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

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!!!

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.

  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

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

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. 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. So you should have something like this:

        <script
          dangerouslySetInnerHTML={{
            __html: `
                <code snippet goes here>
              `,
          }}
        />
Enter fullscreen mode Exit fullscreen mode

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

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 | LinkedIn | Github

Thank You For Your Time.

Top comments (6)

Collapse
 
briantuju profile image
Brian

The above option doesn't work for NextJS as at July 2020

Check this stackoverflow answer if you're experiencing the error below:

Unexpected token <

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you for the update

Collapse
 
cullylarson profile image
Cully Larson

Does this register a new page visit on all navigation changes?

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

I wouldn’t be too sure but I think it does because from the report on my dashboard, it shows visits to individual pages

Collapse
 
cullylarson profile image
Cully Larson • Edited

I just tested and it does not register pageviews on all navigation changes, just the initial load. You may have a "history change trigger" set up in Google Tag Manager. That will register a pageview on all history changes. But without that, just adding the GA code to <Head> will not register pageviews on navigation. This is because nextjs doesn't reload the page, it just does a prop update and lets React re-render as it needs to. To get pageviews on navigation changes, you need to do something like listen for the routeChangeComplete nextjs router event and push a pageview when it triggers.

Also, to be clear, nextjs will do a refresh if you use a plain <a> for links, instead of using next/link. So this issue only applies to next/link clicks or pushing onto the router.

Thread Thread
 
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you for this update.

I will check it out