Página Inicial>Relacionado com a programação>Código-Fonte de IA
Baixar

Observação

Você pode não precisar deste pacote. Verifique primeiro as bibliotecas de terceiros.

Próximojs Google Analytics

Google Analytics para Next.js

Este pacote otimiza a carga de script usando a tag Script Next.js, o que significa que ele funcionará apenas em aplicativos usando o próximo.js> = 11.0.0 .

Instalação 

 npm install --save nextjs-google-analytics

Tl; dr

Adicione o componente GoogleAnalytics com o suporte trackPageViews definido como true ao seu arquivo de aplicativo personalizado: 

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

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

export default App ;

Você pode passar seu ID de medição do Google Analytics , configurando -o na variável de ambiente NEXT_PUBLIC_GA_MEASUREMENT_ID ou usando o suporte gaMeasurementId no componente GoogleAnalytics . A variável de ambiente substituirá o suporte se ambos estiverem definidos .

Uso

Seu ID de medição do Google Analytics é lido da variável de ambiente NEXT_PUBLIC_GA_MEASUREMENT_ID , portanto, verifique se ela está definida em seu ambiente de produção:

  • Vercel
  • Netlify

Se a variável não estiver definida ou estiver vazia, nada será carregado, tornando seguro trabalhar no desenvolvimento.

Para carregá -lo e testá -lo no desenvolvimento, adicione: 

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

ao seu arquivo .env.local .

Como alternativa, você pode usar o gaMeasurementId Param para passar seu ID de medição do Google Analytics .

A variável de ambiente NEXT_PUBLIC_GA_MEASUREMENT_ID terá precedência sobre o parâmetro gaMeasurementId ; portanto, se ambos estiverem definidos com valores diferentes, a variável de ambiente substituirá o param.

Scripts

Use o componente GoogleAnalytics para carregar os scripts GTAG. Você pode adicioná -lo a um componente de aplicativo personalizado e isso cuidará de incluir os scripts necessários para cada página (ou você pode adicioná -lo por página se precisar de mais controle): 

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

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

export default App ;

Por padrão, os scripts são carregados usando a estratégia afterInteractive , o que significa que eles são injetados no lado do cliente e serão executados após a hidratação.

Se você precisar de mais controle, o componente expõe o suporte da estratégia para controlar como os scripts são carregados: 

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

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

export default App ;

Além disso, você pode usar o caminho alternativo ao padrão para o script GoogleTagManager 

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

Visualizações de página

Para rastrear as visualizações da página Defina o suporte trackPageViews do componente GoogleAnalytics como true. 

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

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

export default App ;

Por padrão, ele será acionado nas alterações de hash se trackPageViews estiver ativado, mas você poderá ignorar as alterações de hash, fornecendo um objeto para o suporte 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, você pode chamar diretamente o usePageViews Componente dentro de um componente de aplicativo personalizado, não defina o suporte trackPageViews no componente GoogleAnalytics ou defina -o como false (padrão): 

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

O módulo também exporta uma função pageView que você pode usar se precisar de mais controle.

Evento personalizado

Você pode usar a função de event para rastrear um 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 os parâmetros possíveis que podem ser especificados no event , consulte o comando de event na referência da API do Google Tag.

  • Referência da API do Google Tag - Evento

Consentimento

Você pode usar a função consent para atualizar as preferências de cookie de seus usuários (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 obter os valores possíveis que podem ser especificados no arg e params , consulte o comando de consent na referência da API do Google Tag.

  • Referência da API do Google Tag - consentimento

Web sinais vitais

Para enviar o Next.js Web Vitals para o Google Analytics, você pode usar um evento personalizado na função reportWebVitals dentro de um componente de aplicativo personalizado: 

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

Se você estiver usando o TypeScript, poderá importar NextWebVitalsMetric a partir next/app : 

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

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

Usando o param gaMeasurementId

Todos os componentes, ganchos e funções exportados aceitam um parâmetro gaMeasurementId opcional que pode ser usado caso nenhuma variável de ambiente seja fornecida: 

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

Debugando seu Google Analytics

  1. Instale o depurador do Google Analytics.

  2. Ligue -o clicando em seu ícone à direita da barra de endereço.

  3. Abra o console do Chrome JavaScript para ver as mensagens.

    No Windows e Linux, pressione Control-Shift-J.

    No Mac, pressione o comando-opção-j.

  4. Atualize a página em que você está.

TypeScript

O módulo é escrito nas definições de tipadas e tipos estão incluídas.

Contribuindo

Contribuições, questões e solicitações de recursos são bem -vindos!

Mostre seu apoio

Dê a um ️ se você gosta deste projeto!

LICENÇA

Mit

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos