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”: ”
Nome
”, “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”: ”
Nome
”, “content”: “Rafael” }, { “fieldId”: “661071860811e305370cadb8”, “fieldTitle”: ”
”, “content”: “test@yayforms.com” }, { “fieldId”: “661071860811e305370cadb9”, “fieldTitle”: ”
Telefone
”, “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: ``` 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); ``` 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.  ## 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**: ``` fbq(‘trackCustom’, ‘{{event}}’, { response_id: ‘{{responseId}}’, nome: ‘{{nome}}’, email: ‘{{email}}’, telefone: ‘{{telefone}}’ }); ``` 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.
