nextjs google analytics Téléchargement - nextjs google analytics Code source Téléchargement

Note

Vous n'aurez peut-être pas besoin de ce package. Veuillez d'abord consulter les bibliothèques tierces.

NextJS Google Analytics

Google Analytics pour next.js

Ce package optimise le chargement du script à l'aide de la balise Script Next.js, ce qui signifie qu'il ne fonctionnera que sur les applications à l'aide de next.js> = 11.0.0 .

Installation

 npm install --save nextjs-google-analytics

Tl; dr

Ajoutez le composant GoogleAnalytics avec le cadre d'hélice trackPageViews sur true dans votre fichier d'application personnalisé:

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Vous pouvez transmettre votre ID de mesure Google Analytics en le définissant sur la variable environnement NEXT_PUBLIC_GA_MEASUREMENT_ID ou en utilisant le conduit gaMeasurementId sur le composant GoogleAnalytics . La variable d'environnement remplacera l'hélice si les deux sont définis .

Usage

Votre ID de mesure Google Analytics est lu à partir de la variable d'environnement NEXT_PUBLIC_GA_MEASUREMENT_ID , alors assurez-vous qu'elle est définie dans votre environnement de production:

Vercel
Gré

Si la variable n'est pas définie ou est vide, rien ne sera chargé, ce qui le rend sûr de travailler en développement.

Pour le charger et le tester sur le développement, ajoutez:

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

à votre fichier .env.local .

En tant qu'alternative, vous pouvez utiliser le param de gaMeasurementId pour passer votre ID de mesure Google Analytics .

La variable d'environnement NEXT_PUBLIC_GA_MEASUREMENT_ID aura la priorité sur le param gaMeasurementId , donc si les deux sont définis avec des valeurs différentes, la variable d'environnement remplacera le param.

Scripts

Utilisez le composant GoogleAnalytics pour charger les scripts GTAG. Vous pouvez l'ajouter à un composant d'application personnalisé et cela prendra en charge l'inclusion des scripts nécessaires pour chaque page (ou vous pouvez l'ajouter sur une base par page si vous avez besoin de plus de contrôle):

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Par défaut, les scripts sont chargés à l'aide de la stratégie afterInteractive , ce qui signifie qu'ils sont injectés sur le côté client et s'exécuteront après l'hydratation.

Si vous avez besoin de plus de contrôle, le composant expose l'hélice de stratégie pour contrôler la façon dont les scripts sont chargés:

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics strategy = "lazyOnload" />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Vous pouvez également utiliser une alternative à un chemin par défaut pour le script GoogleTagManager par

 < GoogleAnalytics gtagUrl = "/gtag.js" />

Pages vues

Pour suivre les visions de pages, définissez le piste trackPageViews du composant GoogleAnalytics sur true.

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Par défaut, il sera déclencheur sur les modifications de hachage si trackPageViews est activé, mais vous pouvez ignorer les modifications de hachage en fournissant un objet à trackPageViews PROP:

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews = { { ignoreHashChange : true } } />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

En tant qu'alternative, vous pouvez appeler directement le crochet usePageViews dans un composant d'application personnalisé, ne pas définir un accessoire trackPageViews sur le composant GoogleAnalytics ou le définir sur false (par défaut):

 // pages/_app.js
import { GoogleAnalytics , usePageViews } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  usePageViews ( ) ; // IgnoreHashChange defaults to false
  // usePageViews({ ignoreHashChange: true });

  return (
    < >
      < GoogleAnalytics /> { /* or <GoogleAnalytics trackPageViews={false} /> */ }
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Le module exporte également une fonction pageView que vous pouvez utiliser si vous avez besoin de plus de contrôle.

Événement personnalisé

Vous pouvez utiliser la fonction event pour suivre un événement personnalisé:

 import { useState } from "react" ;
import Page from "../components/Page" ;
import { event } from "nextjs-google-analytics" ;

export function Contact ( ) {
  const [ message , setMessage ] = useState ( "" ) ;

  const handleInput = ( e ) => {
    setMessage ( e . target . value ) ;
  } ;

  const handleSubmit = ( e ) => {
    e . preventDefault ( ) ;

    event ( "submit_form" , {
      category : "Contact" ,
      label : message ,
    } ) ;

    setState ( "" ) ;
  } ;

  return (
    < Page >
      < h1 > This is the Contact page </ h1 >
      < form onSubmit = { handleSubmit } >
        < label >
          < span > Message: </ span >
          < textarea onChange = { handleInput } value = { message } />
        </ label >
        < button type = "submit" > submit </ button >
      </ form >
    </ Page >
  ) ;
}

Pour les paramètres possibles qui peuvent être spécifiés dans l' event , veuillez vous référer à la commande event dans la référence de l'API Google Tag.

Référence de l'API Google Tag - événement

Consentement

Vous pouvez utiliser la fonction consent pour mettre à jour les préférences de cookie de vos utilisateurs (RGPD).

 const consentValue : 'denied' | 'granted' = getUserCookiePreferenceFromLocalStorage ( ) ; // 'denied' or 'granted'
 
 consent ( {
    arg : 'update' ,
    params : {
      ad_storage : consentValue ,
      analytics_storage : consentValue ,
      ad_user_data : consentValue ,
      ad_personalization : consentValue
    } ,
 } ) ;

Pour les valeurs possibles qui peuvent être spécifiées dans arg et params , veuillez vous référer à la commande consent dans la référence de l'API Google Tag.

Référence de l'API Google Tag - Consentement

Web vitals

Pour envoyer Next.js Web Vitals à Google Analytics, vous pouvez utiliser un événement personnalisé sur la fonction reportWebVitals dans un composant d'application personnalisé:

 // pages/_app.js
import { GoogleAnalytics , event } from "nextjs-google-analytics" ;

export function reportWebVitals ( { id , name , label , value } ) {
  event ( name , {
    category : label === "web-vital" ? "Web Vitals" : "Next.js custom metric" ,
    value : Math . round ( name === "CLS" ? value * 1000 : value ) , // values must be integers
    label : id , // id unique to current page load
    nonInteraction : true , // avoids affecting bounce rate.
  } ) ;
}

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Si vous utilisez TypeScript, vous pouvez importer NextWebVitalsMetric à partir de next/app :

 import type { NextWebVitalsMetric } from "next/app" ;

export function reportWebVitals ( metric : NextWebVitalsMetric ) {
  // ...
}

Utilisation du param `gaMeasurementId`

Tous les composants, crochets et fonctions exportés acceptent un param gaMeasurementId facultatif qui peut être utilisé en cas de variable d'environnement: fourni:

 // pages/_app.js
import { GoogleAnalytics , event } from "nextjs-google-analytics" ;
import { gaMeasurementId } from "./lib/gtag" ;

export function reportWebVitals ( {
  id ,
  name ,
  label ,
  value ,
} : NextWebVitalsMetric ) {
  event (
    name ,
    {
      category : label === "web-vital" ? "Web Vitals" : "Next.js custom metric" ,
      value : Math . round ( name === "CLS" ? value * 1000 : value ) , // values must be integers
      label : id , // id unique to current page load
      nonInteraction : true , // avoids affecting bounce rate.
    } ,
    gaMeasurementId
  ) ;
}
const App = ( { Component , pageProps } ) => {
  usePageViews ( { gaMeasurementId } ) ;

  return (
    < >
      < GoogleAnalytics gaMeasurementId = { gaMeasurementId } />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

Vous déboguer dans Google Analytics

Installez le débogueur Google Analytics.
Allumez-le en cliquant sur son icône à droite de la barre d'adresse.
Ouvrez la console Chrome JavaScript pour voir les messages.
Sur Windows et Linux, appuyez sur Control-Shift-J.
Sur Mac, appuyez sur Command-Option-J.
Actualisez la page sur laquelle vous vous trouvez.

Manuscrit

Le module est écrit en dactylographie et les définitions de type sont incluses.

Contributif

Les contributions, les problèmes et les demandes de fonctionnalités sont les bienvenus!

Montrez votre soutien

Donnez un ️ si vous aimez ce projet!

LICENCE

Mit

Développer

nextjs google analytics