Cómo rastrear eventos de Yay! Forms con Google Tag Manager en formularios embebidos

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:

{
  "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"
      }
    ]
  }
}

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:

<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 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.

Ve a Variables en GTM: En tu espacio de trabajo de GTM, navega a la sección “Variables”.
Haz clic en Nuevo: Haz clic en el botón “Nuevo” para crear una nueva variable.
Elige el Tipo de Variable del Data Layer: Selecciona “Variable del Data Layer” como el tipo de variable.
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:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === 'id_do_campo';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

ID de la pregunta

Configuración Detallada en GTM

Crea una Variable del Data Layer para questionList:
- Nombre de la Variable: questionList
- Nombre de la Variable del Data Layer: data.questionList
Ve a Variables en GTM: En tu espacio de trabajo de GTM, navega a la sección “Variables”.
Haz clic en Nuevo: Haz clic en el botón “Nuevo” para crear una nueva variable.
Elige el Tipo de Variable: Selecciona “JavaScript Personalizada”.
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:

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:

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:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb9';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

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.

Ve a Disparadores en GTM: En tu espacio de trabajo de GTM, navega a la sección “Disparadores”.
Haz clic en Nuevo: Haz clic en el botón “Nuevo” para crear un nuevo disparador.
Elige el Tipo de Disparador: Selecciona “Evento Personalizado” como el tipo de disparador.
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

Crea una nueva etiqueta: Elige “Configuración de la Etiqueta” > “HTML Personalizado”.

Pega el código del evento de Meta Pixel:

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

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.

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!