Introducción a las recomendaciones de productos en el sitio web

Qué aprenderás

Aprende a añadir un bloque de recomendaciones de productos personalizado directamente a las páginas de detalles de productos (PDP), lo que ampliará la personalización en el sitio de Klaviyo más allá del cajón de Customer Hub. En esta guía se explica qué hace el bloque integrado, cómo configurarlo y diseñarlo, cómo se está implementando la función a lo largo del tiempo y las ventajas y desventajas técnicas de la implementación.

Las recomendaciones de productos integrados son independientes de la plataforma de comercio por diseño y eventualmente pueden alojarse en cualquier página de tu sitio, con un enfoque inicial en la plataforma de datos de clientes. Para obtener comentarios sobre esta función, ponte en contacto con el equipo de productos de Customer Hub.

Antes de empezar

• Requisito: este bloque requiere que Customer Hub esté habilitado en Klaviyo.
• Compatibilidad con la plataforma: disponible hoy en Shopify (como bloque de aplicación temático), Shopify Plus (como fragmento de código integrado) y Salesforce Commerce Cloud (solo compatibilidad con SFRA). Se ha planeado la compatibilidad con otras plataformas.
• Dependencia del motor: la calidad de las recomendaciones se basa en el motor de recomendaciones de Klaviyo. Estamos ofreciendo recomendaciones a través de nuestro servicio de recomendaciones de próxima generación, una actualización de nuestro sistema anterior, que no podía personalizar las recomendaciones para visitantes anónimos.

Nota: Antes, las recomendaciones de productos en el sitio solo estaban disponibles en el cajón del Hub y solo para usuarios con la sesión iniciada. Esta función trae recomendaciones desde el cajón del Hub a la plataforma de datos de clientes.

Qué puedes hacer con las recomendaciones de productos integrados

El bloque de recomendaciones de productos integrado te permite mostrar productos relevantes directamente en las páginas de detalles de tus productos para que todos los visitantes, conocidos o anónimos, vean algo relevante para ellos.

• Adapta el estilo de tu sitio web: personaliza las fuentes, los colores, el diseño y los estilos de los botones para que el bloque parezca una parte nativa de tu tema. Añade clases de CSS personalizadas que se dirijan específicamente a todos los elementos de Customer Hub, a todos los bloques integrados o al bloque de recomendaciones. Edita el encabezado del bloque (por ejemplo, «Las mejores selecciones para ti» o «También te puede interesar») y elige un diseño de estilo carrusel.
• Recomendaciones personalizadas para visitantes conocidos: las recomendaciones se basan en lo que Klaviyo sabe sobre un perfil, y se basan en el servicio de recomendaciones de productos de próxima generación (NGPRS).
• Mostrar algo a todos los visitantes: de forma predeterminada, los visitantes anónimos ven recomendaciones de productos genéricas procedentes de Shopify.
• Carga rápido sin dañar el rendimiento de la página: el bloque está diseñado para cargarse rápidamente desde el principio, sin sobrecargar tu página con código extra, por lo que no ralentizará tu sitio ni perjudicará tus puntuaciones de rendimiento.
• Mide la interacción y los ingresos: cada clic se registra como un evento Producto Clicado y se atribuye de la misma manera que un clic en un producto dentro del cajón de Hub, por lo que puedes medir las visualizaciones, los clics y los ingresos atribuibles.
• Mantén una experiencia coherente: los visitantes conocidos o identificados pueden ver las mismas recomendaciones en el cajón del Hub y en la PDP.
• Deja que los compradores guarden los productos para más tarde: los compradores pueden añadir un producto recomendado a sus favoritos directamente desde la tarjeta o en su carrito si aún 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 un comprador se excluyen de las recomendaciones que se le muestran.

Crea un nuevo bloque de recomendaciones de productos integrado

Se trata de un nuevo bloque insertable, configurado de la misma manera que otros bloques integrados como Favoritos y Preguntas frecuentes, en lugar de a través del marco más amplio de bloques de contenido de personalización integrada.

1. Accede a la biblioteca de bloques:
   1. Ve a Servicio > Customer Hub en el menú de navegación izquierdo de Klaviyo. Haz clic en Diseño > Bloques en el sitio. Busca Recomendaciones de productos en el repositorio de bloques y añádelas a la página de tus productos.
2. Configura el origen de tus recomendaciones:
   1. Elige cómo se rellenarán y filtrarán las recomendaciones en función del estado del visitante:
      1. Visitantes registrados e identificados: Klaviyo (predeterminado) o Shopify.
      2. Visitantes anónimos: Shopify (predeterminado y actualmente la única opción). Esta fuente también ofrece recomendaciones de cajones de Hub para visitantes anónimos.
      3. Filtra los productos agotados: activa o desactiva esta opción.
      4. Filtra los productos que ya están en el carrito de los compradores: Activa o desactiva esta opción.
3. Diseña y personaliza:
   1. Ajusta la configuración visual para que el bloque se sienta nativo de tu sitio:
      1. Elementos: Mostrar u ocultar el precio (se muestra de forma predeterminada), los botones favoritos (se muestra de forma predeterminada), los botones de añadir al carrito (ocultos de forma predeterminada) y la variante del producto (oculta de forma predeterminada).
      2. Botones: elige un estilo (redondeado, cuadrado, curvo), color, color del texto y mayúscula.
      3. Diseño: establece el ancho máximo, los productos máximos (1-10, 4 predeterminados), el relleno (superior, izquierdo, derecho e inferior) y los márgenes (entre el título y la fila de productos, y entre productos). Configura el tamaño de la imagen (ancho, alto) y el ajuste (cubrir, contener y 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: añade clases para dirigirte específicamente a todos los elementos de Customer Hub, todos los bloques integrados o el bloque de recomendaciones.

4. Configuración completa de la plataforma:
   1. Instala el bloque en el frontend de tu plataforma de comercio electrónico:
      1. Shopify: añade un bloque de aplicación a través del editor de temas.
      2. Shopify Plus: Añadir como fragmento de códigodiv () para los comerciantes que necesitan control a nivel de tema.
5. Publicar:
   1. Guarda y publica tus cambios. El bloque aparecerá en tu plataforma de datos de clientes activa según la fuente, los filtros y la configuración de diseño que hayas configurado.

Atribución y análisis

• Cada clic en un producto recomendado se registra como un evento Producto Clicado, que se origina como «bloque de recomendación de producto integrado».
• Los clics se atribuyen de la misma manera que un clic en un producto dentro del cajón de Hub.
• Klaviyo registra las visualizaciones y los clics para que puedas hacer un seguimiento de la adopción (cuentas con al menos un bloque de recomendaciones activas), la interacción (tasa de clics, tasa de adición al carrito después de un clic, favoritos) y los ingresos (ingresos atribuibles por cada 1000 impresiones de bloque y el porcentaje de pedidos con una ruta de clics asistida por recomendaciones).

Coincidencia de estilo

Para que coincida con el tema que ya tienes, lo ideal es que Shopify muestre el bloque de productos en nombre de Klaviyo. Sin embargo, Shopify no renderizará los bloques dentro de la extensión de la aplicación de Klaviyo con el contexto del producto, por lo que, en su lugar, crearemos un nuevo bloque de sección que renderice el bloque de producto.