Primeros pasos con recomendaciones de productos en el sitio

Objetivos del artículo

Aprende a agregar un bloque de recomendaciones de productos personalizadas directamente en las páginas de detalle de producto (PDP), para extender la personalización en el sitio de Klaviyo más allá del panel deslizable de Klaviyo Customer Hub. Esta guía explica qué hace el bloque incrustado, cómo configurarlo y diseñarlo, cómo se implementa la función con el tiempo y las consideraciones técnicas detrás de la implementación.

Las recomendaciones de productos integradas son agnósticas a la plataforma de comercio por diseño y, con el tiempo, pueden alojarse en cualquier página del sitio, con un enfoque inicial en la PDP. Para compartir comentarios sobre estas funciones, ponte en contacto con el equipo de producto de Klaviyo Customer Hub.

Antes de empezar

• Requisito: Este bloque requiere que Klaviyo Customer Hub esté habilitado en Klaviyo.
• Compatibilidad con la plataforma: Disponible hoy en Shopify (como un bloque de app del tema), Shopify Plus (como un fragmento de código insertable) y Salesforce Commerce Cloud (solo con compatibilidad con SFRA). Está prevista la compatibilidad con plataformas adicionales.
• Dependencia del motor: La calidad de las recomendaciones funciona con el motor de recomendaciones de Klaviyo. Estamos ofreciendo recomendaciones a través de nuestro servicio de recomendaciones de nueva generación: una mejora de nuestro sistema anterior, que no podía personalizar recomendaciones para visitantes anónimos.

Nota: Las recomendaciones de productos en el sitio antes solo estaban disponibles en el cajón del Hub y solo para usuarios que habían iniciado sesión. Esta función lleva las recomendaciones fuera del cajón del Hub y a la PDP.

Qué puedes hacer con recomendaciones de productos incrustadas

El bloque integrado de recomendaciones de productos te permite mostrar productos relevantes directamente en tus páginas de detalles del producto, para que cada visitante —conocido o anónimo— vea algo relevante para él.

• Haz que coincida con el estilo de tu sitio: Personaliza las fuentes, los colores, el diseño y los estilos de botones para que el bloque se sienta como una parte nativa del tema. Agrega clases de CSS personalizadas que se apliquen a todos los elementos de Klaviyo Customer Hub, a todos los bloques insertados o, específicamente, al bloque de recomendaciones. Edita el encabezado del bloque (p. ej., “Mejores opciones para ti” o “También te puede gustar”) y elige un diseño de estilo carrusel.
• Personaliza recomendaciones para visitantes conocidos: Las recomendaciones se basan en lo que Klaviyo sabe sobre un perfil, con la tecnología del servicio Next Gen Product Recommendations (NGPRS).
• Muestra algo a cada visitante: De forma predeterminada, los visitantes anónimos ven recomendaciones genéricas de productos, obtenidas de Shopify.
• Carga rápidamente sin afectar el rendimiento de la página: El bloque está diseñado para cargarse rápidamente desde el principio, sin sobrecargar la página con código adicional, por lo que no ralentizará el sitio ni afectará las puntuaciones de rendimiento.
• Mide la interacción y los ingresos: Cada clic se rastrea como un evento de Producto en el que se hizo clic y se atribuye de la misma manera que un clic en un producto dentro del cajón de Hub, para que puedas medir visualizaciones, clics e ingresos atribuibles.
• Mantén la experiencia uniforme: Los visitantes conocidos o identificados pueden ver las mismas recomendaciones en el cajón del Hub y en la PDP.
• Permite que los compradores guarden productos para más tarde: Los compradores pueden añadir un producto recomendado a sus favoritos directamente desde la tarjeta o a su carrito si todavía no están listos para comprar.
• Evita recomendar lo que ya está en el carrito: Los productos que ya están en el carrito de una persona compradora se excluyen de las recomendaciones que se le muestran.

Crea un nuevo bloque integrado de recomendaciones de productos

Este es un nuevo bloque integrable: configúralo de la misma manera que otros bloques integrados, como Favoritos y preguntas frecuentes, en lugar de hacerlo mediante el marco más amplio de bloques de contenido de personalización integrada.

1. Accede a la biblioteca de bloques:
   1. Ve a Servicio > Klaviyo Customer Hub en la barra de navegación izquierda de Klaviyo. Haz clic en Diseño > Bloques del sitio. Busca Recomendaciones de productos en la biblioteca de bloques y agrégalo a la página del producto.
2. Configura la fuente de recomendaciones:
   1. Elige cómo se completarán y filtrarán las recomendaciones en función del estado del visitante:
      1. Visitantes con sesión iniciada e identificados: Klaviyo (predeterminado) o Shopify.
      2. Visitantes anónimos: Shopify (predeterminado y, actualmente, la única opción). Esta fuente también genera recomendaciones del cajón de Hub para visitantes anónimos.
      3. Filtrar productos agotados: Alternar entre Activado/Desactivado.
      4. Filtrar productos que ya están en el carrito del comprador: Activa/desactiva.
3. Diseña y personaliza:
   1. Ajusta la configuración visual para que el bloque se sienta nativo en tu sitio:
      1. Elementos: Muestra u oculta el precio (se muestra de forma predeterminada), los botones de favoritos (se muestran de forma predeterminada), los botones de agregar al carrito (están ocultos de forma predeterminada) y la variante del producto (está oculta de forma predeterminada).
      2. Botones: Elige un estilo (redondeado, cuadrado, curvo), color, color del texto y el uso de mayúsculas y minúsculas del texto.
      3. Diseño: Configura el ancho máximo, el número máximo de productos (1-10, valor predeterminado: 4), el relleno (superior, izquierdo, derecho, inferior) y los márgenes (entre el título y la fila de productos, y entre los productos). Configura el tamaño de la imagen (ancho, alto) y el ajuste (cubrir, contener, rellenar).
      4. Fuentes: Selecciona familias y tamaños para la fuente del encabezado, la fuente del nombre del producto, la fuente del precio y la fuente de la variante.
      5. CSS personalizado: Agrega clases para segmentar todos los elementos de Klaviyo Customer Hub, todos los bloques integrados o, específicamente, el bloque de recomendaciones.

4. Completar la configuración de la plataforma:
   1. Instala el bloque en el frontend de la plataforma de comercio electrónico:
      1. Shopify: Agrega como un bloque de aplicación mediante el editor de temas.
      2. Shopify Plus: Agrega como un fragmento de código (div) para comerciantes que necesitan control a nivel de tema.
5. Publicar:
   1. Guarda y publica los cambios. El bloque aparecerá en tu PDP activa según la fuente, los filtros y los ajustes de diseño que configuraste.

Atribución y analíticas

• Cada clic en un producto recomendado se rastrea como un evento Clicked Product, cuyo origen es “Embedded product recommendation block.”
• Los clics se atribuyen de la misma forma que un clic en un producto dentro del cajón del Hub.
• Klaviyo registra visualizaciones y clics para que puedas hacer seguimiento de la adopción (cuentas con al menos un bloque de recomendaciones activo), la interacción (tasa de clics tras apertura (CTR), tasa de agregado al carrito después de un clic, favoritos) y los ingresos (ingresos atribuibles por 1 000 impresiones de bloque y porcentaje de pedidos con una ruta de clic asistida por recomendaciones).

Coincidencia de estilo

Para que coincida con tu tema existente, el enfoque ideal es que Shopify renderice el bloque de producto en nombre de Klaviyo. Sin embargo, Shopify no renderizará bloques dentro de la extensión de la app de Klaviyo con el contexto del producto, así que, en su lugar, creamos un nuevo bloque de sección que renderiza el bloque de producto.