¿Qué vamos a hacer?
En este artículo vamos a enseñaros cómo insertar un contenido web de tipo Inline (banner) en vuestra página principal o "home". En este contenido web mostraremos a nuestros contactos un carrusel con los últimos productos que han visitado más una selección de productos automáticamente relacionados con sus visitas.
Es un contenido web muy apreciado por los visitantes de un eCommerce ya que, además de servir de acceso directo a sus últimos productos visitados, pueden descubrir productos nuevos e interesantes.
Crear contenido web de tipo Inline
Para crear un contenido de tipo Inline debemos navegar por estas secciones: "Contenido > Contenido Web > Crear nuevo contenido > Inline".
Estructura y elementos del Inline
En este caso de uso vamos a utilizar un bloque de texto, que será el título del contenido y un componente avanzado "Productos", ya que queremos mostrar artículos de nuestro eCommerce.
Teniendo la estructura definida, vamos a dar estilo a cada uno de los elementos.
Elemento "Texto"
Hacemos doble clic sobre el elemento "texto" y se abrirá el editor. Es aquí donde indicamos el texto a mostrar y le aplicamos los siguientes estilos:
- Negrita
- Tipografía: Verdana
- Tamaño fuente: 18pt
- Alineación: izquierda.
Dejamos el resto de opciones tal como vienen por defecto. También podemos editar directamente el HTML si hacemos clic sobre "<>" si fuera necesario.
Elemento "Productos"
Este componente se utiliza para poder mostrar productos exclusivamente. Su configuración es común en todos los elementos web.
Hacemos clic sobre el bloque y se nos mostrará el editor a través del cual vamos a dotar de estilo al componente.
Nombre y Tipo.
Aquí podemos modificar el nombre del bloque. Es muy recomendable realizarlo si se utiliza más de un bloque de tipo "Productos", ya que posteriormente, en la asignación de valores que veremos más adelante en la creación del workflow, es de gran ayuda para poder identificarlo rápidamente.
En tipo seleccionamos "Carrusel". Si quieres mostrar un banner estático puedes cambiarlo el tipo.
Plantilla.
Por defecto Connectif tiene 3 plantillas, las cuales son totalmente personalizables mediante HTML y CSS.
En este ejemplo, hemos seleccionado la "Plantilla con Marca" y editado el HTML, haciendo clic sobre "<>", eliminando las variables {{brand}} y {{buttonText}}.
Para facilitar la creación de este caso de uso, os dejamos aquí el HMTL de la plantilla. Tan solo debéis sustituir el código HTML de la plantilla por este:
<div class="cn_element_products_2_container" style="width: 100%; padding: 10px; text-align: center; box-sizing: border-box;"><a class="cn_element_products_2_image" style="text-decoration: none; display: block; width: 100%;" title="{{name}}" href="{{buttonUrl}}"> <img style="display: block; margin: auto; outline: none; border: none; height: auto; max-width: 100%; max-height: 250px;" src="{{imageUrl}}" alt="{{name}}"> </a>
<div class="cn_element_products_2_name" style="margin-top: 15px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 2.1em; line-height: 1em; box-sizing: border-box; text-overflow: ellipsis;color:rgb(122, 122, 122);text-transform:capitalize;">{{name}}</div>
<div class="cn_element_products_2_unit_price" style="color: #000; font-size: 16px; word-wrap: break-word; white-space: normal; overflow: hidden; height: 1.1em; line-height: 1em; box-sizing: border-box; margin-top:16px;"><strong>{{unitPrice}}</strong></div>
</div>
Haciendo clic aquí:
Aún así, es posible que se tenga que modificar algún elemento dependiendo de los estilos globales que apliquen en vuestro eCommerce.
Estructura
En esta sección vamos a poder indicar las filas y columnas que queremos mostrar en el bloque de productos, tanto en mobile como en escritorio/desktop, así como elegir la velocidad de rotación automática del carrusel:
Siguiendo nuestro caso de uso, indicamos 4 elementos visibles en escritorio, 2 en mobile y rotación automática 0, para que el carrusel no se mueva a no ser que el contacto haga clic en las flechas.
La disposición, colores y avanzados, los dejamos tal y como están configurados. En avanzados podemos añadir el nombre de una o varias clases CSS en caso de que queramos aplicar, por ejemplo, algún estilo del CSS global de vuestro eCommerce.
Una vez finalizada la configuración, guardamos y ya tenemos listo el elemento Inline.
Obteniendo la id del elemento a modificar
Antes de entrar en la explicación de la creación del workflow es importante conocer de qué forma, o cómo, vamos a indicar a Connectif el contenido que debe reemplazar.
Básicamente, como veremos a continuación, hemos de indicar a Connectif la ID, clase o atributo del elemento que queremos cambiar. Os vamos a explicar paso a paso como hacerlo.
En la home de nuestro eCommerce, hacemos clic sobre F12 y se abrirán las "DevTools" del navegador en la parte inferior del mismo.
Hacemos clic sobre el la primera opción, "select", nos situamos encima del elemento a reemplazar y hacemos clic.
Si nos fijamos, en el "DevTools", se sombrea el elemento y podemos identificar la id del mismo, en este caso "custom-text".
Ya tenemos el contenido que vamos a mostrar. También hemos identificado el elemento a modificar, por lo que ha llegado el momento de crear el workflow.
Crear Workflow para mostrar el contenido Inline
Mediante el workflow que vamos a preparar vamos a mostrar a nuestros contactos los últimos productos visitados por ellos mismos y, además, productos relacionados con esas visitas.
Este será el workflow resultante:
Para ello vamos a crear un nuevo workflow desde "Workflows > Crear nuevo workflow > Crear workflow en blanco".
Lo primero será modificar el nombre del workflow y añadir una descripción del mismo, si lo vemos necesario. Además, es recomendable utilizar etiquetas para la organización de los workflows. En este caso indicamos el objetivo, "Conversión" y el tipo de contenido utilizado, "Inline".
Nodo "Inicio"
En este nodo hemos de indicar el target principal del workflow. En nuestro caso será "Toda mi lista" y "Todos los existentes y los nuevos". Así nos aseguramos que el workflow se ejecutará a todos los contactos que visiten nuestro site.
Nodo "Al Visitar Página"
Ahora añadimos el nodo de tipo disparador "Al Visitar página", que será el encargado de detectar la visita del contacto a nuestra "home". En este ejemplo indicaremos la URL en la que se ha de disparar el nodo, es decir, la URL de nuestra home. Seleccionaremos "Cualquiera de las siguientes páginas exactamente" e introducimos la URL exacta:
En la pestaña de "Limitaciones", vamos a desmarcar la opción que viene por defecto, "Desactivar tras activarse", ya que queremos que este nodo se dispare siempre que el contacto visite la "home".
Nodo "Últimos visitados" (Obtener productos)
A través de este nodo vamos a recoger un listado que usaremos para obtener, en otro nodo, productos recomendados basados en este listado. Lo configuramos así:
Hacemos clic en "Siguiente" y configuramos el caso de uso. Indicamos la cantidad de productos que queremos obtener, en nuestro caso 40, que es el máximo que un nodo "Obtener productos" puede listarnos. De este modo las recomendaciones que obtengamos en el siguiente nodo serán más precisas:
En el cuadro "Resumen" dejamos esta configuración:
Nodo "Últimos visitados + Recomendados" (Obtener productos)
A través de este nodo obtendremos los productos que se mostrarán a cada contacto. Queremos mostrar 10 productos en el carrusel: intentaremos mostrar 5 productos que ya haya visitado el contacto y 5 recomendaciones. Si el contacto no ha visitado 5 productos es posible que necesitemos obtener más productos recomendados, hasta llegar a 10 productos mostrados en el carrusel. Esto se puede configurar de forma muy sencilla en las opciones de los casos de uso.
El primer paso es elegir los casos de uso:
Después configuramos el caso de uso principal, "Últimos productos visitados":
Seguidamente, configuramos el caso de uso adicional, "Automáticamente relacionados a lista de productos":
Finalmente, el resumen deberíamos configurarlo así:
Ya tenemos el listado de productos que queremos mostrar, así que solo nos falta configurar dónde y cómo vamos a mostrar ese listado.
Nodo "Enviar contenido web Inline"
El primer paso es elegir el contenido web que creamos anteriormente:
A continuación elegimos dónde queremos mostrarlo. En un paso anterior ya elegimos el sitio que queremos, el bloque con id "custom-text", así que es el momento de indicarlo en la configuración:
En "Posición respecto al elemento seleccionado", tal y como hemos comentado anteriormente, indicamos "Reemplazando el interior" y hacemos clic en "Siguiente".
Ahora tenemos que asociar a las variables del contenido que hemos creado los valores de producto que se han de mostrar.
En la izquierda se encuentran los datos de todos los nodos que hemos utilizado en el workflow y en la derecha las variables del contenido Inline que vamos a utilizar.
En nuestro caso hemos de asociar a las variables los datos del nodo "Últimos visitados + Recomendados". Tan solo tendremos que arrastrar los campos necesarios:
Una vez hemos asociado, hacemos clic en "Finalizar" y ya tendremos listo nuestro flujo.
Ya solo quedaría activarlo haciendo clic en "Iniciar" en la parte superior izquierda del workflow.
Y este sería el resultado:
