nextjs google analytics Download - nextjs google analytics Quellcode Download

Notiz

Möglicherweise benötigen Sie dieses Paket nicht. Bitte überprüfen Sie zuerst Bibliotheken Dritter.

NextJS Google Analytics

Google Analytics für Next.js

Dieses Paket optimiert das Skriptladen mit Script -Tag mit dem Next.js -Skript, was bedeutet, dass es nur in Apps mit Next.js> = 11.0.0 funktioniert .

Installation

 npm install --save nextjs-google-analytics

Tl; dr

Fügen Sie die GoogleAnalytics -Komponente mit dem trackPageViews -Requem auf die true für Ihre benutzerdefinierte App -Datei hinzu:

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

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

export default App ;

Sie können Ihre Google Analytics -Mess -ID übergeben, indem Sie sie auf die Umgebungsvariable NEXT_PUBLIC_GA_MEASUREMENT_ID einstellen oder die gaMeasurementId -Requisite für die GoogleAnalytics -Komponente verwenden. Die Umgebungsvariable überschreibt die Prop, wenn beide festgelegt sind .

Verwendung

Ihre Google Analytics -Mess -ID wird aus der Umgebungsvariablen NEXT_PUBLIC_GA_MEASUREMENT_ID gelesen. Stellen Sie daher sicher, dass sie in Ihrer Produktionsumgebung festgelegt ist:

Vercel
Netlify

Wenn die Variable nicht festgelegt oder leer ist, wird nichts geladen, sodass es sicher ist, in der Entwicklung zu arbeiten.

Um es zu laden und auf die Entwicklung zu testen, fügen Sie hinzu:

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

zu Ihrer .env.local -Datei.

Alternativ können Sie den gaMeasurementId -Param verwenden, um Ihre Google Analytics -Mess -ID zu übergeben.

Die Umgebungsvariable NEXT_PUBLIC_GA_MEASUREMENT_ID hat Vorrang vor dem Params gaMeasurementId . Wenn beide mit unterschiedlichen Werten festgelegt sind, überschreibt die Umgebungsvariable den Param.

Skripte

Verwenden Sie die GoogleAnalytics -Komponente, um die GTAG -Skripte zu laden. Sie können es einer benutzerdefinierten App -Komponente hinzufügen, die sich um die erforderlichen Skripte für jede Seite befasst (oder Sie können es pro Seite hinzufügen, wenn Sie mehr Kontrolle benötigen):

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

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

export default App ;

Standardmäßig werden Skripte mithilfe der afterInteractive Strategie geladen, was bedeutet, dass sie auf der Client-Seite injiziert werden und nach der Flüssigkeitszufuhr ausgeführt werden.

Wenn Sie mehr Kontrolle benötigen, enthüllt die Komponente die Strategie -Requisite, um zu steuern, wie die Skripte geladen werden:

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

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

export default App ;

Außerdem können Sie Alternative zum Standardpfad für GoogletAgManager -Skript von verwenden

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

Seitenansichten

So verfolgen Sie Seitenansichten, setzen Sie die trackPageViews -Requisite der GoogleAnalytics -Komponente auf True.

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

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

export default App ;

Standardmäßig wird es auf Hash -Änderungen ausgelöst, wenn trackPageViews aktiviert ist. Sie können jedoch Hash -Änderungen ignorieren, indem Sie ein Objekt für die trackPageViews -Requise bereitstellen:

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

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

export default App ;

Alternativ können Sie den usePageViews -Hook in einer benutzerdefinierten App -Komponente direkt aufrufen, trackPageViews -Requisite in der GoogleAnalytics -Komponente nicht festlegen oder auf False (Standard) festlegen:

 // 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 ;

Das Modul exportiert außerdem eine pageView , die Sie verwenden können, wenn Sie mehr Kontrolle benötigen.

Benutzerdefinierte Veranstaltung

Sie können die event verwenden, um ein benutzerdefiniertes Ereignis zu verfolgen:

 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 >
  ) ;
}

Für die möglichen Parameter, die im event angegeben werden können, finden Sie im event in der Google Tag -API -Referenz.

Google -Tag -API -Referenz - Ereignis

Zustimmung

Sie können die consent verwenden, um die Cookie -Einstellungen Ihrer Benutzer (DSGVO) zu aktualisieren.

 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
    } ,
 } ) ;

Für die möglichen Werte, die in arg und params angegeben werden können, finden Sie im Befehl consent in der Google -Tag -API -Referenz.

Google -Tag -API -Referenz - Zustimmung

Web -Vitale

So senden Sie NEXT.JS -Web -Vitals an Google Analytics Sie können ein benutzerdefiniertes Ereignis in der Funktion reportWebVitals in einer benutzerdefinierten App -Komponente verwenden:

 // 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 ;

Wenn Sie TypeScript verwenden, können Sie NextWebVitalsMetric aus next/app importieren:

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

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

Verwenden des `gaMeasurementId` -Params

Alle exportierten Komponenten, Haken und Funktionen akzeptieren einen optionalen gaMeasurementId -Param, der verwendet werden kann, wenn keine Umgebungsvariable bereitgestellt werden:

 // 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 ;

Debuggen Sie Google Analytics

Installieren Sie den Google Analytics -Debugger.
Schalten Sie es ein, indem Sie auf das Symbol rechts neben der Adressleiste klicken.
Öffnen Sie die Chrome JavaScript -Konsole, um die Nachrichten anzuzeigen.
Drücken Sie unter Windows und Linux Steuerverschiebungs-J.
Drücken Sie auf Mac Befehlsoption-j.
Aktualisieren Sie die Seite, auf der Sie sich befinden.

Typoskript

Das Modul ist in TypeScript geschrieben und Typdefinitionen sind enthalten.

Beitragen

Beiträge, Probleme und Feature -Anfragen sind willkommen!

Zeigen Sie Ihre Unterstützung

Geben Sie ein ️, wenn Ihnen dieses Projekt gefällt!

LIZENZ

MIT

Expandieren

nextjs google analytics