Principal Tracking Como rastrear eventos do Yay! Forms com o Google Tag Manager em formulários embedados

Como rastrear eventos do Yay! Forms com o Google Tag Manager em formulários embedados

Última atualização em Dec 20, 2025

Esse tutorial vai ajudar você a capturar e rastrear eventos disparados por um formulário Yay! Forms incorporado (“embedado”) no seu site, usando o Google Tag Manager (GTM). Ao final, você terá os eventos do formulário sendo enviados ao dataLayer, com variáveis e gatilhos configurados para medir visualizações, inícios, respostas e submissões, além de integrar esses dados com tags como Google Analytics 4 (GA4) e Meta Pixel.

Visão geral do rastreamento com Yay! Forms e GTM

Use formulários incorporados ("embedados") 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": "[email protected]"
      },
      {
        "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 | Nome da Variável do Data Layer | ---- | responseId | data.responseId | fieldId | data.fieldId | fieldTitle | data.fieldTitle | content | data.content | questionList | 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 : '';
}

☝️ Você pode encontrar o ID de uma pergunta na tela de edição do formulário acessando as configurações do próprio campo. Basta selecionar o campo desejado e localizar o ID na seção de configurações, conforme mostrado na imagem abaixo.

ID da questão

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
  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: Selecione "JavaScript Personalizada".
  4. 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 : '';
}

☝️ 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 | Nome do Evento | ---- | YFStart | YFStart | YFView | YFView | YFAnswer | YFAnswer | YFSubmit | 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)
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.

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

Conclusão

Este conteúdo mostrou como enviar eventos de formulários embedados do Yay! Forms para o dataLayer via GTM, como estruturar variáveis para capturar informações relevantes e como preparar gatilhos e tags para ativar medições e integrações como GA4 e Meta Pixel, ajudando a entender melhor o engajamento dos usuários.