É um fato inegável que o React e o Google Analytics são uma das ferramentas e bibliotecas mais populares entre a comunidade de analistas de web. O Google Analytics é a ferramenta de análise de web mais utilizada, que ajuda a rastrear e reaproximar facilmente seus usuários.
O Google Analytics 4 (GA4) oferece métodos de medição mais abrangentes, como relatórios personalizados e análise de inteligência, ao mesclar seu aplicativo web e móvel. Além disso, ele fornece insights melhores sobre suas estratégias de marketing digital em comparação com o Universal Analytics (UA).
Conhecido por ser rápido e simples, o React é a biblioteca de JavaScript de front-end mais popular no campo do desenvolvimento web. Usar o Google Analytics em seu site baseado em React oferece os seguintes benefícios:
- Você pode descobrir de qual país seus usuários estão gerando tráfego e quais são as suas características demográficas.
- Você pode ver quanto tempo seus usuários passam em quais páginas.
- Você pode medir o Enhanced Ecommerce e eventos personalizados.
- Você pode relatar bugs no seu aplicativo React.
- Você pode medir o comportamento do usuário para testes A/B no seu aplicativo.
Supondo que você tenha uma conta do Google Analytics 4 e um site baseado em React, vamos ver como configurar uma propriedade react google analytics saudável passo a passo.
Em primeiro lugar, é necessário criar uma propriedade GA4 dentro da sua conta atual do Universal Analytics. Você pode usar o assistente de configuração de propriedade GA4 para isso. Clique em "Começar" e ele será instalado instantaneamente sem nenhuma pré-configuração.
Você pode ver que a instalação do GA4 foi bem-sucedida na seção de propriedade conectada.
Google Analytics 4 Measurement ID
Metade do nosso trabalho já foi concluído. Agora que recebemos a parte mais importante, que é o ID de medição GA4, que começa com G-, você pode completar a instalação do GA4 no site baseado em React.
Integração do Google Analytics com React
No ecossistema React no mundo do marketing digital, geralmente são utilizados geradores de sites estáticos (SSG) como Gatsby e NextJS para gerenciamento de páginas, suporte a plugins, CMS, velocidade do site e preocupações de compatibilidade com SEO.
Agora vamos começar com os métodos de integração possíveis.
Adicionando o script Gtag Primeiro, você precisa instalar o pacote react-ga em seu aplicativo.
yarn add react-ga
Então você deve adicionar o pacote react-ga em index.js ou app.js.
import ReactGA from 'react-ga'; const TRACKING_ID = "G-XXXXXXXXXX"; // YOUR_OWN_TRACKING_ID ReactGA.initialize(TRACKING_ID);
Um dos problemas mais comuns em aplicativos React ocorre nos métodos de renderização, especificamente, CSR (Renderização do lado do cliente) e SSR (Renderização do lado do servidor).
Em seus aplicativos SPA (Single Page Application), você deve enviar seus eventos com history.listen usando react-router-dom para evitar esses problemas de renderização.
import React from 'react'
import { withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
const RouteChangeTracker = ({ history }) => {
history.listen((location, action) => {
ReactGA.set({ page: location.pathname });
ReactGA.pageview(location.pathname);
});
return <div></div>;
};
export default withRouter(RouteChangeTracker);Gatsby GTAG Plugin
Se você usa o motor Gatsby em seu site, é recomendado adicionar o gatsby-plugin-google-gtag.
Primeiro, você precisa instalar o plugin gatsby-plugin-google-gtag.
yarn add gatsby-plugin-google-gtag
Então você deve atualizar o arquivo gatsby-config.js da seguinte maneira:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
trackingIds: [
"GA-TRACKING_ID", ],
gtagConfig: {
optimize_id: "OPT_CONTAINER_ID",
anonymize_ip: true,
cookie_expires: 0,
},
pluginConfig: {
head: false,
respectDNT: true,
exclude: ["/preview/**", "/do-not-track/me/too/"],
},
},
},
],
}Devido ao SSR, você também pode precisar enviar seus eventos personalizados, como mostrado abaixo:
typeof window !== "undefined" && window.gtag("event", "click", { ...data })Adicionando GTAG Script no Next.JS
Na pasta onde seu aplicativo Next.js está localizado, você pode abrir o arquivo .env.local, para que você possa adicionar o seu ID de Medição.
NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>
Você pode facilmente adicionar essa variável no arquivo .env.local, por exemplo, se você estiver usando o Vercel.
E então adicione o seguinte código no arquivo _document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
{/* 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}', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}Para capturar eventos personalizados, você deve usar o seguinte método:
export const event = ({ action, params }) => {
window.gtag('event', action, params)
}Como você pode ver, existem diferentes métodos de integração do Google Analytics 4 de acordo com diferentes frameworks.
No entanto, independentemente do framework React que você estiver usando, é importante entender como o Google Analytics extrai dados de qualquer aplicativo web. Isso evitará possíveis erros de medição e integração em seu site. Além disso, é importante testar e verificar a implementação para garantir que está funcionando corretamente.
Para entender todo o funcionamento e possibilidades, você pode conferir a toda documentação do Google Analytics 4 aqui.