Como adicionar o Google Analytics a um site Next.js
O Google Analytics é uma solução fantástica que fornece estatísticas abrangentes para o seu site. Descubra como usá-lo com um site Next.js.
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.
Aprenda como adicionar o Google Analytics ao seu site usando Next.js, uma estrutura React para construir sites otimizados para SEO.
Configurando o Google Analytics
O Google Analytics fornece insights sobre o 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 botão Criar conta na guia de administração para criar uma nova conta.
- Adicione um nome de conta na seção Configuração de 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 botão Criar para finalizar 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:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '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 incluir scripts de terceiros em seu site Next.js e definir sua estratégia de carregamento, melhorando o desempenho.
O componente Next.js Script oferece diferentes estratégias de carregamento. A estratégia “pós-interativa” é adequada para um script analítico. Isso significa que ele será carregado depois que a página estiver interativa.
import Script from "next/script"
<Script src="" strategy="afterInteractive" />
Abra o arquivo pages/_app.js e importe o componente Script na parte superior.
import Script from 'next/script'
Em seguida, modifique a instrução return do componente App para incluir a tag de script do Google Analytics.
import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'
function MyApp({ Component, pageProps }) {
return (
<>
<Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"/>
<Script
id='google-analytics'
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX', {
page_path: window.location.pathname,
});
`,
}}
/>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
}
export default MyApp
Observe que esta 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 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 realizar algumas etapas extras.
Um 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. Não faz solicitação de página, apenas muda a URL.
Isso é diferente para páginas Next.js que usam getServerSideProps conforme o navegador as renderiza 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 só é executada uma vez, quando a página é carregada inicialmente. Portanto, você deve registrar manualmente as visualizações conforme o usuário navega para diferentes páginas.
Consulte o guia de medição de página única do Google Analytics para saber mais.
Para registrar manualmente as visualizações de página em Next.js usando o script gtag, crie uma nova pasta chamada lib e adicione um novo arquivo, gtag.js .
export const GA_MEASUREMENT_ID = process.env.GA_MEASUREMENT_ID;
export const pageview = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
export const event = ({ action, category, label, value }) => {
window.gtag("event", action, {
event_category: category,
event_label: label,
value,
});
};
Em seguida, modifique /pages/_app.js para usar essas funções e rastrear visualizações de páginas no gancho useEffect.
import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'
import { useRouter } from 'next/router';
import { useEffect } from "react";
import * as gtag from "../lib/gtag"
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url);
};
router.events.on("routeChangeComplete", handleRouteChange);
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
return (
<>
<Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></Script>
<Script
id='google-analytics'
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXX', {
page_path: window.location.pathname,
});
`,
}}
/>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
}
export default MyApp
Este exemplo usa os ganchos useRouter e useEffect para registrar uma visualização de página sempre 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 visualizaçã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 a tomada de boas decisões, e adicionar o Google Analytics ao seu site é uma forma 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 obtém no painel do Google Analytics.