Implementación del código JavaScript de Nosto. Tagging de todas las páginas del sitio web. Previsualización del tagging

Transcripción

1 Guia de instalación

2 Hola! Soy Romain, su guía para la instalación de Nosto! Veremos como instalar Nosto en 7 sencillos pasos. Vamos a ver todas las consideraciones a tener en cuenta en la instalación de Nosto, en tan solo un par de horas. Estos son los pasos esenciales a seguir: 1 del código JavaScript de Nosto 2 4 en el sitio y vista previa 6 de las recomendaciones 7 de las recomendaciones de Nosto! de todas las páginas del sitio web 3 5 del tagging Creación de las recomendaciones

3 <script type="text/javascript"> //<![CDATA[ (function(){function a(a){var b,c,d=window.document.createelement("iframe");d.src="javascript:false",(d.frameelement d).style.csstext="width: 0; height: 0; border: 0";var e=window.document.createelement("div");e.style.display="none";var f=window.document.createelement("div");e.appendchild(f),window.document.body.insertbefore(e,window.document.body.firstchild),f.appendchild(d);try{c=d.c ontentwindow.document}catch(g){b=document.domain,d.src="javascript:var d=document.open();d.domain='"+b+"';void(0);",c=d.contentwindow.document}return c.open()._l=function(){b&&(this.domain=b);var c=this.createelement("scr".concat("ipt"));c.src=a,this.body.appendchild(c)},c.write("<bo".concat('dy onload="document._l();">')),c.close(),d}var b="nostojs";window[b]=window[b] function(a){(window[b].q=window[b].q []).push(a)},window[b].l=new Date;var c=function(d,e){if(!document.body)return settimeout(function(){c(d,e)},30);e=e {},window[b].o=e;var f=document.location.protocol,g=[" "connect.nosto.com",e.path "/include/",d].join("");a(g)};window[b].init=c})(); nostojs.init( [número-de-cuenta] ); //]]> </script> El código Javascript le permite a Nosto monitorizar la actividad en su tienda. Debe ser colocado en el header de su sitio web. Debe insertar su número de cuenta con Nosto en el espacio reservado para ello, tal y como se muestra arriba [número-de-cuenta]. Cada vez que ser carga una página, Nosto escanea la página correspondiente y captura los atributos relacionados con Nosto. A través del código de JavaScript Nosto puede recopilar información en tiempo real, como por ejemplo el número de visitantes en su sitio web. Sin embargo, con este simple código de JavaScript Nosto no puede dar sentido a la información. Tiene que ser estructurado. Por ello veremos la importancia del tagging. El código Javascript debe estar presente en la cabecera de su sitio web. No debe ser colocado en el cuerpo ni al pié de su sitio web. Este estará presente en cada página de su sitio. Debe quitar los corchetes al insertar su número de cuenta Nosto. Por ejemplo, si su número de cuenta es 12345, se inserta de la siguiente manera : nostojs.init( );

4 de categoría del producto de búsqueda del carrito de confirmación de compra Información del cliente Introduction Nosto necesita estructurar y dar sentido a la información recogida por el código JavaScript. Los comportamientos de navegación y compra son cruciales para que los algoritmos de Nosto produzcan recomendaciones relevantes. Para ello, coloque una pocas lineas del código de Nosto, las cuales tienen diferentes tipos de contenido dependiendo de la página del web site. Mira qué líneas del código de Nosto se colocan en la plantilla de la página de categoría. <div class="nosto_category" style="display:none">/invierno/accessorios/gorros</div> Esta linea de código (elemento DIV) se coloca en la plantilla de la página de categoría. Por lo tanto, todas las categorías y subcategorías de su página serán etiquetados con este DIV. Como es el caso del ejemplo anterior /Invierno/Accesorio/Gorros. Debe ser sustituido por la variable dinámica correspondiente a su plataforma de comercio electrónico. El div nosto_category también estará presente en las páginas de etiquetado de productos, pero el valor para rellenarlo será ligeramente diferente. Vamos a detallarlo en la siguiente sección: etiquetado de páginas de producto.

5 de categoría del producto de búsqueda del carrito de confirmación de compra Información del cliente <div class="nosto_product" style="display:none"> <span class="url"> URL de la página del producto. <span class="product_id">gorro123</span> <span class= name">gorro rojo de lana para hombre</span> <span class="image_url"> <span class="price">30.90</span> <span class="price_currency_code">eur</span> <span class="availability">instock</span> <span class="category">/hiver/accessoires/bonnets</span> <span class="category">/soldes/accessoires</span> ID del producto. Nombre del producto. URL de la imagen del producto. La imagen sera reutilizada por Nosto para generar recomendaciones. Precio de venta en el interfaz de usuario (puede ser un precio con descuento, por ejemplo). Divisa, 3 letras - ISO4217. Por ejemplo : EUR para euro, GBP para la libra, USD para US Dollar,. Disponibilidad del producto. Entre "InStock" (en stock), "Discontinued" (discontinuado) y "OutOfStock" (son stock). Debíendo ser la disponibilidad principal. Categorías con las que se enumera el producto. <!-- Propriétés optionnelles --> <span class="description">ce bonnet rouge est joli.</span> Descripción del producto. <span class="list_price">40.90</span> Precio de lista. De esta forma nosto será capaz de saber si el se encuentra en descuento. <span class="brand">adidas</span> Marca del producto. <span class="tag1">homme</span> <span class="tag2">rouge</span> Tag asignado según sea necesario. <span class="tag3">soldes</span> </div> <span class="date_published"> </span> Fecha de publicación del producto. <div class="nosto_category" style="display:none">/soldes/accessoires</div> Categoría activa (breadcrumb) - Camino que sigue el usuario para encontrar el producto.

6 de categoría del producto de búsqueda del carrito de confirmación de compra Información del cliente Por defecto, usted tiene que utilizar los parámetros de consulta de búsqueda en la interfaz Nosto ingresando a y seleccionando la pestaña Cuenta y luego la categoría Configuración. En el siguiente ejemplo, el parámetro de consulta es «q». Este termino corresponde en la URL después «?» y antes de «=». q Si usted no tiene un parámetro de consulta de búsqueda, puede etiquetar la página de búsqueda con el siguiente código: <div class="nosto_search_term" style= display:none">[termino de búsqueda]</div> Exemple : <div class="nosto_search_term" style= display:none">gorro rojo</div

7 de categoría del producto de búsqueda del carrito de confirmación de compra Información del cliente <div class="nosto_cart" style="display:none"> <div class="line_item"> <span class="product_id">gorro123</span> ID del producto <span class="quantity">1</span> Cantidad del artículo selecionado <span class="name">gorro rojo de lana para hombre</span> Nombre del producto <span class="unit_price">30.90</span> Precio de venta en front-office (puede ser un precio con descuento, por ejemplo). <span class="price_currency_code">eur</span> </div> <div class="line_item"> <span class="product_id">gants456</span> <span class="quantity">1</span> <span class="name">paire de gants bleu</span> <span class="unit_price">15.90</span> <span class="price_currency_code">eur</span> </div> Divisa. Por ejemplo : EUR para euro,.(3 letras - Estándar ISO4217) Lo mismo ocurre con otros producto seleccionados Atención - - Todos los productos en carrito deben ser incluidos en la etiqueta div con clase "line_item" - - El ID del producto devuelto debe ser el ID padre (o madre - el nombre difiere entre plataformas). El ID debe ser el mismo que usó en la página del artículo. Esto le permite al rastreador de Nosto poner los productos seleccionados correctamente.

8 de categoría del producto de búsqueda del carrito de confirmación de compra Información del cliente <div class="nosto_purchase_order" style="display:none"> <span class="order_number">1445</span> Número de orden <div class="buyer"> <span dirección del cliente <span class="first_name">alberto</span> <span class="last_name">garcía</span> <div class="purchased_items"> <div class="line_item"> <span class="product_id">gorro123</span> <span class="quantity">1</span> Nombre del cliente. Apellido del cliente <span class="name">gorro rojo de lana para hombre</span> <span class="unit_price">30.90</span> <span class="price_currency_code">eur</span> </div> </div> </div> Información del producto solicitado Atención - - El ID de producto devuelto debe ser el ID padre (o madre - el nombre difiere entre plataformas). El ID debe ser el mismo que el devuelto in la página producto y de carrito. Esto le permite a Nosto realizar el correcto seguimiento de las compras. - - Si son varios los productos ordenados, cada producto deberá estar contenido en un <div class="line_item"> y </div> - - Este código debe ser colocado en la página de confirmación del pedido. Si utiliza modelos de pago de terceros como PayPal, debe devolver a los clientes en esta página inmediatamente después de la confirmación de la compra.

9 de categoría del producto de búsqueda del carrito de confirmación de compra Información del cliente <div class="nosto_customer" style="display:none"> <span class= dirección del cliente. <span class="first_name">alberto</span> <span class="last_name">garcía</span> <!-- Propriétés optionnelles --> <span class="birth_date"> </span> </div> Nombre del cliente Apellido Fecha de nacimiento El código anterior se debe colocar en todos los tipos de páginas. Esta información sólo se utilizará para personalizar los s de abandono de carrito, seguimiento y we miss you (inactividad del cliente). Estos datos están encriptados y nunca se utilizarán para otro propósito distinto al de las campañas de s.

10 Cuando se etiquetan diferentes tipos de páginas con las líneas de código de Nosto, siempre puede asegurarse de que se ha hecho el tagging de forma correcta activando el modo de vista previo (Nosto Debug Tool). Al añadir la extensión?nostodebug=true al final de la URL, aparecerá un desplegable de la siguiente manera y mostrará la información que se reenvía a Nosto. < > Al hacer click en la tuerca gris, se abrira un desplegable (1) y la información que se reenvía a Nosto a tra ves de las lineas de código.. En el caso de que haya errores en las líneas de código verá varias advertencias de color rosa (2). 1 2

11 Nosto podrá a partir de ahora analizar su tráfico y entender la navegación y el comportamiento de compra de cada uno de sus visitantes. Sin embargo, no se puede ver las recomendaciones personalizadas Para ello, será necesario establecer las líneas de código (elementos DIV) sobre las recomendaciones que se quiere que aparezcan. Se pueden crear recomendaciones desde el Dashboard en la pestaña Campañas y en las categoría Recomendacores. De forma alternativa, usted puede editar una recomendación pre-existentes.

12 Cuando se crea una recomendación, debe elegir la página de destino y crear la lógica de la recomendación haciendo click en el botón «Elegir». Introduction A continuación, puede editar la configuración y asignar una plantilla a la recomendación del panel (véase la sección de diseño). Si elige una recomendación existente, todo se va a pre-configurar a nivel de los algoritmos Si realizas cambios, no olvides guardarlos! Una vez listo, puede guardar e ir a la parte inferior de la página para acceder al elemento DIV de la recomendación. El elemento DIV nosto_element (ejemplo abajo) permite que se carguen recomendaciones de Nosto en su website. Atencón Al insertar el código DIV en la página de destino, una recomendación se mostrar a los visitantes de su site. La visibilidad de la recomendación se activa de la siguiente manera: Importante Como medida de seguridad, en un primer paso, todas las recomendaciones de Nosto permanecerán ocultas y no se mostraran a sus visitantes Puede habilitar las visualización de las recomendaciones a través del botón Activar en el menu de activación (vea la última página de esta guía).

13 Al configurar los elementos DIV de las recomendaciones en su website, es mejor asegurarse de que estén colocados en el lugar correcto y en armonía con el diseño del site. Para ello se puede utilizar el modo de vista previa añadiendo la extensión?nostodebug=true al final de la URL. Esto permite tener un posicionamiento perfecto, sin necesitas re-hacer el diseño de las recomendaciones Este es un proceso 100% seguro pues en ningún momento se muestran esta recomendaciones a tus visitas. Cuando su página se carga con la anterior extensión, se mostrarán las recomendaciones del site. Si los algoritmos de Nosto no han reunido información suficiente sobre la actividad de su site para hacer recomendaciones, en su lugar se mostrar las tables de abajo, las cuales no serán visibles para los visitantes de su site. Si los algoritmos de Nosto han reunido información suficiente sobre la actividad de su site, entonces se mostrarán las recomendaciones que previamente han sido seleccionadas.

14 Nosto permite un control total sobre las recomendaciones que se muestra en su site, teniendo en cuenta el punto de vista del diseño. Cuando se crea una serie de recomendaciones, se puede elegir una de las plantillas de Nosto preexistentes o elegir una plantilla propia (creado previamente en el interfaz). Se ofrecen 5 plantillas diferentes. Sin embargo, si el diseño de las plantillas preexistentes no es de su agrado, se pueden editar o crear unas propias. A la plantilla seleccionada se le aplicarán las recomendaciones que se insertarán en la página de destino a través del elemento DIV de los mismo. Puede editar las propiedades de la plantilla a su gusto. Por ejemplo, usted puede elegir el número de productos que se mostrarán por recomendación, el color y el tamaño de las mismas. Esto le permite trabajar con una plantilla que maximice el diseño gráfico de su site.

15 Si dispone de los recursos internos, puede modificar el código HTML y CSS directamente en la plantilla. Esto le da más libertad en el diseño y en la estética de las recomendaciones. Importante Al editar la plantilla de HTML/ CSS es importante respetar el idioma y las propiedades específicas de Nosto. Para ayudarle, tendra acceso a cada unos de las descripciones de las variables de Nosto.

16 Ahora ya conoces lo esencial para poder implementar Nosto sin ningún tipo de problema! Le recomendamos que utilice el modo de vista previa en toda la fase de instalación, de esta manera puedes trabajar con Nosto de una forma sencilla y visual, para asegurarse de que todo está configurado a su gusto y en armonía. Puede descubrir el interfaz Nosto en; Una vez haya instalado Nosto, podrá empezar a utilizarnos gracias al. Donde podrá editar y tener vista previa sobre las recomendaciones que quiere que se muestren en su site. < >

17 Su turno!