​
Google Analytics

​
Setup

Complete these steps to add Google Analytics to your website.
1

Step 1

On the Google Analytics dashboard, pick your project, click on the Analytics tab, and then click Enable. Copy the GA-XYZ ID.
2

Step 2

Add the @next/third-parties package to your project using your preferred package manager.
  npm i @next/third-parties@latest
3

Step 3

Add this component to the root layout. It wraps around the tracking script to integrate smoothly with Next.js.
src/app/components/global/providers.tsx
import { GoogleAnalytics } from '@next/third-parties/google';

...
{/* Analytics */}
<GoogleAnalytics gaId={process.env.GOOGLE_ANALYTICS_ID!} />
...
4

Step 4

Add the GOOGLE_ANALYTICS_ID to the .env file.
.env
GOOGLE_ANALYTICS_ID=G-XYZ
5

Step 5

Deploy your app to see the analytics in action.

​
After Adding the Script

After adding the script, you can view the analytics in the dashboard. You can see the number of visitors, page views, and referrers. You can also see the number of visitors per country and the most visited pages.
If you need more analytics documentations or have any questions, feel free to ask in the Discord community or contact us here.