Uso en Creativos
Características del componente de recomendación de productos dentro del Editor Creativo de Fanplayr.
Ejemplos
.Cq3T80KX.png)
Ejemplo de componente de recomendaciones.
.Bc6qDc-r.png)
El icono del componente de recomendaciones.
Conceptos
Conceptos de alto nivel relacionados con este componente:
- Muestra una lista de productos en una cuadrícula El número de productos mostrados se basa en el espacio disponible y el tamaño de la plantilla de producto definida.
- Plantilla de producto El estilo de los elementos de la lista se controla mediante la plantilla de producto. Esto permite a los usuarios diseñar el tamaño general de un producto, así como su imagen, texto y llamada a la acción.
- Navegación de la lista Las flechas de navegación izquierda y derecha aparecerán si hay más productos para mostrar.
- Clic en productos Cuando un usuario hace clic en un producto, su navegador navega a la página de producto correspondiente. Esta acción también se rastrea en Insights.
- La presentación del widget depende de este componente Cuando se utiliza un componente de recomendaciones en un widget, el widget esperará a que el servicio devuelva las recomendaciones de productos antes de mostrar el widget.
La estructura del componente y la disposición de la cuadrícula de la plantilla de producto.
La estructura y disposición de la Plantilla de Producto
Propiedades generales
Estas propiedades controlan qué modelo de IA de recomendación se utiliza y cuántos productos se solicitan al servicio de recomendación.
Tipo de recomendación
- Tipo: Modelo de IA de recomendación
El modelo de IA de recomendación a utilizar:
Modelos generales:
- Comprados Frecuentemente Juntos
- Otros que te pueden gustar
- Recomendado para ti
- Vistos Recientemente
Modelos de clasificación de productos:
- Clasificados por Vistas
- Clasificados por Carritos
- Clasificados por Compras
- Clasificados por Ingresos
Nota: Solo los modelos habilitados en su cuenta y que hayan completado el entrenamiento estarán disponibles para su selección.
Productos mínimos
- Tipo: Entero
El número mínimo de productos requerido. Esto se puede utilizar para asegurar que al menos un cierto número de productos estén disponibles para renderizar desde el modelo de IA de recomendación. Si el servicio de recomendación no puede devolver suficientes productos, el widget no se renderizará.
INFO
Para modelos de IA que no sean Vistos Recientemente, recomendamos usar un mínimo de 5 o más productos para asegurar que haya suficiente contenido atractivo para los usuarios.
Productos máximos
- Tipo: Entero
El número máximo de productos a solicitar al servicio.
Este valor es solo un número sugerido de productos para que el servicio consulte y no hay garantía de que se devuelva este número máximo de productos. Sugerimos mantener el número máximo por debajo de 30 para reducir los tiempos de respuesta de las consultas.
Número de días
- Tipo: Entero
- Aplicable a: Solo recomendaciones de clasificación de productos
El número de días de historial a utilizar al consultar los productos mejor clasificados, a partir de hoy. Los valores válidos están entre 1 y 30, donde "1" consultará hasta las últimas 24 horas de datos y "2" consultará hasta las últimas 48 horas de datos, etc.
Precio inicial
- Tipo: Entero
- Aplicable a: Solo recomendaciones de clasificación de productos
Limita los resultados a solo productos cuyo precio sea mayor o igual al precio inicial. Dejar en blanco para no establecer límite.
Precio final
- Tipo: Entero
- Aplicable a: Solo recomendaciones de clasificación de productos
Limita los resultados a solo productos cuyo precio sea menor o igual al precio final. Dejar en blanco para no establecer límite.
Categoría
- Tipo: Texto
- Aplicable a: Solo recomendaciones de clasificación de productos
Limita los resultados a solo productos con el nombre de categoría especificado. Esto también se puede configurar para usar la categoría de la página actual.
Propiedades del producto
Estas propiedades se relacionan con las dimensiones generales de un producto.
Ancho
- Tipo: Dimensión (píxeles)
El ancho de un solo producto.
El componente utilizará su ancho total y el ancho del producto para determinar cuántos productos pueden renderizarse visiblemente a la vez. Los productos restantes se ocultarán y al usuario se le mostrarán botones de flecha para navegar por la lista.
Por ejemplo, si el componente tiene 800px de ancho y el ancho del producto es 150px, entonces se pueden mostrar hasta 5 productos a la vez.
Altura
- Tipo: Dimensión (píxeles)
La altura de un solo producto.
El componente utilizará su altura total y la altura del producto para determinar cuántas filas de productos se pueden mostrar.
Por ejemplo, si el componente tiene 500px de alto y la altura del producto es 200px, entonces se pueden mostrar hasta 2 filas de productos si es necesario.
Gutter
- Tipo: Dimensión (píxeles)
La cantidad mínima de espacio para rodear cada producto. Esto se utiliza para añadir separación entre productos adyacentes en la lista o en las filas.
Borde
- Tipo: Borde
Estilo de borde estándar.
Radio de borde
- Tipo: Radio de borde
Estilo de radio de borde estándar.
Fondo
- Tipo: Color
El color de fondo del producto.
Relleno X
- Tipo: Dimensión (píxeles)
Añade espaciado horizontal a los bordes del componente, lo que se utiliza para empujar la cuadrícula de productos hacia el centro.
Propiedades de la imagen
Altura
- Tipo: Dimensión (píxeles)
La altura de la imagen.
La imagen siempre ocupará todo el ancho del producto, pero la altura de la imagen es ajustable.
Fondo
- Tipo: Color
El color de fondo a utilizar para cualquier parte transparente de la imagen del producto.
Tamaño del fondo
- Tipo: Tamaño del fondo
Estilo de tamaño de fondo estándar. Controla si la imagen se escala para ocupar todo el espacio disponible (recortando potencialmente parte de la imagen) o se reduce para asegurar que toda la imagen sea visible.
Propiedades de la descripción
Texto
- Tipo: Texto enriquecido
Elemento de texto que permite opciones de personalización enriquecidas. Admite las siguientes variables que se pueden añadir utilizando la acción Insertar Variable:
{{ productRec.name }}- El nombre del producto actual.{{ productRec.price }}- El precio del producto actual, incluido el símbolo de la moneda.{{ productRec.url }}- La URL del producto actual.{{ productRec.rank }}- La clasificación actual del producto. Ej. 1, 2, 3.
Demostración de cómo añadir variables de producto al componente.
Propiedades del botón
Mostrar
- Tipo: Booleano
Si se debe mostrar u ocultar el botón de llamada a la acción.
Margen
- Tipo: Margen
Espacio a añadir al exterior del botón. Esto añade espacio con respecto al texto del producto por encima del botón.
Relleno
- Tipo: Relleno
Espacio a añadir al interior del botón.
Borde
- Tipo: Borde
Estilo de borde estándar.
Radio de borde
- Tipo: Radio de borde
Estilo de radio de borde estándar.
Texto
- Tipo: Texto enriquecido
Texto del botón. Admite las mismas variables que Texto de la descripción.
Color del texto
- Tipo: Color
Color del texto del botón.
Fondo
- Tipo: Color
Color de fondo del botón.
Propiedades del botón de navegación
Estos botones aparecen en el lado izquierdo y derecho del componente cuando hay más productos para mostrar de los que se pueden visualizar visiblemente.
La estructura del botón de navegación (se muestra el botón derecho).
Borde
- Tipo: Borde
Estilo de borde estándar.
Radio de borde
- Tipo: Radio de borde
Estilo de radio de borde estándar. (Sugerencia: Establezca el radio en 50% para hacer el botón un círculo)
Relleno
- Tipo: Relleno
Espacio a añadir al interior del botón.
Desplazamiento X
- Tipo: Dimensión (píxeles)
Espacio horizontal a añadir entre el botón de navegación y el borde del componente.
Fondo
- Tipo: Color
Color de fondo del botón.
Tamaño de la flecha
- Tipo: Dimensión (píxeles)
El tamaño general de la flecha.
Ancho de la flecha
- Tipo: Dimensión (píxeles)
El grosor de la flecha.
Color de la flecha
- Tipo: Color
El color de la flecha.