Obtener recomendaciones es tan simple como hacer un request JSONP como el siguiente:
GET https://api.shoptimiza.com/v1/re/$API_KEY/$PRODUCT_ID?callback=$CALLBACK&r=$RANDOM
Donde:
$API_KEY es la clave API del comercio$PRODUCT_ID es el producto para el que solicitamos recomendaciones$CALLBACK es el nombre de la función de retorno$RANDOM valor aleatorio para prevenir que el navegador cachee los resultados. Puede ser algo tan simple como Date.now()<script>
function display(recommendations){
console.log(recommendations);
}
</script>
<script async src="https://api.shoptimiza.com/v1/re/$API_KEY/$PRODUCT_ID?callback=display&r=$RANDOM"></script>
La función display recibirá las recomendaciones. Una vez que tengas las recomendaciones debes implementar el código necesario
para convertirlas en elementos HTML que puedas mostrar al cliente.
El script que devolvemos es como el siguiente:
/**/ typeof display === 'function' && display(/* las recomendaciones van aquí */);
Es MUY importante que no cachees las respuestas. Podríamos estar realizando tests sobre la calidad de los resultados o personalizando los mismos para un cliente concreto.
Las recomendaciones son un objeto JSON con las siguientes propiedades:
alsoBought un array de ID de productos que se han comprado junto a $PRODUCT_ID de forma ocasional. Estos datos se usan para mostrar al cliente la típica lista de productos "Otros clientes que compraron este producto también compraron"boughtTogether un array de ID de productos que se han comprado junto a $PRODUCT_ID frecuentemente. Con este array puedes construir un widget que permita al cliente añadir todos estos productos al carrito con un sólo botónkey. Es $PRODUCT_IDHe aquí un ejemplo:
{
"alsoBought": ["2", "4"],
"boughtTogether": ["5", "3"],
"key": "5"
}
Fíjate en
boughtTogether: el primer id es siempre el que se corresponde con$PRODUCT_IDque está viendo el cliente.
Recopilamos datos sobre las impresiones, clicks y conversiones para mejorar las recomendaciones de tu sitio web. Es por ello necesario que integres nuestras analíticas y seguimiento de clics y conversiones.
Para habilitar las analíticas de Shoptimiza lo primero es pegar el siguiente script en todas tus páginas:
<head>
...
<script>
(function(s,h,o,p,t,m,z){s["ShoptimizaAnalyticsObject"]=t;
s[t]=s[t]||function(){(s[t].q=s[t].q||[]).push(arguments)};
s[t].start=1*new Date;m=h.createElement(o);z=h.getElementsByTagName(o)[0];
m.async=1;m.src=p;z.parentNode.insertBefore(m,z)})
(window,document,"script","https://cdn.shoptimiza.com/analytics.js","sa");
// establece tu clave API
sa('create', '$API_KEY');
// memento=true habilita "últimos productos vistos" y otras características
// relacionadas con lo que el cliente ha hecho
sa('set','memento',true);
</script>
...
</head>
Reemplaza $API_KEY por la clave API del comercio.
Vamos a extender el ejemplo del principio para ver la forma correcta de notificar los clics y conversiones:
<head>
...
// Shoptimiza analytics tag
...
</head>
<body>
....
<script>
function getHTMLForRecommendations(recommendations){
/* Esta función recibe las recomendaciones que hemos pedido a Shoptimiza
* y las convierte en widgets html. Por ejemplo con una petición AJAX a nuestro
* servidor
*
*/
}
function display(recommendations){
var htmlWidget = getHTMLForRecommendations(recommendations); // Obtenemos el HTML
var container = document.createElement('div');
container.innerHTML = html;
$(container).on('click', 'a', function (e) {
var productId = /* Obtén el ID del producto sobre el que se ha hecho click. Por ejemplo con un data-attribute*/;
sa('track', 'click', productId);
});
// añade el nuevo elemento al DOM
}
</script>
<script async src="https://api.shoptimiza.com/v1/re/$API_KEY/$PRODUCT_ID?callback=&display&r=$RANDOM"></script>
¿Qué hemos hecho?
Hemos cargado las recomendaciones y hemos confeccionad un HTML con ellas mediante la función getHTMLForRecommendations. Después hemos creado un elemento contenedor para alojar nuestro widget
<ul>
<li class="product">
<a data-click-id="2" href="/products/2">
<img src="...">
<p>
<span>product 2 description</span><br>
<span>XX,XX€</span>
</p>
</a>
</li>
... more products
</ul>
Gracias a $(container).on('click', 'a', function (e) {... hemos capturado los clics en nuestro widget. Cuando el cliente haga clic en cualquiera de los elementos del widget sa notificará a Shoptimiza del click.
El tracking de conversiones es más sencillo que el de los clics. Simplemente añada un script a tu página de confirmación de pedidos.
// tudominio.com/confirmacion.html
<head>
...
// Cargamos el script de Shoptimiza
<script>
(function(s,h,o,p,t,m,z){s["ShoptimizaAnalyticsObject"]=t;
.....
</script>
...
</head>
<body>
....
<script>
// Digamos que el cliente ha comprado los productos con id p1 y p2
var products = ['p1','p2'];
sa('track', 'conversion', customerId, orderId, products, signature);
</script>
Donde:
customerId es el código del cliente p.e. el id que tenga en nuestra base de datosorderId es el número o código de pedidoproducts es un array con la lista de id de productos compradossignature firmamos la request con la clave secreta asociada a nuestra APILa firma de parámetros debemos computarla en el servidor de la siguiente manera
// Ejemplo para PHP
$signatureParams = $id_customer."|".$id_order."|p1,p2"
$signature = hash_hmac('sha256', $signatureParams, $shoptimiza_shared_secret);
Si no disponemos de un identificador válido para customerId simplemente pasaremos una cadena de texto vacía.
Da igual si el cliente recarga la página, nosotros sólo contaremos una conversión.