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.
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.