Introducción
Este artículo te guiará paso a paso para integrar un script que capture la información de los clientes que se suscriben a tu newsletter, permitiendo que estos datos sean enviados automáticamente a WoowUp de forma rápida y eficiente, y con la etiqueta correspondiente para facilitar la segmentación en campañas.
La integración se lleva a cabo mediante Google Tag Manager.
1. Acceder a Google Tag Manager
Ingresa a tu cuenta de Google Tag Manager.
Selecciona el contenedor del sitio donde deseas implementar el script.
2. Configurar el disparador de la etiqueta
Para que el script se ejecute en el momento adecuado, es necesario configurar un disparador que indique cuándo debe activarse la etiqueta.
En el menú del lado izquierdo, desplázate hacia abajo hasta la sección de "Activadores".
Selecciona "Nuevo" de la parte superior derecha.
Asigna un nombre al disparador, como "Suscripción al Newsletter WoowUp".
En la configuración del disparador, selecciona el tipo "Envío de Formulario" para que el script se ejecute cuando el cliente envíe el formulario de suscripción.
En la sección "Algunos formularios", puedes configurar condiciones específicas, por ejemplo, indicando que el disparador se active solo en las páginas donde esté presente el formulario de suscripción.
Haz clic en "Guardar" para aplicar el disparador a la etiqueta.
3. Crear una nueva etiqueta
En el menú del lado izquierdo, selecciona Etiquetas.
Haz clic en Nueva para crear una nueva etiqueta.
Asigna un nombre a la etiqueta, por ejemplo, "WoowUp - Suscripción Newsletter".
4. Configurar la etiqueta
En la sección inferior, bajo "Activación", selecciona el activador creado previamente "Suscripción al Newsletter WoowUp".
Haz clic en Configuración de la etiqueta y selecciona "HTML personalizado".
En el campo de código HTML, pega el script de suscripción al newsletter:
<script>
// WoowUp Newsletter Script
(function() {
// Definimos las variables del formulario
var email = document.getElementById('email').value;
if (email) {
var url = "https://events.woowup.com/events/users";
var data = {
"app": "CLAVE_PUBLICA",
"email": email,
"tags": "newsletter,ecommerce"
};
var settings = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
},
body: JSON.stringify(data),
};
fetch(url, settings)
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error('Error:', error);
});
}
})();
</script>
En este ejemplo:
Se captura el correo electrónico del cliente desde el formulario de suscripción.
Se le asigna las siguientes etiquetas a los clientes: newsletter y ecommerce
Los datos se envían a WoowUp a través de su API.
Antes de guardarlo, es necesario configurar este script con datos propios de tu marca y tu entorno en WoowUp.
5. Configurar el script
5.1 Insertar Clave Pública:
En primer lugar, debemos reemplazar el valor "CLAVE_PUBLICA" por tu clave pública de WoowUp. Esta clave puedes obtenerlas dentro de WoowUp en Configuración > Mi Cuenta.
Este dato debe quedar con las comillas.
5.2 Agregar variables:
En el caso de que tu formulario capture más datos del cliente, como el nombre, apellido, etc. es necesario agregar estos datos al script de la siguiente forma:
En este ejemplo, veremos un formulario donde se captura el email, nombre, apellido y documento del cliente.
En primer lugar debemos definir las variables adicionales
var first_name = document.getElementById('first_name').value;
var last_name = document.getElementById('last_name').value;
var document = document.getElementById('document').value;
Y luego, debemos incluir estas variables en "data":
var data = {
"app": "CLAVE_PUBLICA",
"email": email,
"tags": "newsletter,ecommerce",
"first_name": first_name,
"last_name": last_name,
"document": document
};
Quedando el script de la siguiente manera:
<script>
// WoowUp Newsletter Script
(function() {
// Definimos las variables del formulario
var email = document.getElementById('email').value;
var first_name = document.getElementById('first_name').value;
var last_name = document.getElementById('last_name').value;
var document = document.getElementById('document').value;
if (email) {
var url = "https://events.woowup.com/events/users";
var data = {
"app": "CLAVE_PUBLICA",
"email": email,
"tags": "newsletter,ecommerce",
"first_name": first_name,
"last_name": last_name,
"document": document
};
var settings = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
},
body: JSON.stringify(data),
};
fetch(url, settings)
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error('Error:', error);
});
}
})();
</script>
Una vez configurado, apretamos "Guardar"
6. Probar la implementación
Es importante verificar que el script funcione correctamente antes de publicarlo en producción.
En Google Tag Manager, haz clic en "Vista previa" para entrar en el modo de prueba.
Ingresa a la página de tu sitio web donde esté el formulario de suscripción.
Completa el formulario y verifica que los datos se estén capturando y enviando correctamente. En la consola del navegador (F12), deberías ver el mensaje de confirmación de envío de datos.
7. Publicar los cambios
Una vez que hayas verificado que todo funciona correctamente, publica la nueva configuración.
Haz clic en "Enviar" en Google Tag Manager.
Asigna un nombre y descripción a la nueva versión del contenedor, por ejemplo, "Implementación WoowUp - Suscripción Newsletter".
Haz clic en "Publicar" para activar la etiqueta en tu sitio web.
Con estos pasos, tu formulario de suscripción enviará automáticamente la información a WoowUp, permitiéndote utilizar estos datos para la segmentación en campañas futuras.