Installer GA4 sur Next.js a quelques particularités par rapport à un site classique : le rendu hybride (SSR/SSG), la navigation sans rechargement de page (SPA), et les bonnes pratiques de performance. Voici la méthode recommandée pour chaque configuration.
Méthode 1 : @next/third-parties (recommandée — App Router)
Depuis Next.js 14, le package officiel @next/third-parties propose un composant GoogleAnalytics optimisé : chargement différé, pas de blocage du rendu, compatible avec les Server Components.
Installation
npm install @next/third-parties
Intégration dans le layout racine
// src/app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>
{children}
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
</body>
</html>
)
}
Remplace G-XXXXXXXXXX par ton ID de mesure GA4.
Avantages :
- Chargement optimisé via
Strategy.afterInteractiveautomatique - Respecte les bonnes pratiques Core Web Vitals (pas de script bloquant)
- Officiel Next.js, maintenu par Vercel
- Compatible Server Components
Méthode 2 : gtag.js manuel avec le composant Script
Si tu ne veux pas de dépendance supplémentaire ou si tu as besoin de contrôle précis sur les événements :
// src/app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<head>
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
`}
</Script>
</head>
<body>{children}</body>
</html>
)
}
Important : utilise toujours strategy="afterInteractive" et non strategy="beforeInteractive". Le script GA4 n'est pas critique au rendu initial et ne doit pas bloquer l'affichage de la page.
Méthode 3 : Pages Router (Next.js 12 et antérieur)
Pour les projets sur l'ancien Pages Router, le tag s'ajoute dans _app.tsx ou _document.tsx :
// pages/_app.tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
strategy="afterInteractive"
/>
<Script id="ga4-init" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
`}
</Script>
<Component {...pageProps} />
</>
)
}
Gérer le consentement RGPD
Si ton site est soumis au RGPD (ce qui est le cas pour tout site francophone), le tag GA4 ne doit se charger qu'après le consentement de l'utilisateur.
Approche avec consentement conditionnel
// src/app/layout.tsx
'use client'
import { GoogleAnalytics } from '@next/third-parties/google'
import { useConsent } from '@/hooks/useConsent' // ton hook de consentement
export function AnalyticsProvider() {
const { analyticsConsented } = useConsent()
if (!analyticsConsented) return null
return <GoogleAnalytics gaId="G-XXXXXXXXXX" />
}
Avec le mode consentement GA4
GA4 supporte le Consent Mode v2 : tu peux charger le tag sans données avant consentement, et activer le tracking complet après accord.
<Script id="ga4-consent-init" strategy="beforeInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
analytics_storage: 'denied',
ad_storage: 'denied'
});
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
`}
</Script>
Après consentement utilisateur, tu mets à jour le statut :
gtag('consent', 'update', {
analytics_storage: 'granted'
})
Tracking des changements de page (SPA)
Next.js est une Single Page Application : les navigations entre pages ne rechargent pas le document, donc GA4 ne détecte pas automatiquement les changements de page.
Bonne nouvelle : depuis GA4, le suivi des pages vues dans les SPAs est géré automatiquement via l'API History. Tu n'as normalement pas besoin de code supplémentaire pour tracker les navigations Next.js.
Si tu vois des doublons ou des pages manquantes dans GA4, vérifie que tu n'as pas deux instances du tag GA4 actives (une via @next/third-parties et une autre via GTM ou un autre script).
Envoyer des événements personnalisés
// Exemple : tracker un clic sur un CTA
'use client'
function CTAButton() {
const handleClick = () => {
if (typeof window !== 'undefined' && window.gtag) {
window.gtag('event', 'clic_cta', {
event_category: 'engagement',
event_label: 'hero_button',
})
}
}
return <button onClick={handleClick}>Commencer</button>
}
Déclare le type de gtag dans ton fichier de déclarations TypeScript si nécessaire :
// src/types/gtag.d.ts
declare function gtag(...args: unknown[]): void
declare interface Window {
gtag: typeof gtag
dataLayer: unknown[]
}
Vérification
- Lance
npm run dev - Ouvre
http://localhost:3000dans une fenêtre privée - Dans GA4 → Rapports → Temps réel : tu dois apparaître comme visiteur
Si les données n'arrivent pas en local, c'est souvent dû à :
- Un bloqueur de pub actif dans le navigateur
- Le tag chargé uniquement en production (variable d'environnement
NODE_ENV) - Le Consent Mode configuré sur "denied" par défaut
Articles connexes
- Guide complet d'installation GA4 — la vue d'ensemble toutes plateformes
- Google Tag Manager avec GA4 — si tu préfères passer par GTM
- Configurer les conversions GA4 — la suite logique après l'installation
Si tu gères GA4 pour plusieurs projets Next.js, NarratIQ centralise leurs propriétés en un dashboard et génère le rapport PDF mensuel sans extraction manuelle.
Guides d'installation sur d'autres plateformes
- Installation GA4 — guide général — la procédure complète toutes plateformes, création propriété incluse
- Installer GA4 sur WordPress — pour les sites WordPress et WooCommerce
- Installer GA4 sur Shopify — pour les boutiques e-commerce Shopify