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": "[email protected]"
},
{
"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.
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:
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.
ID da questão
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:
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 : '';
}
☝️ 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:
<script>
fbq('trackCustom', '{{event}}', {
response_id: '{{responseId}}',
nombre: '{{nome}}',
email: '{{email}}',
teléfono: '{{telefone}}'
});
</script>
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!
