Widgets de recomendaciones en el sitio web
Un widget es un bloque de productos listo para el sitio web: «También le puede interesar» en la página de inicio, «Comprados juntos» en la ficha de producto, «Vistos recientemente» en el carrito. Lo configura en OneTrace.pro e inserta un código breve en el sitio web una sola vez. Después, el tipo, la apariencia y la activación se cambian sin tocar el sitio.
Para que funcione se necesitan el rastreador instalado (Conexión del sitio web), un catálogo de productos y eventos de vistas, carrito y compras (Recomendaciones y catálogo de productos). Pueden crear y modificar widgets «Propietario», «Administrador» y «Gestor».
Cómo crear un widget
- Abra Comunicaciones → Sitio web, pestaña Widgets.
- Pulse Crear widget.
- Complete la configuración de la izquierda; a la derecha verá la vista previa al instante.
- Pulse Guardar.
Configuración
| Campo | Qué define |
|---|---|
| Nombre | nombre del widget; solo se ve en el panel de administración |
| Qué mostrar | tipo de recomendación: Personalizados, Populares, En tendencia, Vistos juntos, Comprados juntos, Similares, Vistos recientemente |
| Categoría | para populares y en tendencia: id de la categoría del catálogo; vacío, todo el catálogo |
| Encabezado | texto sobre los productos, por ejemplo «También le puede interesar» |
| Disposición | Cuadrícula o Carrusel con desplazamiento |
| Tarjetas por fila | de 1 a 8 |
| Productos en total | de 1 a 24 |
| Color de acento | color del precio y del botón; sin él, se usa el color del texto del sitio web |
| Radio de las esquinas | esquinas de las imágenes y del botón, de 0 a 32 px |
| Botón | texto del botón, por ejemplo «Más información»; vacío, sin botón |
| Mostrar precio | precio y precio anterior en la tarjeta |
Vista previa
La vista previa dibuja el widget igual que en el sitio web, con productos reales de su catálogo. Para «Vistos juntos» y similares se toma un ejemplo: el primer producto disponible, cuyo id se indica encima de la vista previa. Si no hay productos adecuados, se muestran marcadores grises para valorar la apariencia. El selector Escritorio / Teléfono reduce el espacio al ancho de un teléfono.
En el sitio web, la disposición se adapta al ancho del espacio disponible, no al de la pantalla: en una columna estrecha y en el teléfono, las tarjetas se colocan de dos en dos. El widget toma la fuente y el color del texto del sitio web.
Código para el sitio web
Cada widget de la lista tiene un bloque Código para el sitio web. Insértelo en la plantilla de la página donde deba aparecer el bloque:
<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>
Atributos:
data-item: id del producto de la página o de los productos del carrito separados por comas:data-item="SKU-1,SKU-7". Es obligatorio para los tipos «Vistos juntos», «Comprados juntos» y «Similares»; insértelo desde la plantilla de la página.data-category: id de la categoría para los productos populares, si en distintas páginas se necesitan categorías distintas.data-exclude: id de productos separados por comas que no deben mostrarse, por ejemplo los que ya están en el carrito.
Los productos personalizados y los vistos recientemente se seleccionan según el visitante, por lo que no necesitan data-item.
Si no hay productos adecuados, el espacio de la página queda vacío y el diseño no se rompe.
Activación y desactivación
El interruptor Mostrar en el sitio web de la tarjeta del widget lo desactiva sin tocar el sitio: el estado cambia a «En pausa» y el bloque de la página se vacía. Vuelva a activarlo y los productos regresarán. El botón de la papelera elimina el widget por completo: dejará de mostrarse en el sitio web.
El botón del lápiz abre Editar widget. Los cambios se ven en el sitio web en la siguiente carga de la página; no hace falta cambiar el código.
Estadísticas
Bajo el nombre del widget aparecen las estadísticas de 30 días:
| Indicador | Cómo se calcula |
|---|---|
| Impresiones | el widget entró en el campo visual del visitante al menos en la mitad. Cargar la página sin desplazarse hasta el bloque no cuenta, por lo que el CTR de un widget al final de la página es fiable |
| Clics | clics en las tarjetas de productos |
| CTR | clics divididos entre impresiones |
| Compras | compras del producto por el mismo cliente en los 7 días siguientes al clic en él |
| Ingresos | importe de esas compras |
El efecto general de las recomendaciones en el sitio web por tipo está en la sección Recomendaciones.
Sitios de una sola página
El rastreador encuentra los widgets por sí mismo al cargar la página, cuando aparecen elementos nuevos y cuando cambia data-item. Por eso, en sitios hechos con React, Vue y similares basta con cambiar el atributo: el bloque se volverá a dibujar.
Si necesita actualizar los productos sin cambiar los atributos, por ejemplo después de modificar el carrito, llame a:
cdp.widgets({ force: true });
Código propio en lugar de un widget
Los desarrolladores pueden mostrar un bloque de recomendaciones desde el código, sin configurarlo en el panel de administración:
window.addEventListener('load', () => {
cdp.renderRecommendations('#recs', {
type: 'viewed_with', item: 'SKU-1', title: 'Vistos juntos', layout: 'carousel', columns: 4,
});
});
El bloque tiene el mismo aspecto que un widget, y las impresiones y los clics se registran automáticamente. Puede llamarlo antes de que se cargue el rastreador: la llamada espera en la cola. El elemento ya debe estar en la página; por eso el ejemplo espera al evento load. Si no hay resultados, el elemento se vacía. El color, el radio de las esquinas y el botón son más cómodos de configurar en un widget del panel de administración.