Como rastrear envios de formulários do HubSpot no Google Analytics
Contribuição de
SaaS Hackers
O HubSpot é hoje uma das ferramentas de marketing mais usadas em empresas B2B, e um dos recursos mais utilizados são os formulários de captura de leads. Eles costumam aparecer em sites em CTAs como “Solicite uma demo” ou “Baixe uma cópia”, entre outros. O usuário precisa então preencher alguns dados e enviar o formulário.
Monitorar esses envios no HubSpot é fácil, mas e ter esses dados no Google Analytics? É importante configurar o rastreamento de conversões no GA para acompanhar o desempenho do site e analisar os detalhes além do que o HubSpot mostra.
Neste artigo, mostramos uma forma rápida de rastrear qualquer envio de formulário do HubSpot usando o GA e o Google Tag Manager, além de criar seus próprios eventos personalizados para cada formulário.
Requisitos
Para isso funcionar, você precisa ter o Google Tag Manager instalado no seu site. A instalação é bem simples, e você pode ler sobre ela no tutorial do Google. O Google Tag Manager é uma ferramenta muito útil para analytics de marketing digital e recomendo que você use, se ainda não usa. Basicamente, ele permite gerenciar todos os scripts personalizados do seu site sem precisar colocá-los na própria página: você instala o Tag Manager e depois instala todos os outros scripts por meio dele.
Com o Tag Manager instalado, você pode seguir os passos abaixo para configurar o rastreamento de envio de formulários do HubSpot no Google Analytics 4.
Os passos
São poucos passos, e a parte mais complicada é o Javascript, mas não se preocupe: você pode simplesmente copiar e colar o código.
- Primeiro, criamos um event listener com Javascript
- Crie um acionador de evento personalizado no Tag Manager
- Crie uma tag de evento do GA4 usando o acionador
- Visualize e teste a nova tag no GTM
- Veja o evento no GA e marque-o como evento de conversão
Passo 1: criar um event listener com Javascript
Todas as ações ou eventos em uma página web são rastreados no DOM (Document Object Model). Isso significa que, com um Javascript bem simples, podemos criar um event listener para “escutar” um evento específico e fazer algo quando ele acontecer. É assim que vamos rastrear e registrar os envios de formulários do HubSpot e as ações de conversão.
Toda vez que um formulário do HubSpot é enviado, ele cria um evento no DOM. Os detalhes desses eventos estão na documentação da API de formulários do HubSpot. O HubSpot cria um evento específico chamado onFormSubmitted sempre que um formulário é enviado com sucesso, e é esse evento que queremos escutar. Você não precisa se preocupar muito com os detalhes.
Então, como fazemos isso? O primeiro passo é abrir o Google Tag Manager e criar uma nova tag de HTML personalizado. Ela nos permite adicionar o listener em Javascript. Abaixo da captura de tela, incluímos o código que você pode copiar e colar na seção de HTML.
Esta é a parte mais complexa do processo e, se você não tem experiência com Javascript, pode não fazer muito sentido, mas não se preocupe: é bem fácil de entender quando explicado... com sorte.
Ignore algumas partes deste código, pois elas não farão sentido sem entender como o Javascript funciona. Basicamente, este script adiciona um EventListener à janela aberta e, quando encontra um evento cujo tipo de dado atende aos requisitos mencionados na pergunta, adiciona um novo evento ao chamado data layer.
O data layer é um objeto Javascript (algo virtual). Ele passa informações do seu site para o Google Tag Manager; assim, quando esse evento acontece, a informação é enviada ao data layer.
Este é o código que você precisa copiar e colar. Veja o que ele significa:
Se você quiser criar um evento que rastreie TODOS os envios de formulários do HubSpot, pode remover do JS a condição que diz event.data.id === “id”. O ID que você coloca ali é o ID do formulário, que você encontra no HubSpot. Ao remover esse elemento do script, o evento será disparado sempre que qualquer formulário for enviado.
Disparar um evento específico em um formulário específico é uma prática melhor do que usar um evento global de formulário, porque dá mais controle sobre os eventos e as convenções de nomenclatura.
O resultado final deste código, quando publicado no Tag Manager, é a criação de um novo evento chamado "form-submission-event-name" (você pode dar o nome que quiser). Agora você pode usar o nome desse evento para acionar outra coisa, então vamos configurar um acionador usando esse nome.
Passo 2: criar um acionador de evento personalizado
Agora você tem um event listener configurado e um novo evento criado. O próximo passo é configurar um acionador com base no evento que agora é enviado ao Datalayer. É simples e basta criar um novo evento personalizado e adicionar o nome do evento que você criou no JavaScript.
No acionador, você precisa usar exatamente o mesmo nome de evento que especificou no passo anterior, no código Javascript. Isso transforma esse evento em um acionador que podemos usar para disparar outras tags no Google Tag Manager. Dá para fazer de outra forma, mas acho que esta é a mais limpa.
Esse acionador agora será usado como referência para o nosso evento do GA4. Ou seja, toda vez que esse evento acontecer, o acionador dispara o evento do Google Analytics.
Passo 3: criar uma tag do GA4 que referencia o evento
Este próximo passo é bem direto. Agora você deve criar uma nova tag de evento do GA4 no Google Tag Manager, como mostrado abaixo. Aqui você precisa selecionar um acionador, e é onde escolhemos o acionador que acabamos de criar no passo 2. Por fim, dê um nome a ela. Por exemplo, a nossa se chama ‘Request a Demo’.
Passo 4: visualizar e testar a nova tag
Em seguida, visualize e teste a nova tag no seu formulário de teste ou no formulário real, conforme a sua configuração, para verificar se ela dispara corretamente e funciona como esperado. Se não funcionar, o problema mais comum é o nome do evento não ser o mesmo.
Passo 5: ver o evento no Google Analytics e marcá-lo como conversão
Depois de testar a tag e confirmar que o evento dispara corretamente no seu contêiner do Google Tag Manager, você pode ir ao Google Analytics e ver se ele aparece lá. O ideal é fazer isso na visualização em tempo real.
Quando você vir que o evento está sendo registrado no Google Analytics, vá até a área de administração e ative-o como conversão, se quiser rastreá-lo dessa forma. E pronto, está feito.
A maioria dos sites tem apenas uma ação principal de conversão, mas você pode querer rastrear também conversões de conteúdos baixados ou de outros cadastros e registros. Se for ampliar os eventos rastreados, pense na convenção de nomenclatura dos seus eventos e procure mantê-la consistente, para facilitar a revisão de todos eles no futuro.
Por que configurar conversões no Google Analytics?
Algumas pessoas não configuram o rastreamento de conversões no Google Analytics porque conseguem rastrear e registrar todos os envios de formulários na própria ferramenta em que criaram o formulário, como o HubSpot ou o Salesforce.
O problema de rastrear os envios de formulários apenas no CRM é que, se você trocar de ferramenta, perde os dados históricos. Também fica mais difícil analisar as taxas de conversão e as métricas do seu site se você não registra as conversões no Google Analytics.
Você pode conectar o Hubspot diretamente à sua conta do Google Ads e importar conversões de lá, mas também pode importar conversões do Google Analytics. Isso dá mais flexibilidade e preparo para o futuro, e na minha opinião é considerado uma boa prática.
Como criar eventos no HubSpot para o Google Ads
Além de configurar eventos no Google Analytics, se você usa o HubSpot, pode criar eventos personalizados com base nos dados do seu CRM para otimizar suas conversões no Google Ads, desde que conecte suas contas do Google Ads e do HubSpot.
O exemplo abaixo mostra como criei 3 eventos com acionadores diferentes. Eles são sincronizados de volta com o Google Ads, e você pode selecioná-los lá para otimizar seus anúncios para essas ações de conversão. Há um guia mais detalhado sobre isso na base de conhecimento do HubSpot, aqui.
Como usar conversões otimizadas no Google Ads com o HubSpot
Enhanced conversions é um recurso do Google Ads que pode melhorar a precisão da medição das suas conversões e viabilizar uma otimização de lances mais eficiente. Ele complementa as tags de conversão que você já usa, enviando ao Google, de forma segura para a privacidade, dados de conversão first-party do seu site em formato hash.
Quando um cliente realiza uma conversão no seu site, como uma solicitação de demo, você normalmente recebe dados first-party dele, como e-mail, nome e outras informações da empresa. Esses dados podem ser capturados nas suas tags de conversão, convertidos em hash, enviados ao Google nesse formato e usados para aprimorar a medição das suas conversões.
Dependendo do tipo de enhanced conversions que você usa, os dados em hash são aplicados de maneiras diferentes para melhorar a medição. Para quem faz marketing B2B, isso é útil: se alguém estiver conectado a uma conta Google corporativa no trabalho, a otimização pode se basear nesses dados.
Os dados são então usados para associar seus clientes às contas Google em que eles estavam conectados quando interagiram com um dos seus anúncios.
Contribuição de
SaaS Hackers
