Analítica web
Reflexiones sobre madurez digital, datos y tecnología

Webhooks: cómo interconectar aplicaciones web

Se lee en 5 minutos

Los webhooks aportan una solución sencilla para el intercambio de datos entre aplicaciones web de uso diario, o incluso entre nuestro sitio web y esas aplicaciones.

Brevemente, ¿qué es un webhook?

Es un método que permite comunicar en tiempo real, a través de HTTP, dos aplicaciones o servicios web, de forma sencilla y sin necesidad de infraestructura extra, cuando se cumplan ciertos criterios.

Por ejemplo:

  • Tras recibir una compra en tu web ecommerce se puede utilizar un webhook para añadir la información del producto a una hoja de Google Sheets.
  • Tras recibir una reserva en tu web de alojamientos rurales se puede utilizar un webhook para añadirlo automáticamente a Google Calendar.
  • Tras recibir en tu bandeja de email un correo de cierto tipo se puede utilizar un webhook para crear una nueva tarjeta de Trello a partir de él.

Pero, ¿no es eso lo que hace una API?

Efectivamente, en muchos casos el mismo servicio que nos da un webhook podríamos lograrlo con una API y, posiblemente, sea una solución más flexible, estable e independiente. Pero en otros muchos casos sea por la (pequeña) dimensión del proyecto, la complejidad de hacerlo o el conocimiento técnico requerido, no resulta viable. Entonces un webhook podría resultar una solución más asequible.

Sin embargo, el uso de un webhook y de una API no son excluyentes, más bien lo contrario: será común verlos juntos en acción. Un escenario habitual será tener una aplicación web desde la que, cuando se cumplan ciertas condiciones, se produzca la comunicación (envío de datos) hacia otra aplicación web de uso popular que disponga de API, como puede ser un gestor de email (Gmail, Outlook, etc.), red social (Facebook, Twitter, Instagram, Pinterest, etc.), documentación (Google Docs, Sheets, Office 365, etc.), productividad (Trello, Evernote, Keep, etc.) y un largo etcétera.

En este caso se realizará un envío desde nuestra aplicación hacia una URL que controlemos y que servirá de webhook donde recogeremos esa información, le daremos forma y haremos la necesaria llamada a la API del servicio final para trasladarle la información. De este modo ya tenemos ambos métodos en escena: webhook y API.

¡Por favor, aún más simple!

La gracia de los webhook es dejar a un lado el engorro que supone lidiar con las APIs. Por suerte, en la actualidad existen en el mercado servicios como Zapier que resultan muy intuitivos y fáciles de usar y con los que el conocimiento técnico necesario se reduce.

Zapier se vende como un traductor entre APIs donde únicamente hay que definir la aplicación de origen de los datos y la aplicación de destino, y él se encargará de hacer la magia de la comunicación entre ambos.

zapier-apps
Ejemplo de aplicaciones conectables en Zapier

Pero, y aquí viene la parte interesante, también hace las funciones de webhook; cuando el origen de los datos no es ninguna aplicación web conocida sino tu propio sitio web, o cualquier sitio web sobre el que tengas control, Zapier te ofrece una URL que puedes usar para enviar la información para, posteriormente, procesarla y enviarla a cualquier servicio popular como los comentados párrafos más arriba. De nuevo, será Zapier (con algo de ayuda por tu parte para saber qué datos recoger y a dónde enviarlos) quien hará la magia de la comunicación. Esta es, en esencia, su función como webhook.

Ahora, con vistas de aplicar el potencial de los webhooks a nuestro campo de trabajo preferido (¡el de la recolección de datos y la analítica web!), vamos a ver algunos casos de uso donde los webhooks nos ayudarán a automatizar tareas de control de calidad y detección de errores.

Caso de uso 1: control de cookies

Queremos enviar datos desde nuestra web con Google Tag Manager a un canal de Slack

Tenemos bajo control las cookies que usa nuestro sitio web, conocemos todas las que usan nuestros proveedores de servicios e informamos de ellas a los usuarios, pero las cookies son criaturas esquivas y caprichosas; se nos podría escapar alguna. Por lo tanto, para curarnos en salud, queremos que se nos notifique cada vez que se detecte una cookie desconocida en nuestro sitio web.

Google Tag Manager. En GTM hemos creado un script que recorre una lista con las cookies conocidas y que si en cualquier momento detecta una desconocida, realizará un envío por POST hacia una URL generada en Zapier pasándole como parámetro el nombre de la nueva cookie y la página web donde se ha detectado.

Zapier: Webhook. En Zapier hemos creado el punto de origen, es decir, el webhook. Esto es una URL que está en constante escucha y que recibirá los datos de Google Tag Manager. En cuanto los reciba, los procesará y enviará al destino especificado a continuación.

Composite image of a laptop with graphic icons on the screen
Ejemplo de configuración de un Webhook en Zapier

Zapier: Slack. En último lugar, como la GDPR es algo serio, necesitamos que se nos notifique de manera inmediata si aparece una cookie no controlada enviándonos un mensaje a Slack. En nuestra configuración en Zapier asignaremos Slack como aplicación de destino. Automáticamente, en cuanto aparezca una cookie desconocida, nos enviará un mensaje con la información especificada en los parámetros de la URL (nombre de cookie y página web).

¡Et voilá! Con un poco configuración habremos conseguido notificaciones en tiempo real sobre cookies no controladas en nuestro sitio web.

Caso de uso 2: control de asignación de identificadores de usuario

Queremos enviar datos desde nuestra web con Tealium Event Stream a un documento de Microsoft Office

Este es un caso de uso muy específico, pero muy útil por otro lado. Y es que los que nos dedicamos al mundo del dato y la analítica web sabemos lo frágil que es la visita. Con esto me refiero a los juegos malabares necesarios para que en una navegación entre páginas de dominios diferentes, incluso de dispositivos diferentes, nuestra herramienta de analítica mantenga al visitante como único. ¡Y uno de los mayores focos de problemas es la asignación de identificadores de usuario!

De este modo, para estar al tanto de fallos en la identificación, podemos configurar una alerta que, a través de un webhook, nos notifique siempre que las variables de identificación del usuario (por ejemplo, Marketing Cloud Visitor ID en Adobe Analytics, o User ID en Google Analytics) lleguen vacías.

Tealium Event Stream. Desde esta herramienta se pueden configurar conectores de tipo webhook para que, cuando se detecte que la variable llegue vacía, realice un envío por POST hacia la URL generada por Zapier pasándole como parámetro la página web donde se ha detectado y el referer de dicha página.

Zapier: Webhook. En Zapier hemos creado el punto de origen, es decir, el webhook. Esto es una URL que está en constante escucha y que recibirá los datos de Tealium Event Stream. En cuanto los reciba, los procesará y enviará al destino especificado a continuación.

Zapier: Microsoft Excel. En último lugar, queremos guardar un log estructurado que podamos consultar y filtrar fácilmente. Una posibilidad es almacenarlo es un documento de Excel en la nube, es decir, en One Drive, y Zapier nos da la solución permitiéndonos conectar nuestro webhook con Excel únicamente indicando unos pocos parámetros de autenticación y configuración.

Composite image of a laptop with graphic icons on the screen
Ejemplo de configuración de un conector Excel en Zapier

¡Así de sencillo! Ahora, cada vez que Event Stream detecte que no se rellenan las variables de identificación de usuario, automáticamente en nuestro Excel aparecerá una nueva fila con el detalle de la página donde ha ocurrido y el referente de dicha página.

Conclusión

Sin ánimo de entrar en detalles técnicos sobre la configuración ni funcionamiento de los webhooks, estos casos prácticos pueden servir de ejemplo para mostrar la facilidad de configuración y potencial que pueden alcanzar en pequeños proyectos de control de calidad y detección de errores, o incluso a nivel de productividad en nuestro trabajo diario buscando automatizar tareas rutinarias y reforzar algunas áreas con un doble-check del lado de la máquina.


*Fuente de la imagen principal: Freepik
*Fuente de la imagen en el cuerpo: Zapier

Escribe tu comentario

5 × 5 =

Navegar