Como rastrear eventos do Yay! Forms com o Google Tag Manager em formulários embedados
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
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 : '';
}
☝️ 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>
3. 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.
