Skip to main content

Dark Kinetic — Portfolio by Héctor Trejo Luna

[ID_REF]viajes-caribe-maya-refactorizacion-pasarela-pagos-gtm
[STK_VAL]Laravel / TailwindCSS / JQuery
[STATUS]STABLE

Viajes Caribe Maya: Refactorización, Pasarela de Pagos y GTM para el Portal de Viajes de Oasis

RoleFrontend Developer, Backend Developer
Year2024
Captura de pantalla viajes caribe maya

El desafío: un portal de viajes con fallos críticos y tracking ciego

Viajes Caribe Maya (viajescaribemaya.com) era el canal digital de venta de paquetes vacacionales del grupo Oasis Hotels. Conectaba la oferta hotelera con experiencias en la Riviera Maya, pero técnicamente el sitio arrastraba problemas que impactaban directamente en las reservas y la medición de resultados:

  • Lógica de negocio frágil: el código que calculaba precios, disponibilidad y combinaciones de paquetes era confuso y propenso a errores. Pequeños cambios en la oferta hotelera rompían funcionalidades en el frontend sin previo aviso.
  • Comunicación API inconsistente: las llamadas entre el portal y los servicios de reservas del grupo fallaban con frecuencia, generando lentitud, datos desactualizados y, en el peor de los casos, procesos de compra interrumpidos.
  • Pasarela de pagos defectuosa: la integración con el proveedor de pagos presentaba problemas que iban desde el cálculo incorrecto de impuestos hasta fallos en la confirmación de transacciones. Esto provocaba pagos rechazados en operaciones válidas y una tasa de abandono en el checkout superior al 60 %.
  • Tracking insuficiente: Google Tag Manager no estaba implementado adecuadamente. Los eventos de conversión y los embudos de compra eran invisibles para el equipo de marketing, que tomaba decisiones a ciegas.
  • Interfaz envejecida: la UI presentaba inconsistencias visuales, poca claridad en los pasos de reserva y problemas de usabilidad que alejaban a los usuarios.

La dirección decidió que este proyecto debía estabilizarse por completo antes de ser transferido a la recién creada división Viajes Caribe Maya, que asumiría su operación de forma autónoma.

La solución: estabilización técnica y preparación para la transferencia

El objetivo era claro: dejar el sitio robusto, medible y con una experiencia de compra confiable, documentando todo para una entrega sin fricciones.

1. Refactorización de la lógica de negocio y la comunicación API

Realicé una revisión profunda del backend que alimentaba al portal.

  • Limpieza y estructuración: reorganizé la lógica de cálculo de paquetes para hacerla modular y fácil de actualizar. Separé las reglas de negocio en servicios independientes, con pruebas unitarias que cubrían escenarios críticos.
  • Optimización de la comunicación API: refactoricé las llamadas entre el portal y los sistemas de reservas de Oasis, implementando reintentos, caché inteligente y manejo de errores. Esto eliminó los pantallazos en blanco durante la búsqueda de disponibilidad y aceleró la respuesta en un 50 %.
  • Sincronización de datos: aseguré que los precios, fechas y descripciones mostrados al usuario coincidieran exactamente con los del sistema central, restaurando la confianza en el proceso de compra.

2. Reparación y mejora de la pasarela de pagos

El checkout era el punto más doloroso. Lo abordé con acciones puntuales y una mejora sustancial.

  • Diagnóstico: detecté que el cálculo de impuestos y totales estaba duplicando ciertos cargos en algunas combinaciones de paquetes. También identifiqué que las respuestas del proveedor de pagos no se interpretaban correctamente, generando transacciones en estado "pendiente" eterno.
  • Corrección: reescribí la integración con la API del gateway de pagos, normalizando el flujo de autorización y captura. Incorporé validación de montos antes de enviar al banco y un mecanismo de rollback automático en caso de error.
  • Mejora de seguridad: añadí verificaciones adicionales para cumplir con los requisitos del proveedor y protegí los datos sensibles de los tarjetahabientes según las mejores prácticas del sector.
  • Resultado inmediato: los pagos exitosos aumentaron un 35 % en la primera semana tras la corrección, y las incidencias reportadas por usuarios se redujeron a cero.

3. Configuración de Google Tag Manager

Con la pasarela funcionando, era vital que el equipo de marketing pudiera medir.

  • Implementé un contenedor GTM desde cero: definí una capa de datos (dataLayer) con eventos clave: búsqueda de paquete, inicio de checkout, compra exitosa, error en pago.
  • Activé etiquetas de Google Analytics 4, Facebook Pixel y Hotjar de forma ordenada y sin conflictos, verificando el disparo correcto en cada paso del funnel.
  • Documenté la configuración para que la división Viajes Caribe Maya pudiera mantener y escalar el tracking sin depender de soporte técnico especializado.

4. Actualizaciones de UI y mejoras de experiencia

Aproveché la estabilización para darle un lavado de cara al portal y facilitar la conversión.

  • Renové los flujos de búsqueda y reserva: rediseñé los pasos del checkout para hacerlos más intuitivos, con indicadores de progreso, resumen visible del carrito y validación de campos en tiempo real.
  • Optimización móvil: ajusté la experiencia para dispositivos móviles, de donde provenía más del 70 % del tráfico. Botones más grandes, tipografía legible y formularios simplificados.
  • Consistencia visual: alineé colores, espaciados y componentes con la identidad renovada de Oasis Hotels, mejorando la percepción de confianza.

5. Preparación para la entrega a la división Viajes Caribe Maya

Todo el trabajo se realizó con la mira puesta en transferir el proyecto.

  • Documentación exhaustiva: elaboré manuales técnicos sobre la arquitectura, la lógica de negocio, la pasarela de pagos y la configuración de GTM.
  • Sesiones de traspaso: realicé reuniones con el nuevo equipo asignado para explicar cada módulo y resolver dudas.
  • Automatización de despliegues: dejé configurado un pipeline de CI/CD con pruebas automáticas, para que cualquier nuevo desarrollo no rompiera lo avanzado.

Resultados: un portal confiable, medible y listo para crecer

Antes de la entrega, los indicadores mostraban una transformación completa:

  • Tasa de éxito en pagos: pasó del 61 % al 95 %, eliminando los falsos rechazos.
  • Velocidad de búsqueda: el tiempo de respuesta de la API se redujo de 4.5s a 1.8s.
  • Tracking funcional: el equipo de marketing obtuvo por primera vez datos precisos del funnel de compra, identificando los puntos de fuga y optimizando campañas.
  • UI optimizada: la tasa de rebote en el checkout disminuyó un 22 %.
  • Entrega exitosa: la división Viajes Caribe Maya recibió el proyecto sin deuda técnica, con documentación y un plan de mantenimiento claro.

Tecnologías utilizadas

  • Frontend: JavaScript, CSS, HTML (UI actualizada con componentes modulares)
  • Backend: PHP (lógica de negocio y comunicación API refactorizada)
  • Pasarela de pagos: integración personalizada con gateway bancario (mejora de lógica y seguridad)
  • Tracking: Google Tag Manager, Google Analytics 4, Facebook Pixel
  • DevOps: Git, documentación técnica y sesiones de traspaso

¿Tu plataforma de viajes necesita estabilización antes de escalar?

Un portal con pagos defectuosos y tracking ciego es una fuga de ingresos silenciosa. Te ayudo a dejarlo robusto y medible antes de que crezca. Conversemos sobre tu caso sin compromiso.