A análise de dados é essencial se você deseja acompanhar o número de visitantes que seu site está recebendo. Existem diferentes maneiras de adicionar análises ao seu projeto, incluindo o Google Analytics. É um serviço gratuito e relativamente simples de configurar.
Saiba como adicionar o Google Analytics ao seu site usando o Next.js, uma estrutura React para criar sites otimizados para SEO.
Configurando o Google Analytics
O Google Analytics fornece informações no comportamento das pessoas que visitam seu site. Ele informa quais páginas obtêm o número de visualizações e fornece dados do público, como localização, idade, interesse e o dispositivo que eles usam. Esses dados podem ajudar a tomar decisões sobre a direção que sua empresa deve seguir para ter sucesso.
Para começar, visite o painel de análise e crie uma nova conta seguindo estas etapas:
- Clique no Criar uma conta botão na guia admin para criar uma nova conta.
- Adicione um nome de conta na seção Configuração da conta.
- Crie a propriedade analítica fornecendo um nome.
- Adicione os detalhes da empresa. Selecione as opções que se aplicam ao seu site.
- Clique no Criar botão para concluir a configuração da propriedade.
- Clique no fluxo da web para especificar o fluxo de dados que o Google Analytics deve rastrear.
- Especifique o URL do seu site e dê um nome ao fluxo de dados.
- Clique nas instruções de marcação e obtenha o script que você usará em seu site.
- Copie o ID de medição (o código de rastreamento) para usar mais tarde.
Depois de obter o código de rastreamento, você pode configurar o projeto Next.js.
Configurando o projeto Next.js
Se você ainda não tem um projeto Next.js configurado, consulte o Guia oficial do Next.js para começar.
Ao criar a propriedade Global site tag, você obteve um script como este:
<!-- Etiqueta do Google (gtag.js) -->
<script assíncrono src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<roteiro>
janela.dataLayer = janela.dataLayer || [];
funçãogtag(){dataLayer.push(argumentos);}
gtag('js', novoData());
gtag('configuração', 'G-NHVWK8L97D');
</script>
Você precisa adicionar este script à tag head do seu site. Em Next.js, você usa o componente Script de next/script. Este componente é uma extensão da tag de script HTML. Ele permite que você inclua scripts de terceiros em seu site Next.js e defina sua estratégia de carregamento, melhorando o desempenho.
O Script Next.js O componente oferece diferentes estratégias de carregamento. A estratégia “afterinteractive” é adequada para um script analítico. Isso significa que ele será carregado depois que a página for interativa.
importar Roteiro de "próximo/script"
<Origem do script="" estratégia="depoisinterativo" />
Abra o páginas/_app.js arquivo e importe o componente Script na parte superior.
importar Roteiro de 'próximo/script'
Em seguida, modifique a instrução return do componente App para incluir a tag de script do Google Analytics.
importar '../styles/globals.css'
importar Disposição de '../componentes/Layout/Layout'
importar Roteiro de 'próximo/script'funçãoMeuAplicativo({ Componente, pageProps }) {
retornar (
<>
<Estratégia de script ="depoisinterativo" origem="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Roteiro
id='google-analytics'
estratégia="depoisinterativo"
perigosamenteSetInnerHTML={{
__html: `
janela.dataLayer = janela.dataLayer || [];
funçãogtag(){dataLayer.push(argumentos);}
gtag('js', novoData());
gtag('configuração', 'G-XXXXXXX', {
page_path: janela.localização.pathname,
});
`,
}}
/>
<Disposição>
<Componente {...pageProps} />
</Layout>
</>
)
}
exportarpadrão MeuAplicativo
Observe que essa tag é um pouco diferente daquela fornecida pelo Google Analytics. Ele usa perigosamenteSetInnerHTML e inclui uma estratégia de carregamento. Eles, no entanto, funcionam da mesma forma.
Lembre-se de substituir G-XXXXXXX pelo seu código de rastreamento. Também é aconselhável armazenar o código de rastreamento em um arquivo .env para mantê-lo em segredo.
Adicionando o Google Analytics a um aplicativo de página única
Você pode usar a tag de script acima para um site normal e deixar por isso mesmo. No entanto, para um aplicativo de página única como um site Next.js, você precisa executar algumas etapas extras.
A aplicativo de página única (SPA) é um site que carrega todo o conteúdo antecipadamente, em resposta a uma solicitação inicial. O navegador carrega o conteúdo dinamicamente conforme o usuário clica nos links para navegar no site. Ele não faz uma solicitação de página, apenas as alterações de URL.
Isso é diferente para páginas Next.js que usam getServerSideProps, pois o navegador as processa mediante solicitação.
A tag do Google funciona registrando uma visualização de página quando uma nova página é carregada. Assim, para SPAs, a tag do Google é executada apenas uma vez, quando a página é carregada inicialmente. Portanto, você deve registrar manualmente as exibições à medida que o usuário navega para páginas diferentes.
Veja a medição de página única Guia do Google Analytics aprender mais.
Para registrar manualmente as exibições de página em Next.js usando o script gtag, crie uma nova pasta chamadalib e adicione um novo arquivo, gtag.js.
exportarconst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;exportarconst visualização de página = () => {
janela.gtag("configuração", GA_MEASUREMENT_ID, {
page_path: url,
});
};
exportarconst evento = ({ ação, categoria, rótulo, valor }) => {
janela.gtag("evento", Ação, {
event_category: categoria,
event_label: rótulo,
valor,
});
};
Em seguida, modifique /pages/_app.js para usar essas funções e rastrear exibições de página no gancho useEffect.
importar '../styles/globals.css'
importar Disposição de '../componentes/Layout/Layout'
importar Roteiro de 'próximo/script'
importar { useRouter } de 'próximo/roteador';
importar { useEffect } de "reagir";
importar * como gtag de "../lib/gtag"funçãoMeuAplicativo({ Componente, pageProps }: AppProps) {
const roteador = useRouter();useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url);
};roteador.eventos.on("routeChangeComplete", handleRouteChange);
retornar () => {
roteador.eventos.off("routeChangeComplete", handleRouteChange);
};
}, [roteador.eventos]);
retornar (
<>
<Estratégia de script ="depoisinterativo" origem="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Roteiro
id='google-analytics'
estratégia="depoisinterativo"
perigosamenteSetInnerHTML={{
__html: `
janela.dataLayer = janela.dataLayer || [];
funçãogtag(){dataLayer.push(argumentos);}
gtag('js', novoData());
gtag('configuração', 'G-XXXXXX', {
page_path: janela.localização.pathname,
});
`,
}}
/>
<Disposição>
<Componente {...pageProps} />
</Layout>
</>
)
}
exportarpadrão MeuAplicativo
Este exemplo usa os ganchos useRouter e useEffect para registrar uma exibição de página toda vez que o usuário navega para outra página.
Chame o método useRouter de next/router e atribua-o à variável do roteador. No gancho useEffect, ouça o evento routeChangeComplete no roteador. Quando o evento for acionado, registre uma exibição de página chamando a função handleRouteChange.
A instrução de retorno do gancho useEffect cancela a assinatura do evento routeChangeComplete com o método 'off'.
Use o Google Analytics para coletar dados do usuário
Os dados são extremamente benéficos para tomar boas decisões, e adicionar o Google Analytics ao seu site é uma maneira de coletá-los.
Você pode adicionar o Google Analytics a um projeto Next.js usando ganchos para garantir o registro de todas as visualizações de página, mesmo quando uma página usa roteamento do lado do cliente. Agora você pode ver quantas visualizações seu site recebe no painel do Google Analytics.
