Configurar recomendaciones

Una vez cargado el catálogo e iniciado el proceso de monitorización de las diferentes páginas del sitio web, sólo falta agregar los recomendadores.

¿Cómo funciona?

Las recomendaciones se añaden de forma diferente en función de si la integración la estamos haciendo con plugins, con Javascript o mediante el API/REST.
Independientemente de si la integración se está hacinedo con javascrip o el API/REST, para poder añadir un recomendador siempre debemos seguir los siguientes 2 pasos:

1. Crear el recomendador
2. Insertarlo en la página web

Creando un recomendador

Los recomendadores se crean y configuran siempre desde el área de clientes de la web de BrainSINS, dentro de la sección Configuración → Configuración RecSINS → Productos.
Para crear un nuevo recomendador basta con pulsar en el botón “Añadir recomendador”, que lanzará un asistente que nos guiará en el proceso de creación..

Al crear un nuevo recomendador tendremos que elegir en qué tipo de página de la web querremos situarlo:

  • Página de inicio (Homepage).
  • Página de producto.
  • Página de carrito (o cesta de la compra).
  • Página de checkout.

A continuación habrá que tomar diferentes decisiones que definirán el recomendador, como si queremos incluir personalización por usuario, si queremos aplicar filtros (visitados recientemente, nuevos productos, contenidos en wishlists, nuevos producots, producots más vendidos, etc.), entre otras cosas.

Definiendo el aspecto visual del recomendador

Una vez creado el recomendador se ejectará automáticamente el editor de estilo, que permitirá definir qué aspecto visual tendrán las recomendaciones ofrecidas por este recomendador. Con él se creará un widget (una pequeña ventana que se integrará en la página que seleccionemos) que contendrá las sugerencias. Con este editor podremos decidir múltiples aspectos:

  • Orientación (horizontal o vertical)
  • Número de artículos a mostrar
  • Colores del widget (fondo, cuerpo, borde, etc.)
  • Si queremos mostrar el precio o no
  • etc.

Este estilo puede modificarse en todo momento desde el menú Configuración → Configuración RecSINS → Productos, haciendo clic en el botón “Estilo” del recomendador en cuestión.

Edit Recommender  Widget

En cualquier caso, el administrador también podría modificar el aspecto del widget recodificando la función encargada de dibujarlo, consiguiendo así mayor libertad a la hora de configurar su aspecto visual.

Añadiendo un recomendador

Una vez integrado el tracking de BrainSINS en una tienda online, casi todas las páginas de la misma contendrán una variable, llamada BrainSINSData, que almacena un JSON (estructura de datos), con información necesaria para realizar el tracking.

Para poder integrar las recomendaciones en cualquier tipo de página, necesitaremos modificar esa variable en formato JSON añadiéndole la información acerca de las recomendaciones que se deben cargar en esa página. Para ello, los datos a añadir siguen la siguiente estructura:

[code language=»javascript»]
language: LANGUAGE,
recommenders: [
{
recommenderId: ID,
location: LOCATION,
position: POSITION
},{
recommenderId: ID,
location: LOCATION,
position: POSITION
}…
]
[/code]

Básicamente añadimos una lista de recomendaciones a cargarse. En la mayoría de los casos, esa lista solo contendrá un recomendador (un bloque de recomendaciones en la página), pero BrainSINS ofrece la posibilidad de cargar distintos tipos de recomendaciones en distintas posiciones de una misma página.

Antes de esta lista, encontramos una variable, LANGUAGE, que deberemos reemplazar con el código de idioma en el que queremos que se carguen las recomendaciones, por ejemplo «es» para español.

En cada elemento de la lista de recomendares, aparecen una serie de campos, algunos de ellos obligatorios y otros de ellos opcionales:

ID es el identificador del recomendador que queremos cargar. Como hemos visto anteriormente, en nuestra herramienta de configuración podemos crear distintas estrategias de recomendación y obtener el identificador de cada recomendador, que será el número que carguemos aquí.

LOCATION representa el elemento HTML donde queremos posicionar las recomendaciones. Por lo general, será el identificador del DIV donde queremos meter las recomendaciones, aunque como veremos en algunos ejemplos, utilizando otros parámetros, podemos colocar las recomendaciones antes, o después de ese elemento.

POSITION indica la posición relativa de las recomendaciones con respecto al elemento HTML que hemos tomado como referencia. Podrá tomar alguno de estos valores: «before», para que se coloque justo delante, «first», para que se inserte como el primer bloque dentro del elemento de referencia, «replace» para que reemplace su contenido, «last» para que se inserte como último bloque, y «after» para que se sitúe después.

Para comprender mejor el funcionamiento de la variable POSITION, veamos el siguiente gráfico, donde LOCATION sería el id del div contenedor («product-options-wrapper»).

recommendations-location

Ahora veamos un ejemplo de cómo añadir un bloque con recomendaciones a una página de producto. En la página de producto, después de haber añadido el código de tracking, tendríamos el siguiente código:

[code language=»javascript»]
<!– BrainSINS Code Starts –>
<script type="text/javascript">
var BrainSINSData = {
pageType: "product",
productId: 123 };
</script>
<!– BrainSINS Code Ends –>
[/code]

Para añadir las recomendaciones, suponiendo que queramos añadir el recomendador con id 2 sustituyendo el contenido del DIV con id «bloque-recomendaciones» (que ya deberemos tener en nuestro HTML), el código resultante sería:

[code language=»javascript»]
<!– BrainSINS Code Starts –>
<script type="text/javascript">
var BrainSINSData = {
pageType: "product",
productId: 123,
language: "es",
recommenders: [
{
recommenderId: 2,
location: "bloque-recomendaciones",
position: "replace"
}
]
};
</script>
<!– BrainSINS Code Ends –>
[/code]

Veamos otro ejemplo. En este caso, añadimos 2 bloques con recomendaciones en la página de categoría, un bloque con un recomendador de productos personalizados filtrados por productos de la categoría que estamos visualizando (que tendrá el id, por ejemplo, 13), y otro bloque con recomendaciones de top ventas en la tienda (que tendrá el id, por ejemplo, 29).

Inicialmente, el código que tenemos en la página de categoría es el siguiente:

[code language=»javascript»]
<!– BrainSINS Code Starts –>
<script type="text/javascript">
var BrainSINSData = {
pageType: "category",
categories: "camisas"
};
</script>
<!– BrainSINS Code Ends –>
[/code]

Al añadir las recomendaciones quedaría como sigue:

[code language=»javascript»]
<!– BrainSINS Code Starts –>
<script type="text/javascript">
var BrainSINSData = {
pageType: "category",
categories: "camisas",
language: "es",
recommenders: [
{
recommenderId: 13,
location: "bloque-recomendaciones-1",
position: "replace",
filter: "any"
},{
recommenderId: 29,
location: "bloque-recomendaciones-2",
position: "replace"
}
]
};
</script>
<!– BrainSINS Code Ends –>
[/code]

En el caso del recomendador 13, vemos como hemos utilizado un parámetro adicional, filter, que nos permite filtrar las recomendaciones para que solo se muestren recomendaciones de productos que sean de la misma categoría.