Google Analytics para um site em NextJS
#frontend
#javascript
#html
Por Rafael Estevam
Criado em 01/04/2024
A medida em que vou fazendo melhorias nesse blog, vou me deparando com alguns coisas que eu gostaria de adicionar ao blog, para integrar novos recursos e novas ferramentas. A primeira ferramenta que irei integrar é o Google Analytics (GA). Essa ferramenta me permitirá saber se alguém, além de mim (rs), acessa o blog para ler o que escrevo aqui. Dessa maneira saberei se estou tendo engajamento com os textos que escrevo. Este artigo irá mostrar, de forma rápida, como adicionar um GA a site feito com Next.Js.
O que é o Google Analytics?
Em resumo do que entendo o que seja (já que não sou especialista), o GA é uma ferramenta que permite analisar como o seu site é acessado, qual o perfil de usuário e qual o seu comportamento dentro do site, permitindo a empresas de marketing digial elaborarem estratégias mais assertivas para o público do site. Veja em https://analytics.google.com/analytics/academy/ para saber mais.
Adicionando a tag GA dentro de um site em NextJS
Adicionar a tag GA dentro de um site é extremamente simples, entretanto, dentro de um site feito com NextJS, isso não é tão óbvio quanto parece, mas o passo a passo é simples, veja abaixo:
- Gerar o código javascript para inserir na página;
- Adicionar o código dentro do NextJS;
- Validar a integração com o Google Analytics;
Tenha em mente que, antes de iniciar os passos acima, é necessário ter uma conta dentro do Google Analytics, para isso, veja esse artigo do próprio Google: Como criar uma conta do Google Analytics
Gerando o código javascript
Quando você acessar a página do Google Analytics pela primeira vez, a plataforma já irá pedir uma primeira configuração de propriedade. Essa configuração de propriedade é necessária para o Google conseguir integrar a ferramenta ao seu site.
Nos passos seguintes, você precisará determinar qual é o tipo do seu negócio, objetivos e tipo de aplicação que você quer adicionar o código javascript do GA. No caso do blog, eu opter por "1 a 10 funcionários", "Internet e telecomunicações", "Analisar o comportamento do usuário" e "WEB". Após essas configurações, deve aparecer a seguinte tela:
Ao clicar em "Criar fluxo", a tela seguinte irá ajudar a criar o código javascript e dará instruções de como instalar no site, de acordo com a sua plataforma.
Ao clicar em veja as instruções da tag, abrirá a seguinte tela com algumas opções de instalação:
Aqui, o usuário pode selecionar a plataforma em que o seu site está construído e fazer a instalação do código javascript do GA conforme as instruções. No caso do blog, não existe nenhuma plataforma que mantêm o site, portanto eu tive que instalar o código javascript manualmente. Ao clicar em "Instalar manualmente", a tela seguinte exibirá o código javascript que deverá ser instalado no site:
Esse é o código que irá ser usado para integrar o GA ao site. Agora com ele em mãos, podemos passar para o próximo passo.
Adicionar o GA ao Next.JS
Dentro do Next.JS, considerando a versão mais recente e com o projeto estruturado dentro da pasta /app. Procure pelo arquivo layout.js (ou .tsx caso esteja usando Typescript) e procure pela tag <html> de abertura. Logo após a abertura da tag HTML, basta adicionar o código javascript do GA gerado. Como está abaixo no meu próprio blog.
Observe que eu precisei utilizar a tag Script (com S maiúsculo) do próprio Next.JS, isso acontece devido a natureza do Next.JS, que precisa de algumas tags especiais para ele integrar ferramentas externas, entretanto, se tratando de um site simples em HTML, bastará adicionar somente o script (conforme o GA criou) a página dentro da tag HEAD. Após isso, basta validar a integração.
Validando a integração com o GA
Considerando que o site está rodando em algum ambiente de desenvolvimento local, como localhost, basta atualizar o seu site e testar a integração através do próprio navegador, da seguinte maneira:
- Abra o inspetor de elementos do navegador;
- Vá até a área de console;
- Escreva dataLayer;
Ao escrever dataLayer, deve aparecer alguns detalhes dessa implementação, como está abaixo:
Essas informações indicam que o javascript do GA está rodando como esperado.
Agora, para testar a integração do código com o site, basta entrar no painel do GA, em Relatórios > Tempo real. Nesse painel, deverá constar os acessos feitos "nesse momento" ao site. Esses números podem demorar um pouco para mudar, portanto, pode ser necessário aguardar um pouco, até ter o acesso contabilizado no site.
Conclusão
Com o Google Analytics, é possível saber como o site está desempenhando dentro da internet, saber o seu engajamento e ajudando os administradores a entender melhor sobre seus usuários. É uma ferramenta fundamental para determinar as direções da equipe de marketing de uma empresa e, até mesmo, determinar a continuidade ou não de um projeto. Sei que o meu blog ainda está no começo e que os acessos serão, em suma, somente meus, mas espero que eu consiga comparar como o blog está hoje e como ele estará no futuro. Isso será determinante para saber se eu devo continuar ou não com as minhas publicações.