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

Marcelo Albuquerque
1 min readJun 24, 2022

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.

--

--