Mensurando formulários do hubspot dentro do Google Tag Manager

Dentro do Hubspot é possível criar formulários para capturar seus Leads, vou ser sincero sobre a ferramenta eu conheço pouquíssimo. Mas sei que muitos dos nossos clientes e leitores utilizam bastante essa ferramenta e a um tempo atrás tive que procurar uma solução para mensurar os dados dentro desse formulários para personalizar alguns eventos.

A idéia do cliente era a seguinte:

Lucian, eu preciso mensurar esse formulário, mas preciso também saber quais as opções ele está selecionado para traçar um perfil desse cara dentro do meu Google Analytics.

Após a reunião que eu tive com o cliente corri atrás de uma solução como sempre faço, procurando direto na documentação do próprio HubSpot. Depois de uma pequena zapeada encontrei o que precisava, o HubSpot tem uma série de eventos que são enviados através da interface MessageEvent do navegador.

Para quem não conhece essa interface representa uma mensagem enviada por um objeto alvo e já havia me servido para implementar uma camada de comunicação para um cliente que precisava monitorar um formulário que estava dentro de uma tag iframe. O link ta aí em cima para quem quiser se aprofundar no assunto.

Está tudo bem mastigado na documentação deles, inclusive segue o link, porém, ainda precisava fazer um trabalho em cima para passar para dentro desse evento personalizado as opções escolhidas pelo usuário no form. Dá uma olhada no código de exemplo que eles disponibilizam no exemplo:

            
// Example listener:

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
       someAnalyticsLib('formSubmitted');
       console.log("Form Submitted!");
   }
});
      

Bem se você não entendeu nada vou fazer uma breve descrição do que está acontecendo nesse trecho de código:

1. Primeiro ele cria uma escuta para camada de mensagem para toda vez que algo for enviado a ela a informação ser "interceptada";

2. Ele faz uma verificação para tratar somente eventos criados diretamente de sua api, essas chaves 'hsFormCallback' e 'onFormSubmit' são informações que veem direto do disparo deles;

3. 'someAnalyticsLib('formSubmitted');' deixa um exemplo prático de que nesse momento você pode disparar informações para alguma biblioteca de análise.

Coisa linda né? Cara com isso ficou fácil, pensei: Agora é só eu utilizando esse exemplo passar as informações para o dataLayer e está tudo certo 😀 E foi o que eu fiz dá uma olhada.

var dataLayer = window.dataLayer || []

window.addEventListener('message', function (event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
        var data = {
            'event': event.data.eventName
        };
        event.data.data.forEach(function(item){
            if(item.name !== 'email' && item.name !== 'phone' && item.name !== 'mobilephone') {
                return data[item.name] = item.value
            }
        })
        
        dataLayer.push(data)
    }
});

O que eu adicionei para fazer disparar as informações dentro do GTM através de eventos personalizados?

1. Primeiro defini a variável dataLayer para não ter nenhum problema de escopo por estar utilizando JS :D;

2. Dentro da condição que isola o envio do formulário declarei uma variável "data" que é responsável por montar o nome do objeto que será enviado para o dataLayer;

3. Fiz uma interação dentro da lista de informações presente dentro dos dados presentes no form e o adicionei dentro do nosso objeto "data";

4. Adicionei uma verificação para não enviar para dentro da camada de dados informações sensíveis do usuário;

5. Adicionei as informações com objeto montado para dentro da camada de dados.

Olha como as informações aparecem no debugger do GTM :D:

E esta pronto o sorvetinho, mas agora aonde eu instalo esse código para mágica acontecer? Bem como já falei em vários posts aqui na Métricas Boss é muito importante que respeitemos a camada de responsabilidade entre o Google Tag Manager e o Código Fonte, onde o GTM nunca envia eventos para si mesmo. Então como primeira solução vocês precisam mandar o seu dev instalar isso dentro do código fonte de vocês beleza?

Agora ahhh Lucian, mas eu não tenho Dev, da pra meter isso dentro do GTM? Dá MASSSSSSSS, é importante primeiro documentar o processo, segundo saber que quando fazemos esse tipo de ação estamos criando um legado ruim para dentro da empresa que trabalhamos, nesse caso trata isso como uma solução temporária e tira isso de dentro do GTM o mais rápido possível, tranks?

Dúvidas? Comentários? Sugestões?

Mande um e-mail para gente contato@metricasboss.com.br, até a próxima 😄

Nos siga no Instagram @metricasboss

Inscreva-se aqui no nosso canal do Youtube