Introdução

Para saber em seu software ou site quantas visitas teve, qual página ou ferramenta é mais acessada, é preciso de uma ferramenta de Analytics que tenha essas informações, e uma boa opção é o Google Analytics.

No Google Analytics é possível ver essas e outras informações de forma gratuita.

Criar nova propriedade no Google Analytics

Para realizar a integração é preciso ter a conta no Google Analytics, realize a criação de conta e entre no painel.

Dentro do painel, ir em Configurações, vai ter o botão "Adicionar", clicar em adicionar propriedade.

Preencher as informações de nome da propriedade, número de pessoas da empresa e ramo de atuação.

Irá aparecer as informações para adicionar a propriedade para trackeamento com a coleta de dados, vai aparecer "Web", "IOS", "Android".

No caso de site ou software web, selecionar a opção "Web". Preencher as informações com a URL e nome do site, após preencher, clique sobre o item criado, que irá aparecer o script para adicionar o Google Analytics ao projeto.

O mais importante desse script para o Next, é o id de mensuração, esse id será adicionado no .env do Next posteriormente, copie esse Id e pode finalizar o processo dentro do Google Analytics.

Tag GA

Como integrar no Next.js

No projeto, dentro do .env.local, adicione a chave

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

Com essa chave já no .env é preciso instalar a biblioteca @next/third-parties, que é a recomendada pelo time Next.js para essa integração.

Instale com o comando:

npm install @next/third-parties@latest

Depois disso, adicione dentro do Root Layout, a chamada ao Google Analytics, utilizando a lib e passando a chave do .env que contém o Id. Dessa forma:

File: src/app/layout.tsx


import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <body>{children}</body>
      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID!} />
    </html>
  )
}

Com essa instalação, já irá trackear os eventos de mudanças de acesso a páginas.

Como trackear eventos específicos

Para trackear clicks em botões, é possível fazer chamando a função window.gtag('event', eventName, params), mas o ideal é criar um arquivo de wrapper para conter esse método e poder ser chamado em qualquer Client Component.

Crie o arquivo import { trackEvent } from '@/lib/analytics', com o conteúdo:

declare global {
  interface Window {
    gtag: (...args: unknown[]) => void
  }
}

export function trackEvent(eventName: string, params?: Record<string, unknown>) {
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', eventName, params)
  }
}

E no local que quiser trackear o evento, faça-o chamando:

import { trackEvent } from "@/lib/analytics";

<button onClick={() => trackEvent("my_event", { parameter: "value" })}>
  Button
</button>;

Como criar dimensão personalizada

Para que os parâmetros personalizados enviados junto com o evento sejam trackeados, é preciso definir esses parâmetros dentro do Google Analytics.

Vá em: GA4 Dashboard > Admin > Definições personalizadas e clique em Criar dimensão personalizada.

Dê um nome para essa dimensão, selecione o escopo, se quiser defina uma descrição e onde está Parâmetro do evento, coloque a mesma chave que é enviada junto com o evento, utilizando o exemplo acima, a chave deve ser parameter.

Conclusão

Com isso a implementação do Google Analytics em um projeto Next.js está completa, com o trackeamento de dados básicos e dados específicos.