Morioh
Login
Thadée Cisowski

Thadée Cisowski

10 months ago

Ajoutez Google Analytics à votre application Next.js

Google Analytics est un excellent moyen gratuit de suivre les performances de vos applications Web et mobiles. Dans ce tutoriel, nous apprendrons comment ajouter Google Analytics à votre application Next.js en 4 étapes simples. 

  • Étape 1 : Créez une variable d'environnement de recherche Google Analytics
  • Étape 2 : Injectez le script Google Analytics dans _document.js
  • Étape 3 : Suivez les pages vues dans _app.js
  • Étape 4 : Facultatif - effectuer le suivi uniquement en production

Étape 1 : Créez une variable d'environnement de recherche Google Analytics

Tout d’abord, créons une variable d’environnement pour notre ID de mesure Google Analytics de recherche.

NEXT_PUBLIC_GA_ID=G-XXXXX

Localement, cela devrait résider dans un  fichier .env.local ou  .env .

N'oubliez pas de définir cette variable d'environnement partout où cette application est déployée en production.

Étape 2 : Injectez le script Google Analytics dans _document.js

Ensuite, nous souhaiterons injecter la balise globale du site Google Analytics ( gtag.js) dans le fichier  <head>.

Pour accéder à la  <Head> balise de recherche Next.js, nous aurons besoin d'un  document personnalisé Next.js  appelé  /pages/_document.js.

Ici, nous allons injecter le script Google Analytics dans  /pages/_document.js.

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

Étape 3 : Suivez les pages vues dans _app.js

Afin de suivre les pages vues dans notre application, nous souhaitons ajouter un simple  useEffect() hook dans notre application  _app.js qui écoute  routeChangeComplete les événements.

import { useEffect } from 'react';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = url => {
      window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
        page_path: url,
      });
    }
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    }
  }, [router.events]);
  return <Component {...pageProps} />
}
export default MyApp

Étape 4 : Facultatif - effectuer le suivi uniquement en production

Si nous voulons limiter l'analyse à notre environnement de production, nous pouvons vérifier  process.env.NODE_ENV.

Modifier _document.js

Dans  /pages/_document.js, déclarons une variable booléenne pour vérifier la production (peut être en dehors du composant).

const isProd = process.env.NODE_ENV === "production";

Ensuite, nous pouvons tout envelopper  <Head> au conditionnel.

<Head>
  {isProd && (
    <>
      {/* The two script tags */}
    </>
  )}
</Head>

Modifier _app.js

Dans  /pages/_app.js, déclarons la même variable booléenne pour la production.

const isProd = process.env.NODE_ENV === "production";

Ensuite, nous pouvons modifier  handleRouteChange pour tirer uniquement en production.

const handleRouteChange = url => {
  if (isProd) {
    window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
      page_path: url,
    });
  }
};

Merci d'avoir lu!!!

1.55 GEEK