# Quickly adding Google Analytics to Next.js with FAQs
I use Google Analytics to track how many users are visiting websites that I develop on a weekly basis, how long they stay on the site and what are the most popular pages.
It's easy to add to your site and in minutes you'll go from having no clue how people are using your website to being able to record and analyse every detail on every interaction a user has with your website.
I'll split this post up into 3 parts:
1. What we're doing
2. How to add Google Analytics to Next.js
3. FAQs - A lot of the Google Analytics tutorials don't explain why you should do things a certain way. For example, why are we using this Next.js `_document.js` file and what does it do? or how to I get a `GA_MEASUREMENT_ID`?
**Key takeaway** if you're glancing at this article:
> *Adding Google Analytics to a Next.js project is easy and you can copy and paste the code below. I wouldn't use an external NPM module as you're just adding another dependency that can become outdated in the future.*
## Why add Google Analytics
> Google Analytics is a web analytics service offered by Google that tracks and reports website traffic.
I've recently begun adding Google Analytics to every website that I've developed including [wallisconsultancy.co.uk which I recently developed alongside a series of tutorial blog posts](https://dev.to/jameswallis/modernising-an-existing-bootstrap-website-using-next-js-and-tailwind-css-c2g). Google Analytics is great at tracking website usage and more, although I currently use it purely to monitor user count, most popular pages and page performance which is all reported on the Google Analytics dashboard.
*A Google Analytics dashboard*
In addition to the above, it's **free** and takes minutes to set up with a Next.js project (if you follow this post 😉).
## Adding Google Analytics to a Next.js project
### Prerequisites
1. A Next.js project hosted on a domain that can be used with Google Analytics preferably with at least one page. - [Vercel (creators of Next.js) is the easiest place to host your website](https://vercel.com/solutions/nextjs).
2. A Google Analytics account with a created property and the ID (known as a `GA_MEASUREMENT_ID`) that is given to you and is used to identify your website with Google. Keep the `GA_MEASUREMENT_ID` handy, you'll need it. - *I've covered this in the FAQs if you haven't used Google Analytics before*.
### Add/modify the `_document.js` file in your Next.js project
Create a [custom `_document.js`](https://nextjs.org/docs/advanced-features/custom-document) file in your `pages` directory and add the following code:
*If you're using TypeScript, check out this [custom `_document.tsx` on GitHub](https://github.com/james-wallis/TheVECentre/blob/main/pages/_document.tsx) instead.*
```jsx
import Document, {
Html, Head, Main, NextScript,
} from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
const GA_MEASUREMENT_ID = 'GA_MEASUREMENT_ID'; // Paste your GTAG here
return (
);
}
}
export default MyDocument;
```
If you've already got a custom `_document.js` then the key parts are within the `Head` component (remember to add the `GA_MEASUREMENT_ID` variable):
```jsx
```
Explanation:
* In the first `script` tag the Google Analytics JavaScript file is loaded into the browser.
* In the second `script` tag the Google Analytics code is initialised and tracking is started on the current page.
Once you've added your `GA_MEASUREMENT_ID` and pushed your changes into a live environment such as Vercel, you should see data appearing on your Google Analytics dashboard - if you don't, try visiting your website!
And that is all it takes to add Google Analytics to your Next.js application - told you it was easy!
## FAQs
### What does the code above load onto my website?
The `gtag.js` is a script which allows you to send event data to Google, in this case it's used for Google Analytics. Read more about it and the `GA_MEASUREMENT_ID` at [Google Developers - `gtag.js`](https://developers.google.com/analytics/devguides/collection/gtagjs).
### What is a `GA_MEASUREMENT_ID` and how do I get one?
The `GA_MEASUREMENT_ID` is the ID of the Google Analytics property that you want to collect data for. To get a `GA_MEASUREMENT_ID` you need to create a new property on Google Analytics - you can follow this [Google Support article to learn how to sign up to Google Analytics and create a property](https://support.google.com/analytics/answer/10269537).
### What are the `_document.js` and `_app.js` files in a Next.js project?
The Next.js specific `_document.js` and `_app.js` are two special files that live in the `pages` directory but are not rendered as pages by Next.js (you can't reach `/_document` in your browser).
*Note: The `Head` component used in `_document.js`'s `Head` different to `next/head` and should be used for common code on every page.*
`_document.js` is rendered server-side only and controls the `` and `` tags of HTML. It can be used to add custom elements into your `` tag that will be the same on every page such as the Google Analytics code or a favicon.
`_app.js` is rendered client-side, potentially on every page change. It's essentially a wrapper around each Next.js page that you have. It can be used to maintain a consistent layout on each page, add a custom CSS stylesheet or persist state on a page change.
You can read more about these on the Next.js website:
* [Custom `_document.js`](https://nextjs.org/docs/advanced-features/custom-document)
* [Custom `_app.js`](https://nextjs.org/docs/advanced-features/custom-app)
### Why use the `_document.js` file over `_app.js`?
The `Head` component (from `next/document`) that is used in `_document.js` is rendered serverside whereas the `Head` component (from `next/head`) in `_app.js` will update on each page change meaning that the Google Analytics script may be reloaded which could slow down the site.
## Round up
If anything I've said has helped you add Google Analytics to your site, give me a reaction.
Any more questions? Let me know in the comments!
Thanks for reading the article!