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.

Vá para Variáveis no GTM:No seu espaço de trabalho do GTM, navegue até a seção "Variáveis".
Clique em Novo:Clique no botão "Novo" para criar uma nova variável.
Escolha o Tipo de Variável do Data Layer:Selecione "Variável do Data Layer" como o tipo de variável.
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

Crie uma Variável do Data Layer para **questionList** :
Nome da Variável: questionList
Nome da Variável do Data Layer: data.questionList
Vá para Variáveis no GTM:No seu espaço de trabalho do GTM, navegue até a seção "Variáveis".
Clique em Novo:Clique no botão "Novo" para criar uma nova variável.
Escolha o Tipo de Variável:Selecione "JavaScript Personalizada".
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

Vá para Gatilhos no GTM:No seu espaço de trabalho do GTM, navegue até a seção "Gatilhos".
Clique em Novo: Clique no botão "Novo" para criar um novo gatilho.
Escolha o Tipo de Gatilho: Selecione "Evento Personalizado" como o tipo de gatilho.
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)

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

Crie uma nova tag:
Escolha "Configuração da Tag" > "HTML Personalizado".
Cole o código do evento do Meta Pixel:

<script>
fbq('trackCustom', '{{event}}', {
  response_id: '{{responseId}}',
  nome: '{{nome}}',
  email: '{{email}}',
  telefone: '{{telefone}}'
});
</script>

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!

Atualizado em: 13/01/2025