Home > software_development > Google Analytics (G4) Best Practices in Nextjs using @next/third-parties

Google Analytics (G4) Best Practices in Nextjs using @next/third-parties

Set up Google Analytics in NextJs with ease.

By :Thomas Inyangđź•’ 18 Jun 2024

nextjs_google_analytics

Web analytics is a tool used for collecting and measuring the behavior of site visitors by gathering their demographics and goals. The information obtained is then used to tailor the website's content to meet the goals of the visitors.


In this post, you will learn about G4 (Google Analytics tool) and how you can set it up in your NextJs project.

What is Google Analytics (G4)?

Google Analytics (G4) is a free tool that allows you to understand your customer journey and improve marketing ROI.

How to find your measurement ID on Google Analytics dashboard.

To find the measurement ID, follow these steps:

  1. Go (login or sign-up) to your Google Analytics dashboard.
  2. Navigate to Admin, under Data collection and modification, click Data streams.
  3. Select the Web tab.
  4. Click the web data stream.
  5. Find the measurement ID in the first row of the stream details.

The ID often starts with "G-", then copy it somewhere.

How to Implement G4 in Nextjs using @next/third-parties.

@next/third-parties is a library that contains a set of components and utilities for improving the performance and developer experience when loading popular third-party libraries into your Next.js application.


Step1

install the package:

npm install @next/third-parties@latest next@latest

This will install a predefined Google Analytics and other Google components into your project.


Step2

You can now import and use Google Analytics Component.

- In the app/layout.tsx directory, import GoogleAnalytics.

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
//you can store gaId value in .env
<GoogleAnalytics gaId="G-***" />
</html>
)
}

The gaId value is your measurement ID which usually starts with "G…".

Alternatively, you can use Script tag in the layout file to implement the G4 Analytics Tag.

See Also: How to Render Open Graph Image In NextJS

How to Implement Google Analytics (G4) Tag in NextJs Script Tag.

You can implement the G4 Analytics Tag in the layout file using NextJs Script tag. See example.

<Script id="google-analytics">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-***');
`}
</Script>

When all properties are entered correctly using any of the above example, the website analytics will appear after 24 hours of implementation.

Conclusion

Using the <GoogleAnalytics…/> component takes away the stress of manually configuring Google Analytics scripts.

There are other components (Google Tag Manager and Google Maps Embed) in the @next/third-parties for your usage.


Please Share.

You may also like