Como Rastrear Eventos do Yay! Forms com o Google Tag Manager em Formulários Embedados

Como Rastrear Submissões do Yay! Forms com o Google Tag Manager

Melhore seus insights de marketing com dados de conversão do Yay! Forms. Use formulários incorporados do Yay! Forms para engajamento do público e geração de leads. Você pode facilmente rastrear visualizações de formulários, inícios, respostas e submissões como conversões e interações usando o Google Tag Manager (GTM) e este código de listener de eventos do Yay! Forms.

Exemplo de Objeto para o Data Layer do GTM

Aqui está um exemplo de um objeto enviado para o dataLayer do GTM quando uma pergunta é respondida:

{
  "event": "YFAnswer",
  "gtm": {
    "uniqueEventId": 1026,
    "start": 1718243777463
  },
  "data": {
    "responseId": "666a4f5ad3d586edd79fee54",
    "fieldId": "661071840811e305370cadb7",
    "fieldTitle": "<p>Nome</p>",
    "content": "Rafael",
    "variables": {score: 6},
    "hiddenFields": {src: "lp01"},
    "tracking": {
      utm_source: "facebook",
      utm_medium: "cpc",
      utm_campaign: "summer_sale",
      utm_content: "beachwear",
      utm_term: "ad1"
    },
    "questionList": [
      {
        "fieldId": "661071840811e305370cadb7",
        "fieldTitle": "<p>Nome</p>",
        "content": "Rafael"
      },
      {
        "fieldId": "661071860811e305370cadb8",
        "fieldTitle": "<p>Email</p>",
        "content": "test@yayforms.com"
      },
      {
        "fieldId": "661071860811e305370cadb9",
        "fieldTitle": "<p>Telefone</p>",
        "content": "+5511988888888"
      }
    ]
  }
}

Guia Passo a Passo

Passo 1: Crie uma Tag de HTML Personalizada no GTM

Comece criando uma tag de HTML personalizada no GTM onde você pode colar convenientemente o código do listener. Esta tag vai escutar os eventos do iframe do Yay! Forms e enviá-los para o dataLayer na página principal.

Passo 2: Implemente o Código do Listener de Eventos

Cole o seguinte código do listener de eventos na tag de HTML personalizada que você criou:

<script>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(e) {
  var key = e.message ? "message" : "data";
  var data = e[key];
  var validEventTypes = ["YFView", "YFStart", "YFAnswer", "YFSubmit"];
  
  if (validEventTypes.includes(data.type)) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': data.type,
      'data': data.eventData
    });
  }
}, false);
</script>

Este código escuta mensagens do iframe do Yay! Forms e envia os eventos relevantes para o dataLayer .

Passo 3: Configure Variáveis do Data Layer

Para capturar detalhes do formulário como ID da resposta, ID do campo, título do campo, conteúdo e lista de perguntas, você precisa configurar variáveis do dataLayer no GTM.

  1. Vá para Variáveis no GTM:No seu espaço de trabalho do GTM, navegue até a seção "Variáveis".
  2. Clique em Novo:Clique no botão "Novo" para criar uma nova variável.
  3. Escolha o Tipo de Variável do Data Layer:Selecione "Variável do Data Layer" como o tipo de variável.
  4. Configure Cada Variável:Crie as seguintes variáveis com seus respectivos Nomes de Variável do Data Layer:
    • Nome da Variável: responseId
      • Nome da Variável do Data Layer: data.responseId
    • Nome da Variável: fieldId
      • Nome da Variável do Data Layer: data.fieldId
    • Nome da Variável: fieldTitle
      • Nome da Variável do Data Layer: data.fieldTitle
    • Nome da Variável: content
      • Nome da Variável do Data Layer: data.content
    • Nome da Variável: questionList
      • Nome da Variável do Data Layer: data.questionList

Passo 4: Configure Variáveis Personalizadas Usando JavaScript Personalizado

Para capturar dados específicos do usuário, como nome, email e telefone, use variáveis JavaScript personalizadas que iteram sobre o array questionList para encontrar os valores corretos.

Exemplo de código JavaScript personalizado:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === 'id_do_campo';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

OBS: Você pode pegar o ID de uma pergunta na tela de edição do formulário. Ao selecionar uma pergunta, a URL vai acabar em algo assim ?fieldid=629gf8238a124a052r02b98.  O que vier depois do sinal de igual é o ID da pergunta.

Configuração Detalhada no GTM

  1. Crie uma Variável do Data Layer para questionList :
    • Nome da Variável: questionList
    • Nome da Variável do Data Layer: data.questionList
  2. Vá para Variáveis no GTM:No seu espaço de trabalho do GTM, navegue até a seção "Variáveis".
  3. Clique em Novo:Clique no botão "Novo" para criar uma nova variável.
  4. Escolha o Tipo de Variável:Selecione "JavaScript Personalizada".
  5. Configure a Variável JavaScript Personalizada para Cada Campo. Observe os exemplos abaixo:
  • Variável nome :
    • Nome da Variável: nome
    • Tipo de Variável: JavaScript Personalizada
    • Código da Variável:
function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb7';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}
  • Variável email :
    • Nome da Variável: email
    • Tipo de Variável: JavaScript Personalizada
    • Código da Variável:
function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb8';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}
  • Variável telefone :
    • Nome da Variável: telefone
    • Tipo de Variável: JavaScript Personalizada
    • Código da Variável:
function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb9';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

Nota

Certifique-se de usar o ID do Campo correspondente no Código Javascript.

Passo 5: Crie Gatilhos de Eventos Personalizados

Para permitir o disparo das suas tags/pixels de marketing, você precisa criar gatilhos de eventos personalizados usando os nomes dos eventos:

  • [YFView]: Para quando o formulário é visualizado
  • [YFStart]: Para quando o formulário é iniciado
  • [YFAnswer]: Para quando uma pergunta é respondida
  • [YFSubmit]: Para submissões bem-sucedidas do formulário
  1. Vá para Gatilhos no GTM:No seu espaço de trabalho do GTM, navegue até a seção "Gatilhos".
  2. Clique em Novo: Clique no botão "Novo" para criar um novo gatilho.
  3. Escolha o Tipo de Gatilho: Selecione "Evento Personalizado" como o tipo de gatilho.
  4. Configure Cada Gatilho: Crie os seguintes gatilhos com seus respectivos nomes de eventos:
    • Nome do Gatilho: YFView
      • Nome do Evento: YFView
    • Nome do Gatilho: YFStart
      • Nome do Evento: YFStart
    • Nome do Gatilho: YFAnswer
      • Nome do Evento: YFAnswer
    • Nome do Gatilho: YFSubmit
      • Nome do Evento: YFSubmit

Passo 6: Inclua Gatilhos e Parâmetros nas Suas Tags de Evento

Agora você pode incluir gatilhos e parâmetros nas suas tags de evento para o Google Analytics 4 (GA4) e Meta Pixel.

Exemplo para Google Analytics 4 (GA4)

  1. Crie uma nova tag:

    • Escolha "Configuração da Tag" > "Google Analytics: Evento do GA4".

      Configure os parâmetros do evento:

    • Nome do Evento: {{event}}
    • Parâmetros do Evento:
      • response_id: {{responseId}}
      • nome: {{nome}}
      • email: {{email}}

      • telefone: {{telefone}}

        Adicione um gatilho:

    • Selecione os gatilhos de evento personalizados que você criou para [YFView], [YFStart], [YFAnswer] e [YFSubmit].

Exemplo para Meta Pixel

  1. Crie uma nova tag:
    • Escolha "Configuração da Tag" > "HTML Personalizado".
  2. Cole o código do evento do Meta Pixel:
<script>
fbq('trackCustom', '{{event}}', {
  response_id: '{{responseId}}',
  nome: '{{nome}}',
  email: '{{email}}',
  telefone: '{{telefone}}'
});
</script>
  1. Adicione um gatilho:
    • Selecione os gatilhos de evento personalizados que você criou para "YFView", "YFStart", "YFAnswer" e "YFSubmit". Recomendamos usar o evento "YFAnswer" já que nem sempre o usuário vai concluir o formulário.

Nota

Certifique-se de que a variável questionList esteja configurada corretamente para acessar o array completo no dataLayer .

Conclusão

Seguindo esses passos, você pode rastrear efetivamente visualizações, inícios, respostas e submissões do Yay! Forms usando o Google Tag Manager. Esta configuração vai ajudar você a obter insights mais profundos sobre o engajamento dos usuários e melhorar suas estratégias de marketing. Certifique-se de testar cada gatilho de evento para confirmar que os eventos estão sendo capturados corretamente e que os dados estão sendo enviados para o dataLayer conforme esperado.

Se você encontrar algum problema, verifique a configuração da sua tag de HTML personalizada, variáveis do dataLayer e gatilhos no GTM. Boas análises!

Isso responde a sua pergunta? Obrigado pelo feedback Houve um problema em enviar seus comentários. Por favor, tente novamente mais tarde.

Ainda precisa de ajuda? Contate-nos Contate-nos