Configurando conversões do Contact Form 7 no GTM e acompanhe pelo GA

WordPress

Olá amiguinhos, cá estou de volta outra vez com uma dica muito útil para você que usa WordPress e analisa os acessos e as converões provenientes do Contact form 7 usando o GA (Google Analytics) junto ao GTM (Google Tag Manager).

A alguns dias precisei acompanhar as conversões de formulários do Contact Form 7 em um projeto. Uma tarefa fácil,  levando em conta que com o GTM é possível configurar praticamente qualquer tipo de ação dos usuários em sites, blogs, e-commerces etc. Mas algo de errado não estava certo!

Após configurar as metas no GTM, notei que as conversões estavam sendo contadas mesmo quando o formulário não enviava o email por algum erro de preenchimento por parte do usuário ou por erro devido a alguma configuração incorreta. O problema é que isso gerava resultados incompatíveis com os demais relatórios.

A solução para esse pequeno problema é bem simpels, mas a configuração requer editar código javascript. Caso não tenha esse conhecimento consulte o seu desenvolvedor frontend.

Vincule seu GA ao seu GTM

Para começar garanta que seu GA esteja integrado ao seu GTM. Caso não esteja você pode configurar facilmente seguindo este post da RD. Este vinculo facilita e muito a configuração de eventos e metas que devem ser acompanhadas no seu projeto. Então vamos lá.

Configurando a conversão no GTM

Para que a conversão seja contada corretamente precisaremos configurar uma trigger (gatilho) no GTM. O que é uma tarefa bem fácil. Basta seguir os próximos passos e ser feliz.

Configurando o gatilho

O trigger ou gatilho serve para indicar quando uma determinada tag será acionada. Podemos definir o acionamento através de um clique, do carregamento de uma página, da submissão de um formulário e de várias outras formas diferentes. Mas vamos ao nosso caso.

No GTM vá ao menu Triggers

Trigger - O gatilho no GTM

Crie um evento personalizado.

Utilizaremos um evento personalizado para que o identificador possa ser manipulado e disparado da maneira que acharmos mais interessante.

Dê um nome para o seu gatilho

Esse nome será utilizado para o script que irá disparar esse gatilho.

Configurando o gatilho

Crie a tag equivalente

Agora você deverá configurar uma tag que servirá como identificador para o gatilho. Essa TAG será a acionada sempre que o evento for executado pelo usuário.

  1. Defina o tipo de sua tag com evento
  2. Dê um nome para a categoria
  3. Nomeie a ação
  4. E adicione um label

Criando a tag no GTM

Configurando o evento no GA

No GA você deverá referenciar a tag criada no GTM para que ele possa assimilar o evento quando ele for acionado pelo usuário. Essa éuma parte importante do processo, já que é essa a parte que fará a ligação entre o Google Analytics e o Google Tagmanager. Então vamos lá!

Clique na engrenagem que está localizada na página inicial do GA do lado inferior esquerdo. Você será direcionado à área de administração da sua conta selecionada no GA.

Clique em Goals como na imagem abaixo.

Configurando o evento no Google Analytics

Clique em criar nova meta. Como eu havia dito anteriormente, esse passo é de suma importância no processo, então digite corretamente os detalhes do evento, conforme preenchido no último passo da criação da TAG no GTM.

Configurando o evento no Google Analytics

Pronto, agora que você criou seu gatilho, configurou sua meta corretamente, vamos ao que interessa. Mas antes para nos auxiliar, vamos instalar o Google Tag Assistant. Não vou explicar como ele funciona aqui, mas você pode dar uma olhadinha no support do Google.

Disparando o evento no Contact Form 7

Após configurar corretamente o seu evento use o código abaixo para disparar a trigger no GTM. O disparo só será realizado caso o email tenha sido enviado com sucesso! O script abaixo foi escrito utilizando o jQuery, pois o projeto já o utilizava.

// Esconde o botão de envio para evitar novos cliques
$('.wpcf7-submit').click(function(event) {
    var boxForm = $(this).parent('form').attr('id');

    // Esconde o botão de envio do form, para evitar novos cliques 
    $('#'+boxForm+' .wpcf7-submit').css('display', 'none');

    // Dados inválidos reexibe botão
    $('.wpcf7').on('wpcf7:invalid', function(event){
        $('.wpcf7-submit').css('display', 'block');
    });

    // Formulário enviado com sucesso
    $('.wpcf7').on('wpcf7:mailsent', function(e){
        $('.wpcf7-submit').css('display', 'block');
        
        // Dispara gatilho
        dataLayer.push({'event': 'envio-de-formulario'});
        
    });

    // Falha ao enviar reexibe botão
    $('.wpcf7').on('wpcf7:mailfailed', function(e){
        $('.wpcf7-submit').css('display', 'block');
    });

});

Agora basta acompanhar as conversões e é claro pensar muito bem na usabilidade do seu formulário. Ah, o script foi testado na última versão do WordPress com a última versão do Contact Form 7, pois nunca se deve utilizar uma versão desatualizada de nenhum dos dois carinhas acima. Até a próxima! o/