Dulce Sorpresa: rediseño, landings, medición y pauta · Caso de estudio

El punto de partida: Una tienda con años de pedidos, lista para renovarse.

Dulce Sorpresa vende todos los días, con fechas y horarios de entrega que tienen que cumplirse. La segunda etapa reunía 24 puntos: correcciones, un carrito nuevo, catálogo y ficha, administración y rendimiento en móvil. Sobre esa base propuse el rediseño y lo afinamos juntos, ronda por ronda, hasta aprobar cada pantalla.

Lo que acordamos

• Regalar fácil Encontrar el regalo en pocos pasos, por ocasión y para quién.
• Comprar sin dudas Un carrito claro, con fecha, hora y total siempre a la vista.
• Autonomía Que el equipo cambie sellos, banners y fotos desde el panel.

La tienda: El regalo perfecto, en tres respuestas.

• Los más regalados Por ocasión, con pastillas en el orden que eligió el equipo.
• Sellos de confianza «Tu sorpresa llega HOY» y otros mensajes de confianza, editables.
• Una sola tarjeta Catálogos y ocasiones comparten diseño, con distintivos e iconos de personalización, globo y entrega hoy.
• Ficha completa Galería de hasta 5 fotos, fecha y hora desde la ficha y complementos «Hazlo extra especial».
• Pedidos fáciles de dictar El código de pedido ahora son solo letras y números, como GKND7.
• Pensada para el celular Cada pantalla revisada en móvil, sin desplazamiento lateral y con buscador plegable.

El carrito: Cuatro pasos, con el resumen siempre a la vista.

Pedido, entrega, datos y pago en una sola página. La fecha y la hora elegidas en la ficha llegan solas, el envío se calcula con el distrito y las páginas de gracias de tarjeta y de depósito tienen el estilo de la web.

Más liviana: Medir primero, y luego aligerar.

• Qué vimos: Cada archivo de la web cambiaba de dirección en cada visita, así que el navegador no reutilizaba nada. Qué hice: Versión por publicación y librerías agrupadas: lo que no cambia queda en caché. (21 → 1 — peticiones de librerías)
• Qué vimos: Todas las fotos de la portada pedían prioridad alta a la vez. Qué hice: Prioridad solo para lo que se ve primero y carga diferida para el resto. (−41 % — peso de imágenes en la portada)
• Qué vimos: Las fotos que suben los clientes con sus pedidos ocupaban gigas en el servidor. Qué hice: Inventario, respaldo y limpieza de las anteriores a junio; las nuevas se ajustan solas a 2000 px. (3,2 GB — liberados, todo respaldado)

Antes de cambiar nada se comprobó cada supuesto contra lo que el navegador descargaba de verdad, página por página.

El panel: Lo nuevo de la web, administrable.

• Distintivos Los sellos de cada producto: Nuevo, Personalízalo y otros.
• Confianza Los sellos de la portada y de la ficha.
• Categorías y ocasiones Título, texto y banner de cabecera, con su versión para celular.
• Productos Iconos de la tarjeta, hasta 5 fotos y texto alternativo en cada una.
• Dashboard Cobro de delivery por día, semana o mes, y los horarios más pedidos.
• Corporativo Banners, clientes, casos y catálogos, listos para la nueva landing de empresas.

La salida a producción: Publicado sin apagar la tienda.

Los cambios se aplicaron sobre una copia de la base de datos y la web pasó a usarla al final, con un solo ajuste de configuración. Se comprobó que en ese lapso no entró ningún pedido: el último quedó en las dos bases.

Cómo se publicó

• Respaldo Archivos (4,3 GB) y base de datos, guardados fuera del servidor antes de tocar nada.
• Ensayo El pase completo, sobre una copia exacta de la web real, con dos compras de prueba.
• Verificación 16 pantallas en computadora y celular, y una compra completa hasta el botón Pagar.
• Vuelta atrás Volver a la versión anterior toma minutos: la base anterior sigue intacta.

Tres landings: Una página para cada cliente que no estaba mirando.

Con la tienda ya en producción, armamos tres páginas para públicos con necesidades distintas: la temporada de Halloween, los peruanos que viven fuera y las empresas. Las tres se editan desde el panel y cada pedido que pasa por ellas queda marcado, para saber cuánto vende cada una.

• Dulce Halloween Un caldero 3D en three.js que burbujea, se agita y saca la bolsita con el nombre que escribe el cliente, con complementos y el código de la campaña.
• ¿Vives lejos de Perú? Relojes en vivo de Nueva York, Madrid, Buenos Aires y Lima que avisan si el regalo todavía llega hoy, ocho regalos y la dedicatoria que pasa directo al carrito.
• Regalos para empresas Productos con logo listos para comprar de 5 a 15 unidades, cotizador que llega al panel, casos, catálogos y su propia línea de WhatsApp.

Cada landing salió con su manual: qué se cambia desde el panel, dónde y cómo comprobarlo.

Medición: Cada venta se cuenta una vez, pagada y con su monto.

Antes de tocar las campañas auditamos qué veían Analytics, Google Ads y Meta frente a los pedidos reales de la tienda. Las ventas llegaban sin monto, los pagos rechazados y las recargas contaban como venta, y había dos píxeles de Meta. Rehice la medición en Tag Manager y en el servidor, y la validamos pedido por pedido.

• Qué vimos: Tag Manager contaba una venta cada vez que alguien abría la página de gracias, aunque el pago fuera rechazado. Qué hice: La web avisa la compra solo con el pago aprobado, una vez, con monto, envío y productos. Los depósitos cuentan cuando el equipo los confirma en el panel. (39 / 100 — salud del contenedor en la auditoría)
• Qué vimos: De los siete pasos de la compra solo se medían dos, y a medias. Qué hice: Embudo completo en GA4: catálogo, producto, carrito, envío, pago y venta con su código de pedido. (2 → 7 — pasos de la compra medidos)
• Qué vimos: Meta recibía la compra sin monto y por un píxel distinto al configurado. Qué hice: Un solo píxel y la API de conversiones desde el servidor, deduplicada y con datos cifrados. (6,7 – 7,3 — calidad de coincidencia en Meta, sobre 10)

• Venta confirmada La conversión de la que aprende Google Ads: pedidos pagados, con su monto real.
• WhatsApp por línea Los clics se separan entre ventas y corporativo, y se sabe desde qué parte de la web salieron.
• Origen de cada pedido La web guarda por 7 días de qué campaña o landing llegó el cliente, y el dashboard lo cruza con el gasto.

Validado en producción: de los primeros 16 pedidos tras el cambio, los 13 pagados quedaron registrados como venta y los 3 sin pagar no se contaron.

Google Ads y Meta: Pagar solo por las búsquedas que venden.

Con la medición limpia revisamos campaña por campaña, búsqueda por búsqueda, por hora y por dispositivo. Cada cambio se propuso con su cifra, su fecha de medición y cómo volver atrás, y el equipo de Dulce Sorpresa eligió qué aplicar.

• Palabras negativas Competidores y ciudades fuera de Lima que gastaban sin vender, en listas compartidas y nunca en la campaña de marca.
• Subastas Cuánto nos gana cada competidor la posición, y por qué subir el presupuesto no lo arreglaba.
• Anuncios nuevos Textos por los 20 años, alfajores de noviembre y un anuncio navideño corporativo, cada uno con su fecha de salida y de retiro.
• Remarketing en Meta Campaña de catálogo con tope de gasto, el feed corregido, las fotos sin bandas y una frase propia para cada producto.
• Prueba en el extranjero Facebook e Instagram para peruanos en Estados Unidos durante 4 semanas, con reglas fijadas de antemano para apagarla.
• Calendario de entrega Cada tarea pendiente con su fecha, el lugar donde se hace y los textos listos para copiar.

Regla de trabajo: un cambio a la vez, anotado con su fecha. Si las ventas caen al día siguiente, primero se deshace y después se averigua.

SEO: Una dirección oficial por página.

• Qué vimos: Un mismo producto llegaba desde Google por hasta 7 direcciones distintas, y ninguna página decía cuál era la oficial. Qué hice: Canónica en cada página, redirecciones 301 de las direcciones viejas y sitemap con productos y ocasiones. (50 → 61 — páginas en el sitemap, leído sin errores)
• Qué vimos: Los títulos de los 37 productos terminaban en el texto de la dirección, como «pack-amor». Qué hice: Título y descripción armados desde el panel, completos hasta unos 155 caracteres sin cortar palabras. (37 + 11 — productos y ocasiones con título propio)
• Qué vimos: Google, Merchant Center y Meta leían datos incompletos de la tienda. Qué hice: Datos estructurados reales con envío por zona y devoluciones, feeds con la foto principal y la galería, y preguntas frecuentes editables. (9 — páginas principales enviadas a reindexar)

Además: el Perfil de Google con las publicaciones de noviembre programadas, y la posición de «desayunos» seguida mes a mes en Search Console.

Tecnologías: Con lo que trabajé la tienda.

• Backend: PHP, CodeIgniter, MySQL
• Frontend: HTML, CSS, JavaScript, jQuery
• Pagos: Niubiz
• 3D: Three.js
• Medición: Tag Manager, GA4, Node.js
• Pauta y SEO: Google Ads, Meta Ads, Search Console
• Entrega: Docker, Playwright

El resultado: Una tienda renovada, tres landings nuevas y ventas medidas de punta a punta, que el equipo de Dulce Sorpresa administra por su cuenta.

• 0 — pedidos perdidos en el pase
• 3 — landings nuevas, editables desde el panel
• 13 / 13 — ventas pagadas registradas en la validación
• 249 — commits en tres meses