Back to Data Analytics
Web analytics illustration
Data Analytics

Analytics basics for a NextJS site

A guide to setting up website tracking and analytics for a Next.js site, covering Google Tag Manager, Google Analytics, consent mode, and Google Ads.

Hannah Reed
·Updated

Web analytics give you a direct line into how people find and use your site. What they search for, where they land, where they drop off, and what catches their attention. Setting up tracking across multiple platforms can feel like a chore. Google Tag Manager handles most of the setup. Every platform mentioned here has a free tier.

This guide covers the current setup for Next.js using the @next/third-parties library, Google Tag Manager, Google Analytics 4, and Google Ads tracking. It also covers consent mode, which is now a requirement rather than an optional extra.

Overview of analytics tracking platforms

Google Marketing Platform includes:

  • Google Search Console (search performance data, including AI Overviews and AI Mode visibility)
  • Google Analytics 4 (site analytics and user behaviour)
  • Google Ads (search and display campaign data)
  • Google Tag Manager (centralised tag and pixel management)

Microsoft Advertising provides:

  • Bing Webmaster Tools (search data, plus a dedicated AI Performance Report that separates AI citations from traditional search results)
  • Microsoft Ads (search and display campaign analytics)

Social media platforms worth setting up:

  • Meta (Facebook and Instagram) campaign tracking
  • LinkedIn campaign tracking
  • X (formerly Twitter) campaign tracking

Maintaining profiles across these platforms builds a clearer picture of your online presence, even before running paid campaigns. Search Console and Bing Webmaster Tools in particular are free tools that most sites benefit from having from day one.

Setting up the Next.js third-parties library

Before any tracking runs, your site needs to inform visitors about data collection and obtain consent. This is a legal requirement under GDPR and similar regulations, not optional. More on consent implementation later in this guide.

1. Install the library

Run this in your terminal from the project root:

npm i @next/third-parties

This installs the official Next.js components for Google Tag Manager and Google Analytics integration. The library handles script loading and client-side hydration automatically.

2. Add Google Tag Manager to your root layout

After creating a GTM account and container at tagmanager.google.com, locate your container ID. It follows the format GTM-XXXXXXX.

Open your root layout file at app/layout.tsx and add the component:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XXXXXXX" />
      <body>{children}</body>
    </html>
  )
}

Replace GTM-XXXXXXX with your actual container ID.

This is the only place you need to add the component. The root layout wraps every page in a Next.js App Router project, so GTM loads site-wide from this single placement. There's no need to add it to individual page layouts or components.

3. Tracking client-side navigations

The @next/third-parties library works with the App Router's client-side navigation. Google Analytics, when installed through GTM, automatically picks up page view events when users navigate between routes without a full page reload.

If you need to send custom events (button clicks, form submissions, scroll milestones), use the sendGTMEvent function in a client component:

'use client'

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

export function ContactButton() {
  return (
    <button
      onClick={() =>
        sendGTMEvent({
          event: 'contact_click',
          page_location: window.location.pathname,
        })
      }
    >
      Get in touch
    </button>
  )
}

This pushes data to the GTM data layer, where your tags can pick it up via custom event triggers.

Setting up consent mode

Google Consent Mode v2 is now required for any site using Google advertising or analytics products. It controls how Google tags behave based on a visitor's consent choices.

Consent mode uses four core parameters:

  • ad_storage controls advertising cookies
  • analytics_storage controls analytics cookies
  • ad_user_data controls whether user data can be sent to Google for advertising
  • ad_personalization controls personalised advertising features

The implementation works through a Consent Management Platform (CMP) that integrates with GTM. Providers like Cookiebot and consentmanager.net offer free tiers and have GTM template tags for no-code setup.

How consent mode works in GTM

GTM has three trigger types that fire in a specific order:

  1. Consent Initialisation fires first, before anything else. Use this for your CMP tag that sets default consent states.
  2. Initialisation fires second. Use this for tags that need to load early but aren't consent-related.
  3. Page View fires third. Use this for your standard tracking tags.

Your CMP tag should use a Consent Initialisation trigger so it sets consent defaults before any measurement tags fire. Google tags have built-in consent checks, so they automatically respect the consent state without needing additional configuration on each tag.

For sites operating in GDPR regions, this is a requirement. Google's EU User Consent Policy requires Consent Mode v2 implementation for any site using Google advertising products.

Installing Google Analytics via Google Tag Manager

Create a Google Analytics 4 account and property at analytics.google.com. Your web data stream includes a Measurement ID in the format G-XXXXXXXXXX.

Set up Google Search Console at the same time and verify your site. You can choose a Domain property (covers all subdomains and protocols, requires DNS verification) or a URL Prefix property (simpler to verify but limited in scope). Domain is usually the better choice. Link Search Console to Google Analytics through Admin > Product Links > Search Console Links to see search data alongside your site analytics.

Search Console now surfaces data from AI Overviews and AI Mode alongside traditional search results, AI-powered search visibility now appears in these reports.

1. Enable built-in variables in GTM

Navigate to Variables > Configure in your GTM workspace. Enable the built-in variables you'll need:

  • All Pages variables as a minimum (Page URL, Page Hostname, Page Path, Referrer)
  • Event, Container ID, and HTML ID for general tracking
  • Click and Scroll variables for interaction tracking
  • Element Visibility variables for tracking when specific elements come into view

Form variables tend to be unreliable across different form implementations. Custom CSS or HTML class selectors combined with Element Visibility triggers are more dependable.

2. Create your triggers

Create a Page View trigger that fires on all pages. This is the standard trigger for most tracking tags.

If you've implemented consent mode (and at this point, it's a requirement), your CMP tag already uses a Consent Initialisation trigger. Your Google tags can use standard Page View triggers because they have built-in consent checks.

For single-page application behaviour, GTM has a History Change trigger that fires when the browser's history state updates. The @next/third-parties library handles most of this automatically for Next.js sites, but the History Change trigger can be useful for custom tracking scenarios.

3. Create your Google tag

In your GTM workspace, go to Tags > New > Tag Configuration > Google Tag. Paste your GA4 Measurement ID (G-XXXXXXXXXX) into the Tag ID field.

Set the trigger to your All Pages Page View trigger. Save the tag.

4. Test, publish, and verify

Use GTM's Preview mode (top right of the GTM dashboard) to test your setup. The Tag Assistant opens in your browser and shows which tags fire, in what order, and with what data.

Once you've verified everything fires correctly:

  1. Click Submit in GTM, add a version title and description, then Publish.
  2. In Google Analytics, go to Reports > Realtime to confirm data is arriving.
  3. Clear your browser cache and open a single tab on your homepage.
  4. One active user should appear in the Realtime report.

If data doesn't appear immediately, a few things to check:

  • GTM changes can take a few minutes to propagate. If your domain uses Cloudflare or a similar CDN, purge the cache from your registrar's dashboard.
  • Google may automatically filter your IP as internal traffic. Test from a mobile network or VPN to rule this out.
  • Check that your consent mode implementation isn't blocking analytics cookies. The Realtime report won't show data if analytics_storage is denied.

Setting up Google Ads tracking

Google Ads provides useful audience and intent data even without active campaigns. You can create a free account by setting up a draft campaign and pausing it immediately. Switch the interface to Expert Mode for full access to tracking and audience tools.

1. Link Google Ads and Google Analytics

In Google Analytics, go to Admin > Product Links > Google Ads Links > Link. Select your Google Ads account and confirm. This shares data between the two platforms automatically, so you don't need to create separate GTM tags for basic Ads tracking.

Or create a standalone Google Ads tag

If you prefer a separate tag, find your Google Ads Tag ID in Google Ads under Tools > Data Manager > Google Tag. The ID format is AW-XXXXXXXXXX.

In GTM, create a new tag: Tags > New > Tag Configuration > Google Ads > Google Tag. Paste the Tag ID and set the trigger to All Pages.

2. Set up a conversion linker

The Conversion Linker tag connects ad clicks to conversions. It's essential for accurate attribution, especially when conversions happen in a separate session from the original ad click.

In GTM: Tags > New > Tag Configuration > Google Ads > Conversion Linker. Set the trigger to All Pages.

3. Create a remarketing audience and tag

Remarketing builds audience lists of people who've visited your site, which you can then target with display campaigns. If you've linked Google Analytics and Ads, a default audience segment (all site visitors, 30-day window) is created automatically.

To create a dedicated remarketing tag in GTM:

  1. In Google Ads, go to Tools > Shared Library > Audience Manager > Your data sources > Google Ads Tag.
  2. Copy the Conversion ID shown in the setup instructions.
  3. In GTM, create Tags > New > Tag Configuration > Google Ads > Google Ads Remarketing.
  4. Paste your Conversion ID and set the trigger to All Pages.

4. Create custom conversion tags

Google Ads generates some default conversion events (page visits, scroll depth, file downloads), but most sites need conversion tracking tailored to specific actions.

Start by creating a custom trigger. Identify the user action you want to track: a button click, a form submission, a scroll to a particular section. Examine GTM's built-in trigger types and select the one that matches.

The important step: change "This trigger fires on" from "All Pages" to "Some Pages." Set the condition to match the specific page or element. For example: Page Path contains /contact/ for tracking actions on your contact page.

You can combine multiple triggers in a single tag, or use triggers as exceptions (blocking rules) to prevent a tag firing in certain conditions.

With your trigger saved, create the conversion tag:

  1. Tags > New > Tag Configuration > Google Ads > Google Ads Conversion Tracking.
  2. Enter your Conversion ID (from Tools > Data Manager > Google Tag in Google Ads, format AW-XXXXXXXXXX).
  3. Add a Conversion Label (the category that appears in reporting).
  4. Optionally set a Conversion Value.
  5. Select your custom trigger and save.

A note on enhanced conversions

Google is unifying enhanced conversions for web and leads into a single toggle from June 2026. Enhanced conversions use hashed first-party data (like email addresses) to improve attribution accuracy. Standard conversion tracking tends to miss a proportion of actual conversions due to cookie restrictions and cross-device behaviour. Enhanced conversions recover some of that gap.

If you're running paid campaigns, Enable enhanced conversions through the Google Ads interface. The setup is straightforward and doesn't require additional GTM configuration beyond the standard conversion tag.

Blending and reporting on your data

Each platform provides its own reporting. Combining data sources looks like this:

  • Google Analytics Exploration tool lets you build custom reports that combine dimensions and metrics beyond what the standard reports offer.
  • Google Data Studio (recently renamed back from Looker Studio as of April 2026) connects to Analytics, Ads, Search Console, and other sources for cross-platform dashboards.
  • Google Analytics Traffic acquisition reports show how different channels contribute to site visits and conversions.

Understanding where your visitors come from, what they do on your site, and what makes them convert (or leave) gives you a practical foundation for improving content, user experience, and marketing spend.

Closing notes

Most of the complexity in analytics setup is in the initial configuration. Once GTM is installed and your core tags are in place, adding new tracking for other platforms follows the same pattern. Social media platforms and other advertising networks typically provide GTM template tags that handle most of the configuration.

The main thing that's changed since Google Tag Manager first launched is the emphasis on consent. Getting consent mode right isn't just about compliance. It directly affects the quality of your data. Misconfigured consent settings can block data collection entirely or create legal exposure. Treat consent implementation as part of your analytics setup, not an afterthought.

Recent blog posts