Implement Google Analytics in Next.js
Setting up Google Anaylytics is fairly straight forward, but it can be easy to get tripped up when doing so in Next.js for the first time. In this guide, I will show you how to get GA running in your Next.js app in just a few easy steps.
Add your Google Analytics ID to .env
If you don't already have one, create a file called .env. Make sure to add this file to your .gitignore as this is a place to store sensitive information that should never be uploaded to a git repository.
1NEXT_PUBLIC_ANALYTICS_ID=G-XXXXXXXXXX 2
Add Data Layer to _document.tsx
If you don't already have one, create a custom Document page and add the script tags provided by Google Analytics:
1// _document.tsx 2 3import { Html, Head, Main, NextScript } from 'next/document' 4 5export default function Document() { 6 return ( 7 <Html> 8 <Head> 9 <script 10 async 11 src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_ANALYTICS_ID}`} 12 /> 13 <script 14 dangerouslySetInnerHTML={{__html: ` 15 window.dataLayer = window.dataLayer || []; 16 function gtag(){dataLayer.push(arguments);} 17 gtag('js', new Date()); 18 gtag('config', '${process.env.NEXT_PUBLIC_ANALYTICS_ID}'); 19 `, 20 }} 21 /> 22 <Head /> 23 <body> 24 <Main /> 25 <NextScript /> 26 </body> 27 </Html> 28 ) 29} 30 31
Create gtag.ts in lib Folder
This will get the initial tracking set up for your app.
1// gtag.ts 2 3declare global { 4 interface Window { 5 gtag: any 6 } 7} 8 9export const pageview = (url: URL) => { 10 window.gtag('config', 11 process.env.NEXT_PUBLIC_ANALYTICS_ID, { 12 cookie_flags: 'SameSite=None;Secure', 13 page_path: url, 14 }) 15} 16 17export const event = ({ action, category, label, value }) => { 18 window.gtag('event', action, { 19 event_category: category, 20 event_label: label, 21 value: value, 22 }) 23} 24
Create useGtag.ts in utils Folder
Here we will utilize Next's useRouter in order to send route information to Google Analytics.
useEffect inside of a normal function (and this isn't a component). I have chosen this name and path for code organization purposes, but you can alternatively put the useEffect directly in _app.tsx1// useGtag.ts 2 3import { useEffect } from 'react' 4import { useRouter } from 'next/router' 5import * as gtag from '@/lib/gtag' 6 7const useGtag = () => { 8 const router = useRouter() 9 useEffect(() => { 10 const handleRouteChange = (url: URL) => { 11 gtag.pageview(url) 12 } 13 router.events.on('routeChangeComplete', handleRouteChange) 14 return () => { 15 router.events.off('routeChangeComplete', handleRouteChange) 16 } 17 }, [router.events]) 18} 19 20export default useGtag 21
Invoke useGtag Function in _app.tsx
1//_app.tsx 2 3import useGtag from '@/components/useGtag' 4 5function MyApp({ Component, pageProps }) { 6 Analytics() 7 return <Component {...pageProps} /> 8} 9 10export default MyApp 11
Add Environment Variable to Production Server
This is an easy step to forget. Be sure to set up NEXT_PUBLIC_ANALYTICS_ID (from your .env file) on your server.
Filter Internal Traffic
Now that GA is up and running, the final step is to ensure you aren't tracking your own visits. You will need your IP address. Once you have your IP, log in to Google Analytics.
- From the main page, look to the bottom left of the screen and click on the gear (Admin) icon ⚙️.
- On the Admin screen, ensure you are on the correct GA4 property that you just set up. Click on Data Streams.
- Click the Add stream button and click on your app address.
- On the "Web stream details" panel, at the very bottom, click More Tagging Settings.
- On the "More tagging settings" panel, click Define internal traffic
- Click on the Create button, add a Rule name (e.g. Home), and leave traffic_type value as "internal". Finally, select Match type: IP Address Equals and then paste your IP address into the Value input.
- Click the Add condition button. Repeat these steps for any other IPs you want to filter.
- Click the Admin gear icon ⚙️, then select Data Settings > Data Filters
- On the "Data filters" page click the three dots to the right of the Internal Traffic filter and select "Activate Filter".
Final Thoughts
That's it! 🎉 If you run into any issues, I recommend installing Google Analytics Debugger, it's available for Firefox and Chrome.
Google Analytics is a great way to keep track of who visits your site, where they are coming from, what they are looking at, and how long they are spending doing so. While it's packed with features and customizations, the UI is a bit clunky and it can be overkill for a small site. I have been on the lookout for something modern, lightweight, and free. If you know of anything that fits that description, hit me up on Twitter and let me know!