SEO

Como adicionar o Google Analytics no Next.js

Google AnalyticsVercelNext.js
Postado em:

O Google Analytics é um serviço gratuito oferecido pela Google para monitorar o desempenho de um site, oferecendo diversas ferramentas para emissão de relatórios.

Gerando o código de acompanhamento

Para gerar a ID da métrica no Google Analytics acesse a página do serviço em www.analytics.google.com. Em seguida, acesse a página de Fluxo de dados.

Configurações > Propriedade > Fluxo de dados

Armazenando o ID da métrica

O ID da métrica será salvo como uma variável de ambiente, dessa forma, crie o arquivo .env.local e salve o ID com a chave abaixo.

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXYYYZZZ

Importante: certifique-se de que o arquivo .env.local está incluso no .gitignore.

Inserindo a tag global do Google Analytics

A tag global do site (gtag.js) precisa ser inserida dentro da tag <head>. Para isso, há duas forma de fazer a inclusão:

  1. Usando o componente Head do Next.js;
  2. Usando um Document personalizado.

Para ambos os caso acima vamos ter que injetar o código abaixo na aplicação Next.js.

{/* Global site tag (gtag.js) - Google Analytics */}
<script
	async
	src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} />

<script
	dangerouslySetInnerHTML={{
		__html: `
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());

			gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');
		`
	}} />

Armazenando variáveis de ambiente em produção

Após a realização dos procedimentos acima, crie uma variável de ambiente com o nome NEXT_PUBLIC_GOOGLE_ANALYTICS em seu ambiente de produção e insira a ID da métrica.

Na Vercel você pode realizar a inclusão de variáveis de ambiente nas configurações do projeto.

Após isso, faça deploy da sua aplicação e acesse o Google Analytics para verificar se está funcionando.