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:
- 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.
- 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:
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!
Divulgação: estou usando meus links de afiliados ao longo deste artigo.
Isso é ótimo! Obrigado por juntar. Isso funcionará para GA4 também?
Pode, basta configurar o Gerenciador de tags do Google para Eventos GA4 em vez de eventos do Universal Analytics.
Estou usando várias etapas no formulário elementor, mas quero rastrear o evento quando o usuário clicar no botão Avançar.
Você pode me conhecer este evento. Obrigado!
Em vez de documento pronto, você pode especificar a classe do seu próximo botão e modificar os detalhes do evento.
Oi! É possível passar para o GTM dados de campos de formulário após o envio?
Sim, acredito que sim usando uma camada de dados no GTM e, em seguida, faça um evento de envio de postagem para enviar os dados para o gerenciador de tags, usando:
dataLayer.push({'variable_name': 'variable_value'});