Executando verificação de segurança...
3

[Vercel Analytics] Você sabia que a vercel possui sua própria forma de analisar trafégo?

Introdução:

"Opa, Opa, mas o que tem isso?" Sei que deve ter pessoas (talvez a grande maioria) que já sabe dessa ferramenta. Meu público alvo, obviamente é aqueles que não conhecem ou nunca usaram. Se você já tem experiência com a ferramenta, por favor, compartilhe nos comentários mais informações sobre!

A ferramenta

Indo na página do Next js você vai ver a ferramenta de "Analytic", ou indo em algum projeto seu que você fez o deploy na Vercel. Para ativar a analise de trafégo no seu site, primeiro você precisa habilitar no seu projeto. Para isso clique em algum projeto seu que você possui na Vercel, caso não tenha, vai ter que importar um caso queria utilizar a ferramenta. Depois ao clicar nele, na parte superior da página vai ter algumas opções, e uma delas é "Analytics" Caso esteja abrindo o projeto na Vercel.

Após clicar na ferramenta, vai apresentar algumas informações caso seja a primeira vez abrindo a aba, e depois vai aprensentar as etapas necessárias para implementar a analise de trafégo. Mas, e se meu projeto não tiver na Vercel? Sem problemas! Funciona da mesma forma! Segue os passos aqui:

  • Primeiro baixamos com seu gerenciado de pacotes a ferramenta: npm i @vercel/analytics
  • Depois implementamos no nosso código a ferramenta desse jeito aqui:
import { Analytics } from '@vercel/analytics/react';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

OBS: tem que ser no layout raiz...

Feito tudo isso basta fazer o deploy, ou dá o push no github, e aguardar um curto tempo, dependendo do tamanho do deploy, e prontinho. Indo na Vercel já é possível saber quantas pessoas visitam sua página, além de outras informações.

É de graça?

A grande Vercel possui todo tipo de plano, e sim, tem plano grátis que registra até 2500 eventos e relatórios de um mês. Além do gratuito existem outros planos que você pode encontrar neste link aqui:Analytic

Inclusive, todas as informações foram tiradas desde link acima. Indo na parte "começo rápido".

Conclusão:

Eai? Gostaram? Se tiverem algumas dúvida basta perguntar aqui abaixo. E caso você já seja uma pessoa experiênte, compartilhe sua opinião sobre a ferramenta :)

Carregando publicação patrocinada...
2
0
2

Gosto bastante do Umami por ele ser open-source. Você tem a opção de usar a cloud deles ou hospedar a sua própria. No plano Hobby o limite de free é de 10k por mês e você pode usar em até três sites, diferente da Vercel.

1
2
1
1

Pelo que eu entendi precisa importar a biblioteca @vercel/analytics no projeto para funcionar, ou seja, é preciso que o projeto use npm.

Inclusive, quando seleciona para ativar o analytics ele trava nesse modal esperando que o próximo deploy possua essa biblioteca (pelo que eu entendi):
print do modal

1

Sim, ele espera os dados no próximo deploy. Quando der o push no Github por exemplo, você vai conseguir visualizar o trafégo do site. Mas claro que tem que instalar e importar o @vercel/analytics