Rastreie o formulário Elementor com o Gerenciador de tags do Google e o Google Analytics 4

jan 4 2023

Nesta postagem do blog, veremos como rastrear formulários que foram criados com o plug-in Elementor Pro WP .

Para quem não sabe, Elementor é um construtor de sites ou WordPress muito popular. Quão popular? Aqui estão as estatísticas do Builtwith :

De qualquer forma, vamos focar mais em uma única funcionalidade deste plugin, form. E mais especificamente – como rastrear envios de formulário Elementor com Google Tag Manager e Google Analytics.

O ouvinte AJAX não está funcionando

Sempre que tenho que rastrear um determinado formulário, verifico como ele funciona para o usuário final. Envio o formulário e verifico se:

Redireciona para uma página de “obrigado”
Ou talvez apenas mostre uma mensagem de “obrigado” sem fazer mais nada
Ou talvez esse formulário esteja no iFrame, etc.

Dependendo da lista de itens acima, um método de rastreamento de formulário diferente deve ser escolhido.

No caso do Elementor, notei que o formulário não recarrega a página nem redireciona o visitante para nenhum outro lugar. Ele apenas exibe uma mensagem de “obrigado”. Nota: se o seu formulário redirecionar para outra página, pule para um dos últimos capítulos deste artigo , onde forneço uma solução.

Normalmente, quando apenas uma mensagem de sucesso é exibida, isso indica que o formulário está usando AJAX e pode ser rastreado seguindo este método . Infelizmente, desta vez, a técnica não funcionou.

É por isso que mudei para outra opção.

Gatilho de visibilidade do elemento para o resgate!

Este gatilho permite rastrear o momento em que um determinado elemento aparece na tela. No meu caso, o formulário Elementor exibe a seguinte mensagem sempre que um formulário é enviado com sucesso .

Para verificar se o gatilho funcionará, precisamos criar um. Na interface do GTM, vá para Gatilhos > Novo > Escolha o gatilho “Visibilidade do elemento” que se parece com este:

Precisamos instruir o Gerenciador de tags do Google em qual elemento exato estamos interessados. Existem dois métodos de seleção de como podemos realmente escolher essa mensagem de sucesso. É um seletor de ID ou CSS. Neste ponto, ainda não temos certeza de qual é a melhor opção, então vamos inspecionar o elemento de mensagem real.

Volte para o site onde o Formulário Elementor está presente, clique com o botão direito nele e clique em Inspecionar. Infelizmente, no meu caso, a mensagem de sucesso não possui nenhum ID. Isso significa que o ID (como método de seleção não funcionará) e nossa única esperança é o seletor de CSS.

Portanto, teremos que usar essas duas classes CSS. Se você vir outras classes, tente usá-las.

Dica profissional: você deve ler este guia antes de usar os seletores de CSS . Isso vai te ajudar muito no GTM. (Também os explico em meu curso Intermediate GTM ).

Copie essas duas classes e cole-as nas configurações do Visibility Trigger. Antes de fazer isso, altere o método de seleção para CSS selector . Na frente de cada classe, adicione um ponto e certifique-se de que não haja espaços adicionais entre suas duas classes.

Em CSS, um ponto significa uma classe .

Portanto, o resultado final (no meu caso) é .elementor-message.elementor-message-success .

Em seguida, role um pouco para baixo e ative Observar alterações de DOM. Isso rastreará a aparência do elemento se ele aparecer em uma tela dinamicamente (não devido à rolagem).

Se houver apenas um formulário em uma página, mantenha o acionador disparando apenas uma vez por página . Agora, vamos testar se esse gatilho realmente funciona. Salve-o, atualize o modo de visualização e depuração e atualize a página que contém o formulário Elementor.

Envie o formulário. O evento Element Visibility apareceu no console de depuração do GTM?

Se sim, é exatamente isso que você deve procurar. Caso contrário, verifique se o seletor de CSS foi inserido corretamente ou se você atualizou a página e o modo de visualização e depuração corretamente.

Sempre atualize o modo de visualização e depuração primeiro, só então a página da Web real em que você está trabalhando.

Tag do Google Analytics para rastrear o formulário Elementor

O próximo passo é enviar um evento para o Google Analytics sempre que aquela mensagem de “obrigado” aparecer na tela. Neste tutorial, presumo que você já tenha instalado o Google Analytics 4 (via Google Tag Manager) e criado a tag de configuração.

Na interface do Google Tag Manager, vá para Tags > Novo > escolha Google Analytics: GA4 Event . Em seguida, insira as seguintes configurações:

Usei o evento generate_lead porque é o que o Google recomenda para envios de formulários. Mas “recomendado” não significa “obrigatório” e você pode escolher um nome de evento diferente.

Em seguida, clique na seção Triggering e escolha o gatilho que criamos no capítulo anterior ( Visibilidade do elemento ).

Teste

Salve todas as alterações no contêiner do Gerenciador de tags do Google, atualize o modo de visualização e depuração e atualize a página onde o formulário Elementor está presente. Preencha todos os campos e envie.

Aqui estão as coisas que deveriam acontecer:

O evento Visibilidade do elemento deve ter aparecido no modo de visualização e depuração
Clique nesse evento no console de depuração e você verá a tag GA4 Event acionada

Agora vá para o Debugview do GA4 e verifique se esse evento está visível lá. Você pode encontrá-lo acessando Admin > DebugView no lado esquerdo da interface do GA4. Clique.

Em seguida, você precisará encontrar seu dispositivo:

Como você ativou a visualização do GTM e o modo de depuração, todos os seus eventos do GA4 ficarão visíveis na visualização de depuração. Verifique se generate_lead (ou qualquer outro nome escolhido) é exibido no feed.

O motivo pelo qual vejo generate_lead marcado com um ícone verde é que configurei o evento como uma conversão .

Se a exibição de depuração não estiver funcionando para você, leia este guia .

E é isso! Depois de ver o evento na visualização de depuração, isso significa que o rastreamento do formulário está funcionando. Acesse o Gerenciador de tags do Google e publique as alterações. Você pode fazer isso clicando no grande botão azul ENVIAR no canto superior direito da interface.

Após 24 a 48 horas, você começará a ver o evento generate_lead no relatório de eventos ( Relatórios > Engajamento > Eventos ).

Vários formulários Elementor na mesma página?

Todos os capítulos anteriores desta postagem no blog são úteis se você tiver apenas um formulário em uma página. Mas e se você tiver vários formulários (e seus propósitos forem únicos)? Você gostaria de distingui-los de alguma forma, certo? Bem, isso é realmente possível.

Mas para implementar a solução mais robusta, você precisará acessar as configurações desses formulários no painel de administração do WP.

Vá para WordPress admin> escolha a página onde estão esses vários formulários e abra o Elementor Editor. Você pode fazer isso clicando neste botão.

Agora clique no primeiro formulário e você verá suas configurações no lado esquerdo do editor. Em seguida, clique em Opções adicionais . Você verá o campo ID do formulário . Usaremos este campo para identificar cada formulário. Digite algumas informações significativas nesse campo. Se for o formulário de contato principal, o formulário de contato principal pode ser uma boa opção para inserir. Se for algum formulário de geração de leads, você pode inserir id lead-gen-ebook , etc.

Salve a página, vá para o front-end do site e atualize a página. Clique com o botão direito do mouse em qualquer lugar em um formulário Elementor e escolha Inspecionar . Se você começar a escalar a árvore DOM na guia Elementos das ferramentas de desenvolvimento do seu navegador, eventualmente verá um elemento semelhante a este (talvez apenas com uma classe diferente).

É aqui que o ID do formulário fica visível no front-end. Mas isso é apenas o começo. Agora precisamos obter o ID do formulário quando a mensagem “Obrigado” aparecer após o envio bem-sucedido do formulário. Para fazer isso, usaremos a técnica de Simo Ahava de capturar o elemento correto .

Para implementar isso, precisaremos seguir estas etapas:

Crie uma tag HTML personalizada com o polyfill (que ajudará os navegadores mais antigos a suportar esta solução)
Crie uma variável JS personalizada que será usada para escolher o elemento correto (ela será usada como uma variável de utilitário)
Crie uma variável JS personalizada que retornará o valor do ID do formulário Elementor

Lembre-se: para que isso funcione, você deve inserir IDs de formulário individualmente nas configurações de cada formulário (no construtor de páginas Elementor), assim como mostrei vários parágrafos atrás.

#1. Marca HTML personalizada com Polyfill

Um polyfill funciona como uma solução alternativa. Existem algumas coisas/recursos que os navegadores mais antigos não suportam (o que significa que o Custom JS mais recente não funcionará). Graças aos polyfills (certos códigos personalizados carregados em uma página), os navegadores mais antigos podem suportar mais coisas.

Nesse caso, usaremos um método Element.matches() que não é compatível com navegadores mais antigos . Isso pode ser resolvido disparando uma tag HTML personalizada com o seguinte código:

<script>
  if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        funções) {
            var corresponde = (este.documento || este.proprietárioDocumento).querySelectorAll(s),
                i = correspondências.comprimento;
            while (--i >= 0 && matches.item(i) !== this) {}
            retornar i > -1;            
        };
  }
</script>

Eu vi esse código primeiro no blog do Simo , e ele pegou emprestado do MDN .

Portanto, crie uma tag HTML personalizada, cole o código e configure-o para disparar em todas as páginas.

#2. variável de utilidade

A próxima etapa é criar uma variável JS personalizada com o seguinte código:

função() {
  return function(alvo, seletor) {
    while (!target.matches(seletor) && !target.matches('body')) {
      alvo = target.parentElement;
    }
    return target.matches(seletor) ? alvo: indefinido;
  }
}

Nomeie-o como cjs, encontre o mais próximo . É muito importante nomear a variável exatamente dessa forma porque a usaremos na Etapa 3 (diferencia maiúsculas de minúsculas).

#3. Variável que retorna o ID do Formulário Elementor

E a etapa final é criar uma variável que retorne o ID do formulário Elementor após a exibição da mensagem “Obrigado” em uma tela.

função() {
  var el = {{cjs encontrar o mais próximo}}({{Click Element}}, 'form.elementor-form');
  return typeof el !== 'indefinido' ? el.id: indefinido;
}

Nomeie a variável cjs elementor form id .

Para que este código funcione, sua configuração deve atender a 3 requisitos:

A variável utilitária (do capítulo anterior) deve ser nomeada cjs find close (diferencia maiúsculas de minúsculas) porque esse nome exato é usado no código JS acima
A variável de elemento de clique integrada deve ser habilitada em seu contêiner
O seletor de CSS deve escolher o nó correto, o elemento <form> real . Na maioria dos casos, form.element-form deve funcionar (porque estamos direcionando um elemento de formulário com uma classe CSS elementor-form . Se não funcionar no seu caso, familiarize-se com os seletores CSS em primeiro lugar.

#4. vamos testar

Aqui está um rápido resumo do que você deveria ter feito até agora (se estiver tentando rastrear vários formulários Elementor na mesma página):

Você deve editar todos os formulários Elementor em seu site e adicionar IDs a eles
Crie uma tag HTML personalizada com polyfill (que ajudará os navegadores mais antigos a oferecer suporte a um método Element.matches() )
Crie uma variável utilitária (Custom JS) que subirá o Document Object Model (DOM) e escolherá o elemento
Crie uma variável JS personalizada que usará a variável de utilitário e retornará o ID do elemento de formulário (o seletor de CSS é form.elementor-form )

Agora, o teste real. Depois de fazer todas as alterações acima, publique as alterações no construtor Elementor e atualize o modo de visualização e depuração. Por fim, vá para o front-end do seu site (onde está localizado o formulário Elementor) e atualize a página.

Envie o formulário. No console de depuração do GTM, um evento de visibilidade de elemento deve aparecer. Clique nele e vá para a guia Variáveis do console de depuração. Encontre o ID do formulário elementor cjs da variável JS personalizada e verifique seu valor. Ele deve conter o ID real do formulário (esse é o ID que você deveria inserir no construtor do Elementor ao editar o formulário).

Se for exatamente isso que você vê, você pode editar a tag de evento do GA e incluir um parâmetro personalizado chamado form_id (você pode usar um nome diferente se desejar e inserir a variável {{cjs elementor form id}} como seu valor:

#5. Registrar uma dimensão personalizada no GA4

Na configuração acima, adicionamos um parâmetro form_id. Atualmente, esse parâmetro não é suportado pelo GA4 (por padrão), portanto, precisamos registrá-lo como uma dimensão personalizada (se quisermos vê-lo nos relatórios).

No Google Analytics 4, vá para Admin > Definições personalizadas.

Clique em Criar dimensões personalizadas . E então, insira as seguintes condições:

Certifique-se de que essa dimensão personalizada use o escopo Event e o parâmetro Event seja form_id (é exatamente o mesmo valor que usamos na tag de evento do Gerenciador de tags do Google).

Dentro de 24 a 48 horas depois de salvar esta dimensão, ela começará a preencher os dados.

Um dos lugares onde você pode ver os valores dessa dimensão é em Relatórios > Engajamento > Eventos e, em seguida, clique em generate_lead ou em algum outro nome de evento usado para o formulário Elementor.

Solução alternativa de rastreamento – redirecionamento

Os formulários Elementor também permitem que os proprietários de sites redirecionem os visitantes se eles enviarem o formulário com sucesso. Você pode fazer isso clicando no formulário e escolhendo a opção Ações após o envio na barra lateral esquerda.

No campo, insira Redirecionar . Isso adicionará uma nova opção à barra lateral. Clique nele e insira a URL para onde deseja redirecionar.

Se você tiver apenas uma página de “obrigado” para todos os formulários, uma boa prática seria adicionar um parâmetro de consulta dependendo de cada formulário.

Por exemplo, se você tiver dois formulários ( geração de leads 1 e geração de leads 2 ) que redirecionam para a mesma página example.com/thank-you/, você pode inserir os seguintes URLs de redirecionamento nas configurações desses formulários:

O URL de redirecionamento do formulário 1 de geração de leads pode ser https://www.example.com/thank-you/?form-name=lead-gen1
O URL de redirecionamento do formulário 2 de geração de leads pode ser https://www.example.com/thank-you/?form-name=lead-gen2

Embora, tecnicamente, os visitantes sejam redirecionados para a mesma página, você poderá distinguir os envios de formulário com base no parâmetro de consulta do nome do formulário .

Além disso, se você quiser enviar o valor do parâmetro de consulta form-name para outras ferramentas, como o Google Analytics, use a variável de URL .

Acompanhe o formulário do Elementor com o Google Tag Manager: palavras finais

E esse é o fim de mais um artigo relacionado ao rastreamento de formulários em minha postagem no blog. A coisa mais complicada se você deseja rastrear o Elementor Form é que o ouvinte AJAX não os suporta. Portanto, você precisa encontrar outro método para rastreá-los com GA e GTM.

E, neste caso, sua outra opção é o gatilho de visibilidade do elemento + uma ajudinha dos seletores de CSS.

Se você tiver vários formulários em uma única página, isso também não é um problema. Você precisará atualizar as configurações dos formulários no construtor Elementor (no administrador do WP) e adicionar IDs de formulário. Feito isso, use o método de Simo Ahava para escolher o elemento correto e leia o ID do formulário depois de enviado com sucesso.

Isso não é ciência de foguetes se você souber onde procurar. Você saberia como resolver esse problema sozinho se tivesse feito meu curso Intermediate GTM (onde mostro a combinação do Element Visibility Trigger + CSS Selectors).

Facebook Comments Box