Ajouter Google Analytics à Next JS

L'intégration de Google Analytics (GA) dans une application Next.js vous permet de suivre efficacement les interactions des utilisateurs sur votre site web. Etant donné les capacités de rendu côté serveur de Next.js, l'approche est légèrement différente des frameworks côté client uniquement.

Entrons dans le vif du sujet.

Configurer une propriété Google Analytics

Tout d'abord, assurez-vous que vous disposez d'une propriété Google Analytics. Si ce n'est pas le cas, créez-en une dans votre compte Google Analytics, en optant pour une propriété Google Analytics 4 (GA4). Vous recevrez un "ID de mesure" (comme "G-XXXXXXXXXX").

Créer un module GA

Créez un module JavaScript pour GA. Ce module s'occupera de l'initialisation et du suivi des pages vues et des événements. Créez un fichier comme lib/ga/index.js:

export const GA_TRACKING_ID = 'YOUR_MEASUREMENT_ID' ; export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path : url, }) ; } ; export const event = ({ action, category, label, value }) => { window.gtag('event', action, { event_category : category, event_label : label, value : value, }) ; } ;

Remplacez YOUR_MEASUREMENT_ID par votre véritable ID de mesure.

Ajoutez le script GA à votre application

Dans votre fichier _document.js (créez-en un dans votre répertoire de pages s'il n'existe pas), incluez le script Google Analytics :

import Document, { Html, Head, Main, NextScript } from 'next/document' import { GA_TRACKING_ID } from '../lib/ga' export default class MyDocument extends Document { render() { return ( <Html> <Head> {/* Global Site Tag (gtag.js) - Google Analytics */} <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}` /> <script dangerouslySetInnerHTML={ __html : ` window.dataLayer = window.dataLayer || [] ; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()) ; gtag('config', '${GA_TRACKING_ID}', { page_path : window.location.pathname, }) ; `, }} /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } } }

Suivi des pages vues

Dans _app.js, utilisez la fonction pageview pour suivre les pages vues :

import { useEffect } from 'react' import { useRouter } from 'next/router' import * as ga from '../lib/ga' export default function MyApp({ Component, pageProps }) { const router = useRouter() useEffect(() => { const handleRouteChange = (url) => { ga.pageview(url) } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } }, [router.events]) return <Component {...pageProps} /> }

Mise en œuvre du suivi des événements

Chaque fois que vous avez besoin de suivre des événements personnalisés dans votre application, importez la fonction " event" de votre module GA et utilisez-la :

import * as ga from '../lib/ga' ga.event({ action : 'submit_form', category : 'Contact', label : 'Contact Form', value : 'User submitted a contact form' })

Test et déploiement

Testez minutieusement votre intégration, en vous assurant que les pages vues et les événements sont suivis comme prévu. Déployez votre application et surveillez le tableau de bord de Google Analytics.

Points à prendre en considération et meilleures pratiques

Respect de la vie privée: Assurez-vous que votre mise en œuvre est conforme aux lois sur la protection de la vie privée telles que le GDPR. Cela peut inclure l'ajout de mécanismes de consentement de l'utilisateur pour le suivi.
Débogage: Utilisez des outils tels que Google Analytics Debugger pour Chrome afin de valider la configuration.
Suivi côté serveur ou côté client: Faites attention à ce qui est suivi côté serveur et côté client dans les applications Next.js.

Réflexions finales

L'intégration de Google Analytics dans une application Next.js permet d'obtenir des informations détaillées sur le comportement des utilisateurs et les performances du site. Cependant, il est important de se rappeler que Google Analytics peut être complexe et ne pas convenir à toutes les organisations.

Chez Simple Analytics, nous proposons une solution plus directe, axée sur la confidentialité, qui simplifie le processus d'analyse tout en respectant la vie privée des utilisateurs. Consultez notre tableau de bord analytique en direct pour vous en convaincre.

Google Analytics Glossaire