Configurando Google Analytics em uma aplicação Next.js

A melhor forma de configurarmos o Google Analytics em uma aplicação Next.js é utilizando o componente nativo <Script /> conforme a própria documentação nos orienta.

Fundo esverdeado com vários lápis de cor dispostos para simbolizar um gráfico de análise de dados
Photo by Timur Saglambilek: https://www.pexels.com/photo/analytics-text-185576/

Considerações

Como normalmente queremos que o Analytics analise todas as páginas de nossa aplicação, é uma boa prática configurá-lo diretamente no arquivo _app.js do diretório pages. Dessa forma, todas as páginas de nossa aplicação carregarão o script.

Quando configuramos nossa conta do Analytics, recebemos um ID de métricas, que segue um padrão semelhante a esse: G-0XX0XX0XXX. Esse ID é necessário para a devida configuração.

Configurando uma variável de ambiente para o ID de métricas

Crie, caso ainda não tenha criado o arquivo .env.local na raiz da aplicação para armanezer as variáveis de ambiente e o defina da seguinte maneira:

Editar o arquivo _app.js para o carregamento do script do Google Analytics

No arquivo _app.js podemos definir todas as configurações que serão padrão dentro de nossa aplicação e aqui podemos utilizar o componente Script do Next.js:

Com essa configuração, todas as páginas de nossa aplicação carregarão o script do Google Analytics.

--

--

Apaixonado por Desenvolvimento Web, sempre aprendendo algo novo em PHP, Javascript, HTML e CSS. Ah…e lutando para estruturar corretamente meus bancos de dados!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store