Inicio>Relacionado con la programación>Código Fuente de IA
Descargar

Nota

Es posible que no necesite este paquete. Consulte primero las bibliotecas de terceros.

Nextjs Google Analytics

Google Analytics para Next.js

Este paquete optimiza la carga de script usando la etiqueta Script Next.js, lo que significa que solo funcionará en aplicaciones usando Next.js> = 11.0.0 .

Instalación 

 npm install --save nextjs-google-analytics

Tl; Dr

Agregue el componente GoogleAnalytics con el accesorio trackPageViews establecido en true a su archivo de aplicación personalizado: 

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

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

export default App ;

Puede aprobar su ID de medición de Google Analytics al configurarla en la variable de entorno NEXT_PUBLIC_GA_MEASUREMENT_ID o utilizando el accesorio gaMeasurementId en el componente GoogleAnalytics . La variable de entorno anulará el PROP si ambos están establecidos .

Uso

Su ID de medición de Google Analytics se lee a partir de NEXT_PUBLIC_GA_MEASUREMENT_ID Entorno Variable, así que asegúrese de que esté configurado en su entorno de producción:

  • Velo
  • Netlificar

Si la variable no está configurada o está vacía, no se cargará nada, lo que hace que sea seguro funcionar en el desarrollo.

Para cargarlo y probarlo en el desarrollo, agregue: 

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

a su archivo .env.local .

Como alternativa, puede usar el parámetro gaMeasurementId para aprobar su ID de medición de Google Analytics .

La variable de entorno NEXT_PUBLIC_GA_MEASUREMENT_ID tendrá prioridad sobre el parámetro gaMeasurementId , por lo que si ambos están configurados con diferentes valores, la variable de entorno anulará el Param.

Guiones

Use el componente GoogleAnalytics para cargar los scripts GTAG. Puede agregarlo a un componente de aplicación personalizado y esto se encargará de incluir los scripts necesarios para cada página (o puede agregarlo por página si necesita más control): 

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

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

export default App ;

Por defecto, los scripts se cargan utilizando la estrategia afterInteractive , lo que significa que se inyectan en el lado del cliente y se ejecutarán después de la hidratación.

Si necesita más control, el componente expone el accesorio de estrategia para controlar cómo se cargan los scripts: 

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

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

export default App ;

Además, puede usar alternativa a la ruta predeterminada para el script googletagmanager por 

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

Vistas de la página

Para rastrear las vistas de la página, establezca el accesorio trackPageViews del componente GoogleAnalytics a True. 

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

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

export default App ;

De manera predeterminada, se activará en los cambios hash si trackPageViews está habilitado, pero puede ignorar los cambios hash al proporcionar un objeto al accesorio trackPageViews : 

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

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

export default App ;

Como alternativa, puede llamar directamente al gancho usePageViews dentro de un componente de la aplicación personalizada, no configure el accesorio trackPageViews en el componente GoogleAnalytics o establezca en falso (predeterminado): 

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

El módulo también exporta una función pageView que puede usar si necesita más control.

Evento personalizado

Puede usar la función event para rastrear un evento personalizado: 

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

Para los posibles parámetros que se pueden especificar en el event , consulte el comando event en la referencia de la API de la etiqueta de Google.

  • Referencia de la API de la etiqueta de Google - Evento

Consentir

Puede usar la función consent para actualizar las preferencias de cookies de sus usuarios (GDPR). 

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

Para los valores posibles que se pueden especificar en arg y params , consulte el comando consent en la referencia de la API de la etiqueta de Google.

  • Referencia de la API de la etiqueta de Google - Consentimiento

Vitalidad de la web

Para enviar Next.js Web Vitals a Google Analytics, puede usar un evento personalizado en la función reportWebVitals dentro de un componente de la aplicación personalizada: 

 // 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 está utilizando TypeScript, puede importar NextWebVitalsMetric desde next/app : 

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

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

Usando el parámetro gaMeasurementId

Todos los componentes, ganchos y funciones exportados aceptan un parámetro de gaMeasurementId opcional que se puede usar en caso de que no se proporcione ninguna variable de entorno: 

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

Depuración de usted Google Analytics

  1. Instale el depurador de Google Analytics.

  2. Enciendalo haciendo clic en su icono a la derecha de la barra de direcciones.

  3. Abra la consola JavaScript Chrome para ver los mensajes.

    En Windows y Linux, presione Control-Shift-J.

    En Mac, presione Command-Option-J.

  4. Actualice la página en la que se encuentra.

Mecanografiado

El módulo está escrito en TypeScript y se incluyen definiciones de tipo.

Que contribuye

¡Las contribuciones, los problemas y las solicitudes de funciones son bienvenidas!

Muestra tu apoyo

¡Dale un ️ si te gusta este proyecto!

LICENCIA

MIT

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo