Thomas Sampaio

Introdução

O Google Analytics tem se mostrado uma ferramenta interessante e, quando fui fazer a implementação achei pouquíssimos conteúdos e nenhum destinado a Next.js, então venho humildemente vós trazer esse “tutorial”

Oque é?

O Google Analytics é uma ferramenta gratuita do google que serve para monitorar e rastrear os visitantes do seu site, pense nele como um espião do bem que te conta tudo que está acontecendo no seu site

Pra que server?

O principal objetivo do Google Analytics é ajudar a entender seu publico e o desempenho do seu site, para que você possa tomar escolhas mais inteligentes, com ele podemos ver coisas como

Quem são
- Idade, gênero, país e até os interesses
De onde vem
- Instagram, Link, Internet, Facebook
Oque eles fazem no site
- Paginas mais visitadas, tempo de estadia, aonde ela saiu
Eles estão convertendo?
- Se estão baixando o pdf, clicando no link externo

Por onde começar?

Passo 1: Criar sua Conta no GA4

Acesse https://marketingplatform.google.com/about/analytics/ ou vá ate a página do Google Analytics e crie uma nova conta.
Possivelmente a primeira página que verá será essa, clique em começar avaliação

Agora obrigatoriamente teremos que criar uma “propriedade” que vai ser o rastreador e aonde vamos receber as informações do seus visitantes
O processo de criação que caso aconteça algum problema pode ser editado depois tem 4 etapas que são:
- Criação de propriedade
  Você devera indicar um nome de sua preferencia exemplo: “portfolio - site pessoal”
  Indicar o fuso horário correto de onde você reside
  E a moeda do seu país
- Detalhes comerciais
  Aqui você vai escolher uma categoria na qual a sua empresa se encaixa melhor
  - Jogos
  - Saúde
  - Compras
  - …
  Para finalizar essa etapa você tem que indicar o tamanho da empresa
  - Pequena: 1 a 10 funcionários
  - Média: 11 a 100 funcionários
  - …
- Objetivos de negócios
  Aqui você vai indicar seus “objetivos” com base nas alternativas fornecidas pelo Google Analytics que vão te ajudar a gerar insights melhores para o seu uso especifico.
  - Gerar Leads
  - Aumentas Vendas
  - Entender o tráfego da Web e/ou do app
  - Ver o engajamento e a retenção de usuários

Passo 2: Configuração para maior retenção de dados e coleta de dados demográficos

Depois de fazer as configurações iniciais e obrigatórias, vamos fazer algumas configurações para detalhar e manter os seus dados por mais tempo

Retenção de dados

Vá em configurações → Coleta e modificação de dados → retenção de dados

marque a opção para redefinir dados após novas atividades

e troque a quantidade do primeiro select “Dados do evento” de 2 meses para 14 meses

Dados Demográficos

Vá em configurações → Coleta e modificação de dados → coleta de dados

E ative a opção “Coleta de dados dos indicadores do Google”

Após ativar essa configuração o google vai começar a coletar automaticamente informações mais detalhadas de localidade, agora veremos as visitas por município e não somente por país

Passo 3: Adicionar GA no codigo

Após fazer as configurações indicadas no GA, abra seu vscode e com o código que copiamos que deve se parecer com isso: “G-XXXXX” vamos seguir os passos abaixo para fazer a implementação.

Instalar os pacotes do next/third-parties/google
Import o GoogleTagManager e coloque no layout.tsx
Recomendo fortemente disponibilizar o código através de uma variável ambiente


import { GoogleTagManager } from "@next/third-parties/google";

const gaID = process.env.NEXT_PUBLIC_GTM_ID;

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {


  return (
    <html lang="pt-BR">
      <ApplicationWrapper>
        {children}
      </ApplicationWrapper>
      <GoogleAnalytics gaId={gaID} />
    </html>
  );
}

Passo 4: Configurar Variável de ambiente na vercel

Assumindo que você está usando a Vercel como Hospedagem

Abra o overview do seu projeto clicando nele e depois vá em settings

Environment Variables e criar a variável local ou importar o arquivo .env

mas como é só uma variável é só copiar e colar

Extra: Enviando eventos pelo código

Para realizarmos envio de eventos semelhantes a logs em determinada área do nosso site podemos utilizar a função sendGaEvent

Vai poder visualizar os eventos em Relatórios → Ver o Engajamento e a Retenção → Eventos

a sintaxe básica:

sendGaEvent("event", "<event_name>", { <event_parameters> });

A primeira propriedade é “event” pois estamos no contexto de envio de eventos, temos config e set também porém só são usados em contexto de configuração

A segunda é <event_name> e você pode escolher o titulo que mais achar adequado para aquele evento

A terceira é {<event_parameters>} aonde eventualmente passamos informações que podem ser relevantes exemplo:

sendGaEvent("event", "first-join", { 
	date: new Date.toISOString(),
 });

Você pode usar essa função para trackear cliques específicos no site que geralmente o Google Analytics não vai captar sozinho ou um drawer que não vai gerar mudanças na url e consequentemente não vai contar como uma “rota” no relatório e por ai vai…

Exemplo Pessoal

Como podemos ver na nossa imagem acima meus caros telespectadores, meu humilde site pessoal tem acesso de todo o planeta, o mais engraçado é que toda vez que vejo uma visualização do exterior fico me perguntando como o ser humano de lá trombou o meu url, mas tudo bem bola pra frente.

Fazendo uma analise rápida, percebi que a maior parte do meus visitantes vieram do linkedin ou de (direct) (none) 🤡…

brincadeirasKK

Pesquisando descobri que era exatamente oque eu suspeitava, o Google Analytics não conseguiu identificar e as principais fontes que o GA tem dificuldade de capturar são:

Clique em link de Apps (Pdf, WhatsApp e etc)
Navegação direta (Digitar url na barra de endereço)
Favoritos ou Atalhos (marcador de favorito, atalho na área de trabalho)

Com esses dados em mãos podemos pedir para o gemini analisar e fazer uma pequena suposição, então eu mandei a print que colei acima e mandei pra ele assim:

“Vamos fazer um calculo
quero saber qual a chance de ter recrutadores do exterior vendo meu portfolio
Podemos ver que o linkedin e a origem desconhecida é a principal fonte de visitas do site
levando em consideração que só mandei o link para algumas amigos no whatsapp e fiz um post no linkedin divulgando o meu portfolio, coloquei no meu curriculo em um recente projeto que fiz para uma amiga”

O resultado é que, talvez em um delírio 12% desses visitantes possam ser recrutadores do exterior, com esses dados em mãos podemos tentar deduzir varias coisas e fazer jogadas em direção a essas deduções fazendo assim aumentar suas vendas, trazer mais visitantes ou até fornecer suporte a todos os visitantes que entram em sua pagina.

Finalização

Esse foi o “tutorial” espero que tenha conseguido aplicar tudo de maneira tranquila e rápida, tentei escrever esse texto sem tanta enrolação e o mais claro o possível para não deixar nenhuma duvida, mas caso venha a ter alguma duvida ou dificuldade pode me contatar pelo linkedIn que vamos resolver o seu B.O.

Fique ligado no blog e no perfil, próximo projeto vai ser um Dashboard para consumir esses dados de uma forma mais inteligente.