Como rastrear envios de formulários ou elementos em eventos do Google Analytics usando JQuery

Como rastrear envios de formulários ou elementos em eventos do Google Analytics

Tenho trabalhado em um site cliente WordPress nas últimas semanas que tem algumas complexidades. Eles estão usando WordPress com uma integração para ActiveCampaign para nutrir leads e um Zapier integração para Venda do Zendesk via Formulários do Elementor. É um ótimo sistema ... dando início a campanhas de gotejamento para pessoas que solicitam informações e enviando um lead ao representante de vendas apropriado quando solicitado. Estou realmente impressionado com a flexibilidade de forma e aparência do Elementor.

A última etapa foi fornecer um painel de análise para o cliente por meio do Google Analytics, que forneceu o desempenho mês a mês nos envios de formulários. Eles têm o Gerenciador de tags do Google instalado, então já estamos capturando transações de comércio eletrônico e atividade de visualização do YouTube no site.

Fiz várias tentativas de utilizar DOM, gatilhos e eventos no Gerenciador de tags do Google para capturar o envio do formulário com êxito para o Elementor, mas não tive sorte. Testei várias maneiras diferentes de monitorar a página, observando a mensagem de sucesso que surgia via AJAX e simplesmente não estava funcionando. Então ... Fiz algumas pesquisas e encontrei uma ótima solução do Tracking Chef, chamada Elemento à prova de balas ou rastreamento de formulário com GTM.

O script utiliza jQuery e o Gerenciador de tags do Google para empurrar o Evento do Google Analytics quando o formulário é enviado com sucesso. Com algumas pequenas edições e uma melhoria de sintaxe, eu tinha tudo o que precisava. Aqui está o código:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

É muito engenhoso, observar a finalização bem-sucedida e depois passar Contato como a categoria, o nome de destino como a Ação, e Submissão como o rótulo. Ao tornar o destino programático, você pode simplesmente ter esse código no rodapé de cada página para observar o envio de um formulário. Então ... conforme você adiciona ou modifica formulários, você nunca precisa se preocupar em atualizar o script ou adicioná-lo a outra página.

Instale o script por meio do código personalizado do Elementor

Se você é uma agência, recomendo enfaticamente o upgrade ilimitado e a utilização do Elementor para todos os seus clientes. É uma plataforma sólida e o número de integrações de parceiros continua a disparar. Junte-o a um plug-in como Formulário de contato DB e você também pode coletar todos os seus envios de formulário.

Elementor Pro tem uma ótima opção de gerenciamento de script integrada. Veja como você pode inserir seu código:

Código Personalizado Elementor

  • Navegar para Elementor> Código Personalizado
  • Nomeie seu código
  • Defina a localização, neste caso, o final etiqueta corporal.
  • Defina uma prioridade se tiver mais de um script que deseja inserir e defina a ordem deles.

Envio de formulário elementor para evento GA via GTM

  • Clique em atualizar
  • Você será solicitado a definir a condição e apenas defini-la como o padrão de todas as páginas.
  • Atualize seu cache e seu script estará ativo!

Visualize sua integração do Gerenciador de tags do Google

O Gerenciador de tags do Google tem um mecanismo fantástico para se conectar a uma instância do navegador e realmente testar seu código para observar se as variáveis ​​estão sendo enviadas corretamente. Isso é essencial porque o Google Analytics não funciona em tempo real. Você pode testar e testar e testar e realmente ficar frustrado porque os dados não estão aparecendo no Google Analytics se você não percebeu isso.

Não vou fornecer um tutorial aqui sobre como visualizar e depurar o Gerenciador de tags do Google… Vou presumir que você sabe. Posso enviar meu formulário em minha página de teste conectada e ver os dados enviados aos dados GTM, pois precisam ser:

camada de dados do gerenciador de tags do google

Nesse caso, a categoria foi codificada como Formulário, o destino foi o formulário Entre em contato e o rótulo é Envio.

No Gerenciador de tags do Google, configure variáveis ​​de dados, evento, acionador e tag

A última etapa é configurar o Gerenciador de tags do Google para capturar essas variáveis ​​e enviá-las a uma tag do Google Analytics configurada para um evento. Elad Levy detalha essas etapas em sua outra postagem - Rastreamento genérico de eventos no Gerenciador de tags do Google.

Depois de configurados, você poderá ver os eventos no Google Analytics!

Obtenha o Elementor Pro

Divulgação: estou usando meus links de afiliados ao longo deste artigo.

6 Comentários

  1. 1
  2. 3
  3. 5

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.