Guía Práctica Paso a Paso para Webhooks

1. ¿Qué es un Webhook?

Un webhook es una forma en que una aplicación te notifica automáticamente cuando ocurre un evento, enviando datos a otro sistema.

Tip: Los webhooks son útiles para automatizar procesos, eliminando la necesidad de verificar manualmente si algo ha cambiado o si ha ocurrido un evento.

Imagina que tienes un formulario en tu sitio web. Cada vez que alguien envía el formulario, el webhook envía los datos de ese formulario a otra aplicación, como un CRM.

2. Herramientas necesarias para empezar

A continuación, te indico las herramientas que necesitarás para configurar y probar tus webhooks:

• Postman: Herramienta para simular y enviar solicitudes HTTP.
• Ngrok: Exponer tu servidor local a internet y recibir solicitudes de webhook.
• Editor de código: Usa uno como Visual Studio Code.
• Servidor local: Configura un servidor local con Node.js o Python para manejar los webhooks.

3. Configuración básica de un Webhook con Node.js

Paso 1: Instalar Node.js

Si aún no tienes Node.js, descárgalo aquí e instálalo.

Tip: Para verificar si la instalación fue exitosa, abre tu terminal o consola y escribe: node -v

Paso 2: Crear el proyecto

mkdir proyecto-webhook
cd proyecto-webhook
npm init -y
npm install express body-parser

Paso 3: Crear el servidor de webhook

Crea un archivo app.js dentro de tu carpeta del proyecto y pega el siguiente código:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());

app.post('/webhook', (req, res) => {
    console.log('Datos recibidos del webhook:', req.body);
    res.status(200).send('Webhook recibido correctamente');
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Servidor escuchando en http://localhost:${PORT}`);
});

Paso 4: Ejecutar el servidor

En tu terminal, ejecuta el servidor:

node app.js

Paso 5: Exponer el servidor local con ngrok

Instala ngrok si no lo tienes. Puedes descargarlo aquí. En tu terminal, inicia ngrok para exponer tu servidor local:

ngrok http 3000

4. Probar el Webhook con Postman

Paso 1: Abrir Postman

Si no tienes Postman, puedes descargarlo aquí. Abre Postman y selecciona el método POST en la esquina superior izquierda.

Paso 2: Configurar la solicitud

Pega la URL de ngrok que copiaste anteriormente en el campo de URL, añadiendo /webhook al final, por ejemplo: http://abcd1234.ngrok.io/webhook.

Selecciona la pestaña Body en Postman, luego selecciona raw y cambia el tipo de datos a JSON. Ingresa el siguiente JSON en el cuerpo de la solicitud:

{
    "evento": "nuevo_lead",
    "nombre": "Juan Perez",
    "email": "juan.perez@example.com"
}

Paso 3: Enviar la solicitud

Haz clic en el botón Send para enviar los datos. Si todo está correcto, verás el mensaje «Webhook recibido correctamente» en la respuesta y los datos enviados deberían aparecer en la consola de tu servidor.

5. Crear un Webhook en una Plataforma (Marketo o Zapier)

Paso 1: Crear el Webhook en Marketo

• Accede a tu cuenta de Marketo.
• Ve a Admin > Webhooks.
• Haz clic en Nuevo Webhook y proporciona un nombre descriptivo, por ejemplo: Webhook para nuevos leads.
• En la URL del webhook, pega la URL pública de ngrok (la que expone tu servidor local).
• Configura el método POST y selecciona el formato de datos como JSON.
• Añade tokens o variables personalizadas si es necesario (por ejemplo, tokens para identificar al lead).

Paso 2: Probar el Webhook

• Crea una campaña o flujo de trabajo que dispare el webhook. Puedes definir un evento como la creación de un nuevo lead, la actualización de un contacto o una compra.
• Guarda y activa el flujo.
• Cuando se cumpla la condición que dispara el webhook (por ejemplo, cuando un nuevo lead ingrese en tu base de datos), el webhook enviará los datos al servidor configurado (en este caso, tu servidor local expuesto con ngrok).
• Verifica en la consola de tu servidor si los datos están llegando correctamente.

Paso 3: Configurar un Webhook en Zapier (alternativa a Marketo)

• Si prefieres utilizar Zapier, sigue estos pasos:
  1. Accede a tu cuenta de Zapier y crea un nuevo Zap.
  2. Selecciona el evento que desencadenará el webhook, como «Nuevo lead en una aplicación» o «Nuevo formulario enviado».
  3. En la sección de acciones, elige la acción Webhook.
  4. Configura la URL del webhook (nuevamente, usa la URL de ngrok o la de tu servidor en producción).
  5. Define el formato de los datos, típicamente JSON, y personaliza los campos que desees enviar.
  6. Prueba el flujo enviando datos reales a tu webhook y verifica en tu servidor si se reciben correctamente.

Paso 4: Monitorización y Ajustes

• Revisa logs: Asegúrate de monitorear los registros de tu servidor para capturar cualquier error o comportamiento inesperado.
• Validar respuesta: Los webhooks deben responder con un código HTTP 200 si todo salió correctamente, o un código de error si algo falló.
• Optimización: Ajusta los parámetros y eventos de tu webhook según las necesidades de tu aplicación para garantizar una integración eficiente y sin fallos.

---

Conclusión

Los webhooks son una herramienta poderosa para la integración de datos en tiempo real y la automatización de flujos de trabajo. Con esta guía, habrás aprendido a configurar y probar webhooks tanto en tu servidor local como en plataformas de marketing como Marketo y herramientas de automatización como Zapier. Asegúrate de seguir las buenas prácticas de seguridad y monitoreo para garantizar el funcionamiento estable y seguro de tus webhooks.