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
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
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:
From the the image, I have:
- The Tracking ID
- Code snippet containing the Tracking ID
Alright, this is where it gets exciting. Yaye!!!
React.js
In you React Project, locate your public/index.html and Paste the code snippet in the head tag like in this project here.
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.
Return to your google analytics dashboard and click on the Home Icon. You should have one user registered like in the image below:
Walah!!! You have successfully installed Google analytics in your React website
Next.js
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.
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>
`,
}}
/>
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:
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.
Thank You For Your Time.
Top comments (6)
The above option doesn't work for
NextJSas at July 2020Check this stackoverflow answer if you're experiencing the error below:
Unexpected token <Thank you for the update
Does this register a new page visit on all navigation changes?
I wouldn’t be too sure but I think it does because from the report on my dashboard, it shows visits to individual pages
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 therouteChangeCompletenextjs 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 usingnext/link. So this issue only applies tonext/linkclicks or pushing onto the router.Thank you for this update.
I will check it out