Guia de instalación.key

Transcripción

Guia de instalación
¡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:
Introducción
Código Javascript
Tagging
Previsualización
Recomendaciones
1
Implementación del código JavaScript de Nosto
Implementación
en página
Diseño
2
¿Necesita ayuda?
[email protected]
4
Implementación en el sitio y vista previa
6
Diseño de las recomendaciones
7
¡Menu de activación de las recomendaciones de
Nosto!
Tagging de todas las páginas del sitio web
Menu de activación
3
5
Previsualización del tagging
Creación de las recomendaciones
Introducción
Código Javascript
Tagging
Previsualización
<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=["https:"===f?f:"http:","//",e.host||"connect.nosto.com",e.path||"/include/",d].join("");a(g)};window[b].init=c})();
nostojs.init(‘[número de cuenta]’);
//]]>
</script>
Recomendaciones
Implementación
en página
Diseño
Menu de activación
El código de 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.
¿Necesita ayuda?
[email protected]
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 de Java debe estar presente en la cabecera de su sitio
web. No es posible colocar en el cuerpo o en el footer 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 Nosto, se inserta de
la siguiente manera:
nostojs.init(‘12345’);
Página
de categoría
Introducción
Introduction
Código Javascript
Página
del producto
Página
de búsqueda
Página
del carrito
Página de
confirmación
de compra
Información
del cliente
Ahora debemos dar sentido a la información recogida por el código JavaScript. Por ejemplo Nosto necesita saber como
navegan sus visitantes en su sitio web y que secciones/productos ven y compran conjuntamente.
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.
Tagging
Previsualización
Recomendaciones
<div class="nosto_category" style="display:none">/Invierno/Accessorios/Gorros</div>
Implementación
en página
Diseño
Menu de activación
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 se
comprometerán con este elemento 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.
¿Necesita ayuda?
[email protected]
Este elemento nosto_category también estará presente en las
páginas de etiquetado de productos, pero el valor para rellenarlo
sera significativamente diferente.
Vamos a detallarlo en la siguiente sección: etiquetado de páginas
de producto.
Página
de categoría
Página
del producto
Página
de búsqueda
Página
del carrito
Página de
confirmación
de compra
Información
del cliente
Introducción
Código Javascript
<div class="nosto_product" style="display:none">
Tagging
ID del producto.
<span class="product_id">Gorro123</span>
Previsualización
URL de la página del producto
<span class="url">http://www.exemple.com/produit/Gorro123</span>
<span class=“name">Gorro rojo de lana para hombre</span>
Nombre del modelo
<span class="image_url">http://www.exemple.com/img/Gorro123.jpg</span>
Recomendaciones
<span class="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>
Implementación
en página
URL de la imagen del producto. La imagen sera reutilizada por Nosto
para generar recomendaciones.
Divisa. Por ejemplo : EUR para euro, GBP para la libra, USD para US Dollar, … .
<span class="availability">InStock</span>
Disponibilidad del producto. En Stock, Descuento o fuera de Stock/ agotado.
<span class="category">/Hiver/Accessoires/Bonnets</span>
Diseño
Categorías con las que se enumera el producto
<span class="category">/Soldes/Accessoires</span>

Menu de activación
<span class="description">Ce bonnet rouge est joli.</span>
<span class="list_price">40.90</span>
<span class="brand">Adidas</span>
Descripción del producto.
Precio asignado en el back office
Marca del producto.
<span class="tag1">Homme</span>
<span class="tag2">Rouge</span>
Tag asignado según sea necesario.
<span class="tag3">Soldes</span>
<span class="date_published">2011-12-31</span>
Fecha de publicación
¿Necesita ayuda?
</div>
[email protected]
<div class="nosto_category" style="display:none">/Soldes/Accessoires</div>
Categoría activa (breadcrumb) - Camino que sigue el usuario
para encontrar el producto.
Página
del producto
Página
de categoría
Página
de búsqueda
Página
del carrito
Página de
confirmación
de compra
Información
del cliente
Introducción
Código Javascript
Por defecto, usted tiene que utilizar los parámetros
de consulta de búsqueda en la interfaz Nosto
ingresando a http://my.nosto.com y seleccionando la
pestaña “Cuenta” y luego la categoría
“Configuración”.
En el siguiente ejemplo, el parámetro de consulta es
« q ».
Tagging
Previsualización
Recomendaciones
Implementación
en página
Este termino corresponde en la URL después « ? » y
antes de « = ».
Diseño
q
Menu de activación
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
¿Necesita ayuda?
[email protected]
Página
de categoría
Página
del producto
Página
de búsqueda
Página
del carrito
Página de
confirmación
de compra
Información
del cliente
Introducción
Código Javascript
Tagging
<div class="nosto_cart" style="display:none">
<div class="line_item">
ID del producto
Previsualización
<span class="quantity">1</span>
Cantidad del artículo selecionado
<span class="name">Gorro rojo de lana para hombre</span>
Nombre del producto
Recomendaciones
<span class="unit_price">30.90</span>
Implementación
en página
Precio de venta en front-office (puede ser un precio con descuento, por ejemplo).
Divisa. Por ejemplo : EUR para euro,… .(3 letras - Estándar ISO4217)
</div>
Diseño
<span class="product_id">Gants456</span>
Menu de activación
<span class="name">Paire de gants bleu</span>
Lo mismo ocurre con otros producto seleccionados
</div>
Atención
¿Necesita ayuda?
[email protected]
-
- Cada producto seleccionado debe estar incluido.
- El ID del producto devuelto debe ser el ID relativo (o la madre entre las 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.
Página
de categoría
Página
del producto
Página
de búsqueda
Página
del carrito
Página de
confirmación
de compra
Información
del cliente
Introducción
Código Javascript
<div class="nosto_purchase_order" style="display:none">
Tagging
<span class="order_number">1445</span>
Número de orden
<div class="buyer">
Previsualización
<span class="email">[email protected]</span>
<span class="first_name">Alberto</span>
Nombre del cliente.
Recomendaciones
<span class="last_name">García</span>
dirección e-mail del cliente
Apellido del cliente
<div class="purchased_items">
Implementación
en página
Diseño
<span class="name">Gorro rojo de lana para hombre</span>
Menu de activación
Información del producto solicitado
</div>
</div>
</div>
Atención
-
¿Necesita ayuda?
-
[email protected]
-
- Se trata de que el numero de ID debe ser el mismo en todas las paginas, página de producto, página del carrito y de confirmación de
compra. Sin eso, no podemos saber si el cliente puso el producto en la cesta después de navegar por ella y si lo compró después de ponerlo
en la cesta.
- 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.
Página
de categoría
Página
del producto
Página
de búsqueda
Página
del carrito
Página de
confirmación
de compra
Introducción
Código Javascript
Tagging
<div class="nosto_customer" style="display:none">
<span class=“email">[email protected]</span>
Previsualización
<span class="first_name">Alberto</span>
<span class="last_name">García</span>
dirección e-mail del cliente.
Nombre del cliente
Apellido
Bonjour, François !
Recomendaciones
Implementación
en página

<span class="birth_date">2011-12-31</span>
Fecha de nacimiento
</div>
Diseño
Menu de activación
El código anterior se debe colocar en todos los tipos de páginas.
Esta información sólo se utilizará para personalizar los emails de abandono
de carrito, seguimiento y we miss you (inactividad del cliente) .
¿Necesita ayuda?
[email protected]
Estos datos están encriptados y nunca se utilizarán para otro propósito
distinto al de las campañas de emails.
Información
del cliente
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.
Introducción
<>
Código Javascript
http://www.maboutique.fr?nostodebug=true
Tagging
Previsualización
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).
Recomendaciones
Implementación
en página
Diseño
Menu de activación
1
¿Necesita ayuda?
[email protected]
2
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
Introducción
Para ello, será necesario establecer las líneas de código (elementos DIV) sobre las recomendaciones que se quiere que
aparezcan.
Código Javascript
Se pueden crear recomendaciones desde el Dashboard http://my.nosto.com en la pestaña “Campañas” y en las
categoría “Recomendaciones”.
Tagging
Previsualización
Recomendaciones
Implementación
en página
Diseño
Menu de activación
¿Necesita ayuda?
[email protected]
De forma alternativa, usted puede editar una recomendación pre-existentes.
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 » .
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
Introducción
Introduction
Código Javascript
¡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.
Tagging
Previsualización
Recomendaciones
Implementación
en página
Diseño
Menu de activación
¿Necesita ayuda?
[email protected]
Atencón
Importante
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:
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).
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.
Introducción
Cuando su página se carga con la anterior extensión, se mostrarán las recomendaciones del site.
Código Javascript
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.
Tagging
Previsualización
Recomendaciones
Implementación
en página
Diseño
Menu de activación
¿Necesita ayuda?
[email protected]
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.
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).
Introducción
Código Javascript
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.
Tagging
Previsualización
Recomendaciones
Implementación
en página
Diseño
Menu de activación
Puede editar las propiedades de la plantilla a su gusto.
¿Necesita ayuda?
[email protected]
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.
Introducción
Código Javascript
Tagging
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.
Previsualización
Recomendaciones
Implementación
en página
Importante
Diseño
Menu de activación
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.
¿Necesita ayuda?
[email protected]
¡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; http://my.nosto.com.
Introducción
Una vez haya instalado Nosto, podrá empezar a utilizarnos gracias al Menu de activación. Donde podrá editar y tener
vista previa sobre las recomendaciones que quiere que se muestren en su site.
Código Javascript
Tagging
Previsualización
Recomendaciones
Implementación
en página
Diseño
Menu de activación
¿Necesita ayuda?
[email protected]
<>
http://my.nosto.com
¡Su turno!

Guia de instalación.key

Transcripción

Documentos relacionados

GUADALAJARA CENTRO UNIVERSITARIO, UNIVERSIDAD DE