Este tutorial es para ti que “embebiste” un formulario en tu sitio y ahora necesitas capturar eventos disparados en el formulario a través de Google Tag Manager (GTM) que está en tu sitio. Usa formularios incrustados (“embebidos”) de Yay! Forms para la participación del público y la generación de leads. Puedes rastrear fácilmente visualizaciones de formularios, inicios, respuestas y envíos como conversiones e interacciones usando Google Tag Manager (GTM) y este código de listener de eventos de Yay! Forms. ## Ejemplo de Objeto para el Data Layer de GTM Aquí tienes un ejemplo de un objeto enviado al `dataLayer` de GTM cuando se responde una pregunta: ```json { “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” } ] } } ``` ## Guía Paso a Paso ###### Paso 1: Crea una etiqueta de HTML personalizado en GTM Comienza creando una etiqueta de HTML personalizado en GTM donde puedas pegar cómodamente el código del listener. Esta etiqueta escuchará los eventos del iframe de Yay! Forms y los enviará al `dataLayer` en la página principal. ###### Paso 2: Implementa el Código del Listener de Eventos Pega el siguiente código del listener de eventos en la etiqueta de HTML personalizado que creaste: ```html 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 escucha mensajes del iframe de Yay! Forms y envía los eventos relevantes al `dataLayer` . ###### Paso 3: Configura Variables del Data Layer Para capturar detalles del formulario como ID de la respuesta, ID del campo, título del campo, contenido y lista de preguntas, necesitas configurar variables del `dataLayer` en GTM. 1. **Ve a Variables en GTM**: En tu espacio de trabajo de GTM, navega a la sección “Variables”. 2. **Haz clic en Nuevo**: Haz clic en el botón “Nuevo” para crear una nueva variable. 3. **Elige el Tipo de Variable del Data Layer**: Selecciona “Variable del Data Layer” como el tipo de variable. 4. **Configura Cada Variable**: Crea las siguientes variables con sus respectivos Nombres de Variable del Data Layer: > Nombre de la variable | Nombre de la Variable del Data Layer | > ---- | > responseId | data.responseId | > fieldId | data.fieldId | > fieldTitle | data.fieldTitle | > content | data.content | > questionList | data.questionList | ###### Paso 4: Configura Variables Personalizadas Usando JavaScript Personalizado Para capturar datos específicos del usuario, como nombre, email y teléfono, usa variables JavaScript personalizadas que iteran sobre el array `questionList` para encontrar los valores correctos. Ejemplo de código JavaScript personalizado: ```javascript function() { var questionList = {{questionList}}; var filtered = questionList.filter(function(question) { return question.fieldId === ‘**id_do_campo**’; }); return filtered.length > 0 ? filtered[0].content : ”; } ``` > ☝️ Puedes encontrar el ID de una pregunta en la pantalla de edición del formulario accediendo a la configuración del propio campo. Solo selecciona el campo deseado y localiza el ID en la sección de configuración, tal como se muestra en la imagen de abajo.  ## Configuración Detallada en GTM 1. **Crea una Variable del Data Layer para** `questionList` : * Nombre de la Variable: `questionList` * Nombre de la Variable del Data Layer: `data.questionList` 2. **Ve a Variables en GTM**: En tu espacio de trabajo de GTM, navega a la sección “Variables”. 3. **Haz clic en Nuevo**: Haz clic en el botón “Nuevo” para crear una nueva variable. 4. **Elige el Tipo de Variable**: Selecciona “JavaScript Personalizada”. 5. **Configura la Variable JavaScript Personalizada para Cada Campo.** Observa los ejemplos abajo: **Variable** `nome` : * Nombre de la Variable: `nome` * Tipo de Variable: `JavaScript Personalizada` * Código de la Variable: ```javascript function() { var questionList = {{questionList}}; var filtered = questionList.filter(function(question) { return question.fieldId === ‘661071860811e305370cadb7’; }); return filtered.length > 0 ? filtered[0].content : ”; } ``` **Variable** `email` : * Nombre de la Variable: `email` * Tipo de Variable: `JavaScript Personalizada` * Código de la Variable: ```javascript function() { var questionList = {{questionList}}; var filtered = questionList.filter(function(question) { return question.fieldId === ‘661071860811e305370cadb8’; }); return filtered.length > 0 ? filtered[0].content : ”; } ``` **Variable** `telefone` : * Nombre de la Variable: `telefone` * Tipo de Variable: `JavaScript Personalizada` * Código de la Variable: ```javascript function() { var questionList = {{questionList}}; var filtered = questionList.filter(function(question) { return question.fieldId === ‘661071860811e305370cadb9’; }); return filtered.length > 0 ? filtered[0].content : ”; } ``` > ☝️ Asegúrate de usar el ID del Campo correspondiente en el Código Javascript. ###### Paso 5: Crea Disparadores de Eventos Personalizados Para permitir el disparo de tus etiquetas/píxeles de marketing, necesitas crear disparadores de eventos personalizados usando los nombres de los eventos: * YFView: Para cuando se visualiza el formulario. * YFStart: Para cuando se inicia el formulario. * YFAnswer: Para cuando se responde una pregunta. * YFSubmit: Para envíos exitosos del formulario. 1. **Ve a Disparadores en GTM**:En tu espacio de trabajo de GTM, navega a la sección “Disparadores”. 2. **Haz clic en Nuevo**: Haz clic en el botón “Nuevo” para crear un nuevo disparador. 3. **Elige el Tipo de Disparador**: Selecciona “Evento Personalizado” como el tipo de disparador. 4. **Configura Cada Disparador**: Crea los siguientes disparadores con sus respectivos nombres de eventos: > Nombre del Disparador | Nombre del Evento | > ---- | > YFStart | YFStart | > YFView | YFView | > YFAnswer | YFAnswer | > YFSubmit | YFSubmit | ###### Paso 6: Incluye Disparadores y Parámetros en Tus Etiquetas de Evento Ahora puedes incluir disparadores y parámetros en tus etiquetas de evento para Google Analytics 4 (GA4) y Meta Pixel. **Ejemplo para Google Analytics 4 (GA4)** **Crea una nueva etiqueta**: Elige “**Configuración de la Etiqueta**” > “**Google Analytics: Evento de GA4**”. **Configura los parámetros del evento**: Nombre del Evento: `{{event}}` Parámetros del Evento: * response_id: `{{responseId}}` * nombre: `{{nome}}` * email: `{{email}}` * teléfono: `{{telefone}}` **Añade un disparador**: Selecciona los disparadores de evento personalizados que creaste para `YFView`, `YFStart`, `YFAnswer` y `YFSubmit`. **Ejemplo para Meta Pixel** 1. **Crea una nueva etiqueta**: Elige “**Configuración de la Etiqueta**” > “**HTML Personalizado**”. 2. **Pega el código del evento de Meta Pixel**: ```html fbq(‘trackCustom’, ‘{{event}}’, { response_id: ‘{{responseId}}’, nombre: ‘{{nome}}’, email: ‘{{email}}’, teléfono: ‘{{telefone}}’ }); ``` 3. **Añade un disparador**: Selecciona los disparadores de evento personalizados que creaste para `YFView`, `YFStart`, `YFAnswer` y `YFSubmit`. Recomendamos usar el evento `YFAnswer` ya que no siempre el usuario va a completar el formulario. > ☝️ Asegúrate de que la variable questionList esté configurada correctamente para acceder al array completo en el dataLayer . ## Conclusión Siguiendo estos pasos, puedes rastrear eficazmente visualizaciones, inicios, respuestas y envíos de Yay! Forms usando Google Tag Manager. Esta configuración te ayudará a obtener insights más profundos sobre la participación de los usuarios y mejorar tus estrategias de marketing. Asegúrate de probar cada disparador de evento para confirmar que los eventos se están capturando correctamente y que los datos se están enviando al `dataLayer` según lo esperado. Si encuentras algún problema, verifica la configuración de tu etiqueta de HTML personalizado, variables del `dataLayer` y disparadores en GTM. ¡Buenos análisis!
