This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
Here’s how to add Google Analytics version 4 to a website based upon Next.js.
Create a Google Analytics property and save the property ID in a NEXT_PUBLIC_GOOGLE_ANALYTICS environment variable.
Then, you need to add a useEffect() call in the pages/_app.js file, which might look like this now:
import '/public/style.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}Change it to
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import 'tailwindcss/tailwind.css'
import '/public/style.css'
function MyApp({ Component, pageProps }) {
const router = useRouter()
useEffect(() => {
const handleRouteChange = url => {
window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
page_path: url,
})
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return <Component {...pageProps} />
}
export default MyApp
Finally, add a pages/_document.js file that creates a Next.js custom document that injects the Google Analytics script, with:
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}Note: solution adapted from a post by Marie Starck on https://mariestarck.com/add-google-analytics-to-your-next-js-application-in-5-easy-steps/
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-06-27T05:00:00+00:00) How to add Google Analytics 4 to Next.js. Retrieved from https://www.scien.cx/2021/06/27/how-to-add-google-analytics-4-to-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.