En esta lección, aprenderás e implementarás el workflow para mostrar un inline recomendador en las fichas de producto para aumentar la retención y las ventas.
Recomendar productos personalizados durante la navegación del contacto por tu eCommerce te ayudará a incrementar las posibilidades de compra y el valor de las mismas. Con Connectif, puedes fácilmente añadir un contenido recomendador creado con contenido web de tipo inline.
Objetivo: Retención y conversión.
Elementos utilizados: Inline.
Tiempo de implementación: 2 horas.
Te recomendamos que sigas todos los pasos e implementes esta estrategia desde cero en tu cuenta, pero si necesitas una vía rápida, en el Directorio de Plantillas de Workflows tienes disponible la plantilla Recomendador en ficha de producto, con la que puedes trabajar.
Resumen de la lección
En esta lección vas a aprender:
- El nodo "Al visitar un producto" para detectar las visitas de contactos a una ficha de producto.
- El nodo "Obtener productos" para obtener los productos que se mostrarán posteriormente en algún tipo de contenido.
- Cómo crear e insertar en la página un contenido inline, en este caso, de recomendación.
Al terminar la lección, habrás creado en tu cuenta:
La estrategia que contiene este workflow, a través de la cual mostrarás un inline tras la ficha de producto en el momento que un contacto esté visitando dicho producto. Dependiendo de los productos obtenidos relacionados con el mismo, se mostrará un inline más preciso o se tratará de obtener otros ítems recomendados.
Configuración de la estrategia
PASO 0. Creación del workflow
Cómo crear el workflow para esta estrategia
1. En tu cuenta de Connectif, haz clic en "Workflows > Crear nuevo Workflow" y, a continuación, en Crear Workflow en blanco.
2. Haz clic en (Edición) y asígnale el nombre "Recomendador en ficha de producto".
3. Haz clic en Aplicar para guardar el nuevo nombre de tu workflow.
PASO 1. Nodo "Inicio"
Cómo configurar el Nodo "Inicio" para esta estrategia
(Este nodo establece la audiencia a la que va a ir dirigido el workflow).
4. Haz clic en (Editar configuración del nodo) del nodo “Inicio”.
5. En Selecciona una restricción, marca "Toda mi lista" y selecciona en el desplegable la opción “Toda mi lista”.
6. En Selecciona la fuente de datos, marca "Todos los existentes y los nuevos".
7. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que el workflow se active para todos los contactos que visiten la web, tanto nuevos como existentes.
PASO 2. Nodo "Al visitar un producto"
Cómo funciona el Nodo "Al visitar un producto"
Este nodo se utiliza para reaccionar en el momento en que un contacto visita una página de producto.
En la interfaz del nodo se configuran las características específicas de los productos que lo dispararán.
Cómo configurar el Nodo "Al visitar un producto" para esta estrategia
(Este nodo hará que la siguiente acción del workflow, en este caso enviar el inline de suscripción a las notificaciones push, se active cuando un contacto visite tu web).
8. En el menú de selección de nodos, dirígete a "Disparadores > Comercio electrónico" y arrastra el nodo "Al visitar un producto" al editor, de forma que conecte con el nodo "Inicio".
9. Haz clic en (Editar configuración del nodo) del nodo “Al visitar un producto”.
10. Haz clic en Limitaciones y desactiva la casilla "Desactivar tras dispararse".
11. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que, en el momento en que un contacto visite cualquier página de producto desde cualquier dispositivo, pase a la siguiente acción.
PASO 3. Primer Nodo "Obtener productos"
Cómo funciona el Nodo "Obtener productos"
Este nodo es uno de los más útiles de toda la plataforma. Se utiliza para filtrar los productos que se mostrarán posteriormente en algún tipo de contenido. En él se configuran, en diferentes pantallas, qué productos y cómo obtendrán:
- Selecciona los casos de uso. Para escoger grupos de productos que obtendrá el nodo. Pueden seleccionarse hasta 2, siendo el primero el que tenga prioridad.
- Configuración de los casos de uso. Para establecer, en cada caso los productos a obtener, el origen de los productos, las condiciones o filtros que estos deben cumplir y el orden en que queremos que se muestren.
- Resumen. Para establecer la cantidad total de productos a obtener en el nodo, si se limita el número total de productos a devolver y si se desea excluir productos obtenidos en nodos anteriores.
Cómo configurar el Nodo "Obtener productos" para esta estrategia
(Este nodo va a obtener los productos automáticamente relacionados al producto que se visita, de la misma categoría y marca).
12. En el menú de selección de nodos, dirígete a "Acciones > Comercio electrónico" y arrastra el nodo "Obtener productos" al editor, de forma que conecte con el nodo "Al visitar un producto".
13. Haz clic en (Editar configuración del nodo) del nodo “Obtener productos”.
14. Para seleccionar los casos de uso, arrastra Automáticamente relacionados a un producto al bloque de la derecha y haz clic en Siguiente . De este modo, se obtendrán los productos que se relacionen automáticamente al visitado por el contacto.
15. En Configuración del caso principal, indica "12" en Cantidad de productos a obtener, para que Connectif obtenga hasta 12 ítems relacionados con el visitado.
16. En Selecciona la fuente de los productos, selecciona Todos los productos, para que Connectif busque en todo tu catálogo.
17. En Selecciona el producto relacionado, selecciona “Producto (Al visitar un producto)”, para que el dato que importe Connectif provenga de la página visitada por el contacto.
18. En Configura las condiciones para definir un set específico de productos:
- Haz clic en Añadir otra condición y selecciona en el desplegable “Categorías”. En la derecha, selecciona “Datos importados” y, tras hacer clic en “Selecciona un dato importado”, escoge “Al visitar un producto > Categorías”. De este modo, Connectif obtendrá productos de la misma categoría que el visitado.
- Haz clic en Añadir otra condición y selecciona en el desplegable “Marca”. En la derecha, selecciona “Está incluído en” y, tras hacer clic en “Selecciona un dato importado”, escoge “Al visitar un producto > Marca”. De este modo, Connectif obtendrá productos de la misma marca que el visitado.
19. En Selecciona un orden, escoge "Ordenar por valoración descendente" y activa la casilla "Reordena de manera aleatoria los productos obtenidos". De este modo, Connectif escogerá los 12 productos con mayor valoración, pero en el contenido se ordenarán de forma aleatoria.
20. Haz clic en Siguiente .
21. En el último paso de la configuración del nodo, Resumen, localiza la sección Cantidad de productos a obtener e indica “12” para que esta sea la cantidad máxima de productos que se muestren.
22. Desactiva la casilla “Rellenar productos hasta límite seleccionado”, para que, en el caso de que no haya 12 productos que cumplan estas condiciones, Connectif no añada contenido adicional.
23. Activa la casilla “Excluir los productos exportados por nodos anteriores” para asegurar que no se muestre el productos visitado.
24. Haz clic en Finalizar .
En este paso hemos indicado a Connectif que obtenga, para mostrar en el inline, productos automáticamente relacionados con el que ha visitado el contacto. Con la configuración del nodo, se mostrarán hasta 12 productos de la misma marca y categoría, seleccionados en base a sus valoraciones.
PASO 4. Nodo "Comprobar valor"
Cómo configurar el Nodo "Comprobar valor" para esta estrategia
(Este nodo comprueba si el tamaño de la lista obtenida de productos recomendados es mayor que 4).
25. En el menú de selección de nodos, dirígete a "Condiciones > Sistema" y arrastra el nodo "Comprobar valor" al editor, de forma que conecte con el nodo "Obtener productos".
26. Haz clic en (Editar configuración del nodo) del nodo “Comprobar valor”.
27. Arrastra el campo "Tamaño del listado" de "Obtener productos" hacia el bloque de la izquierda.
28. En la columna del "Operador" selecciona "Es mayor que".
29. Arrastra el campo Literal al bloque de la derecha y establece un valor de "4".
30. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que compruebe si, en el nodo "Obtener productos", se han conseguido más de 4 productos relacionados con el ítem visitado, para continuar por el flujo mostrando los productos obtenidos. Si el número de productos resultantes no es superior a 4, se continuará por otra rama para obtener más productos a través de un segundo nodo "Obtener productos".
PASO 5. Primer nodo "Enviar contenido web"
Cómo crear el inline para esta estrategia
(En este paso vas a crear el inline que contendrá los productos relacionados, que será el que muestre el nodo cuando el contacto visite la página de producto).
31. En el menú de selección de nodos, dirígete a "Acciones > Web" y arrastra el nodo "Enviar contenido web" al editor, de forma que conecte con el nodo "Comprobar valor".
32. En la unión de este nodo con el anterior, haz clic en el círculo hasta que aparezca "Sí". De este modo, estarás indicando a Connectif que el inline se muestre si aparecen más de 4 productos relacionados diferentes.
33. Haz clic en (Editar configuración del nodo) del nodo “Enviar contenido web” y Crear nuevo contenido para generar un nuevo contenido.
34. Al crear un nuevo contenido, selecciona como tipo Inline, asígnale un nombre y haz clic en Crear contenido web.
35. En el panel de Herramientas, haz clic en la pestaña General para editar los parámetros del aspecto general de tu inline. También puedes acceder haciendo clic en Propiedades generales del panel de diseño.
36. Haz clic en la pestaña Componentes para acceder a las opciones de elaboración y diseño de tu inline.
- En Disposición, escoge la estructura de una columna.
- En Elementos, añade un elemento de tipo "Texto" para introducir en el contenido y edítalo a tu gusto.
- En Elementos, añade un elemento de tipo "Productos" para mostrar los productos recomendados y haz clic en el botón (Editar elemento) :
- Asígnale un nombre, un tipo (en este caso, Carrusel), y una plantilla (en este caso, Producto con marca).
- En estructura, escoge cuántos elementos se mostrarán a la vez, tanto en escritorio como en móvil. En el ejemplo se han seleccionado 4 en escritorio y 1 en móvil.
- Escoge, de forma opcional, un tiempo de rotación. En caso de indicar 0, la rotación automática estará desactivada.
37. Haz clic en Guardar para conservar las modificaciones en el diseño y en Volver al selector para volver y finalizar la configuración del nodo.
Cómo configurar el Nodo "Enviar contenido web" para esta estrategia
38. Selecciona el contenido Inline correspondiente y haz clic en Siguiente .
39. Localiza en tu web el selector adecuado para mostrar el contenido. Puedes seguir los pasos de este ejemplo:
-
Accede a la página de tu web donde desees añadir el contenido embebido.
-
Visualiza el bloque que quieres usar de referencia.
-
Abre la consola de herramientas de desarrollo (DevTools) del navegador.
-
Selecciona la pestaña Elements en la consola para visualizar la estructura HTML.
- Pulsa sobre el icono Inspeccionar, el primero por la izquierda en el menú superior.
- Sitúa el cursor del ratón sobre el área del contenido que planeas usar como referencia. Haz clic cuando la selección sea la adecuada para que la etiqueta quede resaltada en la consola.
- Haz clic sobre el contenido de la pestaña Elements de la consola y usa el atajo de teclado Control + F para buscar el nombre de la etiqueta o atributo. Si solo tiene una coincidencia (como en este ejemplo) es adecuado y lo podrás utilizar. En ese caso, copia el nombre y cierra la consola de desarrollo. Si hay más de una coincidencia, deberás localizar otro selector único.
40. Una vez localizado y copiado el selector, vuelve a la configuración del nodo "Enviar contenido web" en Connectif, añádelo en Configuración para mostrar el contenido y haz clic en Siguiente . (En la captura seguimos con el ejemplo anterior, tu deberás indicar el nombre del selector que hayas escogido).
41. Asocia las variables del producto del nodo "Obtener productos", en este caso, los productos recomendados, para personalizar el inline con los ítems obtenidos en ese nodo y su información. Para ello, vincula los campos de Connectif (columna izquierda) con las variables de tu email (columna derecha):
- Arrastra el campo Nombre para hacerlo coincidir con la variable {{name}}. De este modo, en esa variable se incluirá el nombre del producto que aparezca en tu catálogo.
- Arrastra el campo Url de detalle para hacerlo coincidir con la variable {{buttonUrl}} . De este modo, en esa variable se incluirá la dirección de la ficha del producto que aparezca en tu catálogo.
- Arrastra el campo Url de imagen para hacerlo coincidir con la variable {{imageUrl}}. De este modo, en esa variable se incluirá la imagen del producto.
- Arrastra el campo Precio unitario para hacerlo coincidir con la variable {{unitPrice}}. De este modo, en esa variable se incluirá el precio unitario actual de ese producto.
- Arrastra el campo Literal para hacerlo coincidir con la variable {{buttonText}} e introduce en él el texto que desees que muestre el botón. De este modo, en esa variable se incluirá el texto del botón que hayas definido.
42. Haz clic en Finalizar .
En este paso hemos indicado a Connectif que muestre el inline con la recomendación de productos, que acabamos de crear, a los visitantes que llegan a esta parte del flujo. En esta estrategia no hemos añadido limitaciones al inline para que se muestre siempre que se cumplan las condiciones.
PASO 6. Segundo nodo “Obtener productos”
(Este nodo va a obtener los productos más visitados en el últimos mes, de la categoría y marca del producto visitado).
43. En el menú de selección de nodos, dirígete a "Acciones > Comercio electrónico" y arrastra el nodo "Obtener productos" al editor, de forma que conecte con el nodo "Comprobar valor".
44. En la unión de este nodo con el anterior, haz clic en el círculo hasta que aparezca "No".
45. Haz clic en (Editar configuración del nodo) del nodo “Obtener productos”.
46. Para seleccionar los casos de uso, arrastra "Productos más visitados" al bloque de la derecha y "Productos más vendidos" al caso de uso adicional. De este modo, se obtendrán los productos más visitados y, si estos no son suficientes, se obtendrán los más vendidos. Haz clic en Siguiente .
47. En Configuración del caso principal, completa la siguiente configuración:
- Indica "12" en Cantidad de productos a obtener, para que Connectif obtenga hasta 12 ítems.
- En Selecciona el origen de los productos, selecciona Todos los productos, para que Connectif busque en todo tu catálogo los productos a mostrar.
- En Configura las condiciones para definir un set específico de productos:
- Haz clic en Añadir otra condición y selecciona en el desplegable “Categorías”. En la derecha, selecciona “Datos importados” y, tras hacer clic en “Selecciona un dato importado”, escoge “Al visitar un producto > Categorías”. De este modo, Connectif obtendrá productos de la misma categoría que el visitado.
- Haz clic en Añadir otra condición y selecciona en el desplegable “Marca”. En la derecha, selecciona “Está incluído en” y, tras hacer clic en “Selecciona un dato importado”, escoge “Al visitar un producto > Marca”. De este modo, Connectif obtendrá productos de la misma marca que el visitado.
- En Selecciona el período de tiempo de las visitas, escoge Más visitados en el último mes, para que Connectif obtenga los productos más visitados del último mes.
- Activa la casilla la casilla "Reordena de manera aleatoria los productos obtenidos", para que el orden en que se muestra los productos siempre varíe.
48. Haz clic en Siguiente .
49. En Configuración del caso adicional, completa la siguiente configuración:
- Selecciona "12" en Cantidad de productos a obtener.
- Haz clic en Añadir otra condición y selecciona en el desplegable “Categorías”. En la derecha, selecciona “Datos importados” y, tras hacer clic en “Selecciona un dato importado”, escoge “Al visitar un producto > Categorías”.
- En Selecciona el periodo de tiempo de las visitas, escoge "Más vendidos en el último mes" y activa la casilla "Reordena de manera aleatoria los productos obtenidos".
50. Haz clic en Siguiente y, ya en Resumen, localiza la sección Cantidad de productos a obtener e indica “12”. A continuación, activa "Rellenar con productos hasta el límite seleccionado" y "Excluir los productos exportados por nodos anteriores a este".
51. Haz clic en Finalizar .
En este paso hemos indicado a Connectif que obtenga, para mostrar en el contenido, los productos más visitados y más vendidos del último mes. Con la configuración del nodo, se mostrarán hasta 12 productos de la misma marca y categoría, seleccionados en base a sus valoraciones. En el caso de no existir 12 productos con esas condiciones, el algoritmo de Connectif buscará productos complementarios.
PASO 7. Segundo nodo "Enviar contenido web"
Cómo crear el inline para esta estrategia
(En este paso vas a enviar el mismo inline que creamos en el Paso 5, pero en este caso contendrá los productos obtenidos en el segundo nodo "Obtener productos").
52. En el menú de selección de nodos, dirígete a "Acciones > Web" y arrastra el nodo "Enviar contenido web" al editor, de forma que conecte con el segundo nodo "Obtener productos".
53. Haz clic en (Editar configuración del nodo) del nodo “Enviar contenido web” y selecciona el inline que creaste en el Paso 5.
54. Haz clic en Siguiente .
55. En Configuración añade el selector adecuado para mostrar el contenido y haz clic en Siguiente . Si necesitas más información sobre cómo localizarlo puedes volver al Paso 5 para encontrar cómo hacerlo.
56. Asocia las variables del producto del segundo nodo "Obtener productos", en este caso, los productos más visitados, para que el inline muestre los ítems obtenidos en ese nodo y su información. Puedes tomar esta imagen como referencia:
57. Haz clic en Finalizar .
En este paso hemos indicado a Connectif que muestre el inline con recomendador de productos que acabamos de crear a los visitantes que llegan a esta parte del flujo. En esta estrategia no hemos añadido limitaciones al inline para que se muestre siempre que se cumplan las condiciones.
Resultado
Tras completar los pasos, habrás creado tu estrategia para mostrar un inline recomendador que aparecerá tras la ficha de producto en el momento que un contacto esté visitando el producto.
Continúa tu recorrido
Ahora que has completado esta lección, continúa con la siguiente, con la que crearás en tu cuenta una estrategia de remarketing.
¡Enhorabuena!
Has llegado al final de la lección.
Vuelve al curso
Accede al índice completo del curso y la explicación de cada lección en este enlace.
Lecturas relacionadas
Si quieres profundizar en alguno de los aprendizajes adquiridos en esta lección, puedes acceder a la documentación de la guía:
- Nodo "Obtener productos", para comprender en profundidad el funcionamiento de este nodo que has utilizado en esta estrategia y cómo aprovecharlo en otros workflows.
- Insertar un inline en tu eCommerce, por si te ha quedado alguna duda acerca de cómo localizar e insertar el ID. Y, si tienes VTEX IO, sigue los pasos de este artículo para añadir contenidos web.
- Mostrar porcentaje de rebaja solo cuando exista descuento, para aprender cómo destacar los productos cuando estén rebajados frente a otros que no lo están.