¿Alguna vez te has preguntado cómo hace Amazon para recomendarme productos?
No sólo con lo que he visto en la plataforma, sino también dependiendo de lo que tengo en el carrito, incluso lo que he comprado.
Pues hoy te voy a enseñar cómo puedes conseguir esto en tu tienda online o en otro tipo de página web,
como puede ser un blog para recomendar artículos, y lo vamos a ver utilizando el servicio de Algolia.
Lo vamos a hacer desde cero en un clon de Amazon que tengo yo. Así que vamos a verlo.
Pues este es mi clon de Amazon, lo he llamado Miduzon. Tenemos aquí productos que puedes entrar, añadirlos a la cesta,
y en la cesta los tienes aquí. Vamos a añadir uno diferente, este, por ejemplo. Aquí tenemos los dos, los puedes eliminar de la cesta.
Y también, por supuesto, puedes buscar aquí elementos, productos diferentes, entrar, y aquí estarían.
Ahora bien, lo que me falta son los recomendados. Aquí el detalle queda un poquito pobre.
Me gustaría justo debajo, pues mostrar productos recomendados para llamar la atención del usuario y hacer más dinero.
¿Cómo podemos hacer esto? Lo dividimos en dos fases. Uno, obtención de data y de insights, para saber lo que le interesa a los usuarios
y qué es lo que están metiendo los usuarios en el carrito. Y dos, la parte de UI para mostrar estos productos.
Vamos a empezar por lo primero, el tema de los insights. Voy a crear un nuevo hook. Este proyecto está hecho con React,
pero bueno, lo podrías hacer con JavaScript y con otras soluciones, no hay ningún problema.
Le voy a llamar usealgoliainsights.js.
Este proyecto necesita que importemos Search Insights.
Esta dependencia es de Algolia y la tienes que instalar.
Vamos a hacer un npm install de Search Insights, la versión exacta, y ya la tenemos.
Ahora, vamos a recuperar las constantes de bitalgoliaappid, bitalgoliaappkey, son variables de entorno que yo ya tengo preparadas,
indexname, para que funcione todo el tema de las recomendaciones.
Las variables de entorno las tengo aquí en este archivo .env, están aquí, y si te preguntas dónde las puedes sacar,
puedes ir a tu proyecto de Algolia, Platform, ApiKeys, y aquí tienes toda la información.
Vamos a volver a nuestro proyecto y vamos a inicializar nuestros Search Insights.
Para ello, utilizamos init, este string, que le decimos el evento init, para inicializarse, con el siguiente objeto.
Con la appid, que en este caso es bitalgoliaappid, con la apikey, que es bitalgoliaappkey.
Es apikey, no, es apikey, que he puesto apikey, no la vayamos luego, sino esto no funciona correctamente.
Apikey, perfecto, ahora sí que está bien.
Y le vamos a decir que tiene que utilizar las cookies.
De esta forma va a poder rastrear al usuario entre diferentes sesiones,
porque si no tendríamos nosotros que indicarle cuál es el user ID.
Que si ya ha iniciado sesión, pues le puedes pasar esto a false y tú indicarle cuál es el user ID que tiene el usuario.
En este caso, lo vamos a hacer así, pero que sepas que se podría hacer de la otra forma.
Vamos a crear nuestro custom hook, use Algolia Insights.
Y aquí, que nos está diciendo ese y aquí se está iniciando algo, no vamos a hacer esto,
sino que lo que vamos a hacer es crear dos nuevos métodos.
Uno, para enviar cuando un producto se ha añadido al carrito, necesitamos el object ID de este producto.
Y también vamos a crear un método que será cuando hayamos visto este producto.
Así el usuario vamos a poder saber cuándo añade un producto al carrito y cuándo está viendo un producto.
Ahora, en el SendProductedCar vamos a utilizar este Search Insights y vamos a pasarle el evento.
Mira, aquí te salen todos. Pues el evento que vamos a querer es TheConvertedObjectIDs.
Vamos a utilizar el TheConverted yo cuando se añade al carrito, pero tú lo podrías hacer si quieres cuando haga el Checkout.
Esto es como prefieras.
Vamos a pasarle el payload, todo el objeto de información para el evento.
Le vamos a decir cuál es el índice que nos interesa, que es el ViteAlgoliaIndexName.
Este ViteAlgoliaIndexName es justamente el de, tenemos todos los elementos ya indexados y todo.
Aquí en el EventName le puedes poner el que tú prefieras.
Yo voy a poner ProductAddedToCart.
Lo importante es que siempre utilices el mismo para referirte a esto.
Y aquí en ObjectIDs lo que le puedes pasar es una lista de ObjectIDs.
Pero en este caso, como siempre estamos añadiendo uno, pues hacemos un Array de solo un elemento.
Esto mismo lo vamos a hacer aquí, en SendProductView.
Para asegurarnos que hacemos bien el evento, pongo un string vacío y fíjate que ya me dice autocompletar aquí qué es lo que queremos hacer.
Pues entre ellos está el ViewObjectIDs.
Si te fijas, también existe la posibilidad en el Converted, también está el AfterSearch.
Esto si estás utilizando la búsqueda de Algolia, le puedes decir si esto se ha convertido después de una búsqueda.
Es interesante. En este caso lo vamos a hacer más sencillo, no lo vamos a utilizar, pero que sepas que también se puede hacer.
Ahora que tenemos esto, pues nada, vamos a enviar exactamente lo mismo.
Y este CustomHook, pues vamos a hacer que devuelva, por un lado, SendProductAddedCart, por el otro lado, SendProductView.
Antes de que se nos olvide, vamos a cambiar el EventName por uno que tenga más sentido.
Que aquí aparece ProductAddedToCart, pues vamos a poner ProductView.
Ahora vamos a utilizar este CustomHook en la página del detalle.
Así que lo primero, lo importamos, UseAlgoliaInsights, FromHooks, UseAlgoliaInsights, y lo vamos a utilizar aquí.
Para ello, vamos a importar aquí el SendProductAddedToCart y el SendProductView.
¿Cuándo hay que ejecutar estos métodos?
Pues cuando añadimos algo en el carrito, le pasamos del Object, el ObjectID, y el SendProductView lo hacemos en un UseEffect.
Justamente cada vez que entremos a este componente, y como dependencia vamos a poner, por un lado, el objeto que estamos recuperando en el detalle,
y si cambia la ID, la ruta de la ID.
¿Y qué haremos aquí? Pues vamos a recuperar el ObjectID del Object, si está disponible, .ObjectID.
Si tenemos un ObjectID, vamos a enviarlo para tener este evento de ObjectID, y con esto ya lo tendríamos.
Tendríamos tanto el evento de cuando hemos visto el producto, y el evento de cuando estamos añadiendo algo al carrito.
Para saber si funciona, lo que podemos hacer es volver a nuestra página.
Fíjate que tenemos aquí abiertas ya las herramientas de desarrollo, y si nos vamos a Nickware, vemos que tenemos este Events,
donde estamos enviando que hemos visto justamente, el EventType es el View, el EventName es ProductView.
Ahora si limpio todas las requests y añado algo a la cesta, tenemos el evento de que se ha hecho la conversión correctamente,
y tenemos el EventName con toda la información del ObjectID.
Así que con esto ya tendríamos lo que es la parte de Insights, la que estamos enviando información al Golia.
Si quieres asegurarte de que estos eventos están llegando al Golia, tienes una forma de mirarlo.
Si nos vamos a Platform Monitoring, en Events, Debugger, y aquí vas a poder ir viendo todos los eventos que has podido hacer.
En este caso ves ProductID to Car, y puedes darle aquí, y verías todo el evento.
Y puedes ver para qué sirve, cada cosa que se ha hecho, aquí tienes toda la información que estamos enviando.
¿Ves? Este es índice de Miduzon, el EventName, ProductID to Car, que es justamente el que nosotros hemos hecho.
Ahora, ya que estamos aquí en Algolia, vamos a aprovechar y nos vamos a ir a Recommend.
Y aquí le puedes indicar cuáles son las recomendaciones que quieres activar.
Podríamos activar la de Related Products, así que le damos a Start Using.
Aquí tenemos que seleccionar el índice de búsqueda que queremos utilizar, que es Miduzon.
Y aquí va a tardar un rato cuando le deis a Start Training, porque tiene que entrenar el Machine Learning,
en el modelo de Machine Learning. Le daríais, y esto puede durar horas.
Y es importante que tengáis muchos eventos. No intentéis hacerlo con 10, 20 eventos porque no funciona.
Necesitaba miles de eventos.
Ahora vamos a por la segunda parte, para recuperar realmente las recomendaciones.
Para ello, vamos a crear un nuevo servicio.
Yo ya tenía un servicio que era para hacer búsquedas, ahora vamos a crear uno que le llamamos Recommend.
Recommend. En este servicio vamos a tener que importar el recomendador desde Algolia barra Recommend.
Este paquete hay que instalarlo también, así que aquí hacemos un npm install de Algolia Recommend con la versión exacta.
Mientras esto va terminando, yo me voy a copiar del Custom Hook toda esta extracción de las variables de entorno.
La voy a poner por aquí y voy a crear el cliente del recomendador.
Así que hacemos un recommend client, iniciamos el recommend y le pasamos aquí, por un lado, la app ID y luego la API key.
La API key importante, que sea la de búsqueda, no la de admin.
Ahora el index name, que lo teníamos aquí en bit Algolia index name.
Y esto, ahora podemos exportar una función que le vamos a llamar GetRelatedProducts y le vamos a pasar el Product ID como parámetro.
¿Por qué? Porque necesitamos este Product ID para decirle, quiero los productos relacionados de este producto en concreto.
Aquí casi se acerca de Algolia Copilot, pero esto no es exactamente lo que queremos hacer.
Aquí vamos a tener que extraer los resultados de la llamada del recommend client punto y ahora GetRelatedProducts.
Ahora sí, le vamos a pasar la configuración y la configuración es el index name que tenemos aquí, este es el index.
Por otro lado, el máximo de recomendaciones que queremos recuperar, que son 5, y queremos el Object ID que le vamos a pasar, que es el Product ID.
Importante, aunque le he pasado que un objeto, en realidad esto no es un objeto, es un Array.
¿Por qué es un Array? Es un Array de objetos.
¿Por qué? Porque tú puedes pasarle tantos índices, o sea, tantos productos de los que quieres recuperar los relacionados.
En este caso solo lo quiero recuperar de uno, por eso le voy a pasar solo un elemento, pero en realidad esto es un Array.
Y le podrías pasar, pues podrías pasarle más de otros diferentes índices, podré ser más de uno.
Solo para que lo tengas en cuenta.
Ahora, vamos a devolver de los resultados, vamos a mirar si tenemos resultados, si tenemos la posición 1.
La posición 1 sería la que tenemos aquí, este objeto, y vamos a acceder a hits, que son los que nos ha encontrado.
Esto mismo que hemos hecho con los productos relacionados, lo vamos a hacer con lo otro también,
que es el GetFrequentlyBoutTogether, los productos que se suelen comprar con el producto que le pasamos por parámetro.
Aquí tendríamos también el GetFrequently, GetFrequently, ves, es un método del RecommendClient.
Le vamos a pasar exactamente los mismos parámetros y con esto ya los tendríamos preparados.
¿Qué podemos hacer ahora que tenemos este evento?
Bueno, pues podríamos hacer nuestros Custom Hooks.
Igual, vamos a hacer un Custom Hook que sea useRelatedProducts.js.
Ahora lo que hacemos es importar el servicio que hemos creado, así que importamos GetRelatedProducts del servicio,
exportDefaultFunctionUseRelatedProducts.
Aquí le pasamos el ProductID, del que queremos recuperar los relacionados.
Vamos a tener aquí un Recommendations, SetRecommendations.
Esto va a ser un estado.
Por ahora podemos hacer que sea un array vacío.
Importamos el UseState.
UseState desde React.
Y aquí con un UseEffect vamos a hacer que cada vez que cambie el ProductID,
pues recuperamos los recomendados diferentes.
¿De dónde?
Del GetRelatedProducts.
Le pasamos el ProductID y en el Then lo vamos a guardar con el estado.
Y todo esto, lo único que tenemos que hacer es devolver las recomendaciones.
Así hemos hecho un Custom Hook que podemos utilizar muy fácilmente
para recuperar los productos relacionados de un producto.
Vamos a repetir la operación, pero lo hacemos con el Use...
Vamos a ver cómo lo había llamado.
Use, UseGetFrequently...
Vale, pues esto.
UseGetFrequently.js.
Y esto...
Se me ha colado el Use...
UseGetFrequently...
¿Vale?
Ahora lo que vamos a hacer es copiarnos este RelatedProducts aquí.
Cambiamos esto por GetFrequentlyBoughtTogether, los productos que se suelen comprar juntos.
Cambiamos este método aquí y ya lo tendríamos.
Vamos a cambiar también el UseGetFrequentlyBoughtTogether.
Nombres así, descriptivos, que se entiendan bien.
Vale, ahora que tenemos los dos Custom Hooks, vámonos a la página de detalle.
Y en la página de detalle lo que vamos a hacer es importarlos.
UseGetFrequently...
Este es uno.
Y el otro...
Import...
UseRelatedProducts, ¿vale?
Ya tenemos estos dos Custom Hooks.
Así que aquí los podemos llamar.
En uno tendríamos los Recommendations, que los vamos a cambiar.
RelatedProducts, de UseRelatedProducts.
Y aquí le pasamos el Object, ObjectId, y aquí tendríamos, por otro lado, UseGetFrequentlyBoughtTogether.
Y aquí en Recommendations tendríamos los FrequentlyBoughtTogether.
Ahora solo lo único que nos falta es iterar esto, a ver si aquí realmente tenemos la información que necesitamos.
Podemos volver antes de hacer esto, podemos mirar si ha funcionado correctamente.
Voy a hacer un Clear aquí, voy a refrescar.
La primera vez aquí falla, me da un error 400, y yo me imagino porque la primera vez es nul.
Vamos a arreglar ahora esto, pero antes voy a mirar estos dos Recommendations, que son los que me interesan,
que sí que parece que tienen una respuesta.
¿Vale? Aquí tengo la respuesta con hits.
Hemos dicho que queríamos cinco elementos, y aquí tenemos cinco elementos.
Y estos serían los que se suelen comprar juntos, que en este caso igual son menos de cinco.
¿Ves? Aquí hay menos, y es normal, porque a lo mejor no hay tantos productos que se compren juntos,
así que pueden haber menos, pero al menos uno está devolviendo tres, y el máximo sería cinco.
Vamos a arreglar este problemita, ¿no?
Que está haciendo una llamada que no es necesaria.
Para hacer esto, vamos a ir a nuestros Custom Hooks, a estos de aquí, y aquí lo que podemos hacer es que si el Product ID es igual a nul,
entonces vamos a hacer que esto se haga solo si es diferente a nul.
Así, de esta forma vamos a intentar evitar el problemita que tenemos, y esto mismo lo vamos a hacer en Related Products.
Así no hará la llamada si no tenemos un Product ID todavía.
Vamos a buscar ahora, voy a refrescar, vale, todavía lo está haciendo, seguramente es que el Product ID es otra cosa que es nul.
A lo mejor es que es undefined.
Para curarnos en salud, lo vamos a poner así, y vamos a hacer un falsi.
Si tenemos Product ID, así, si tenemos Product ID, entonces hacemos esto, vamos a refrescar, ahora sí, ves, no me está haciendo la llamada innecesaria.
En cambio, cuando sí que es necesario, sí que la hace.
Vamos a ver cómo podemos pintar estos resultados que tenemos por aquí, así que vamos a hacerlo en un momentito.
En el Detail, que me está mal gritando el linter de a ver si lo arreglas, a ver si lo arreglas.
Vale, pues aquí en el Container vamos a crear otro Container.
Yo ya tengo los estilos para los recomendados, pero bueno, más o menos sí que vamos a ver cómo hago desde cero todo lo que es el HTML.
Ahí pongo Relacionado con Artículos, ¿qué has visto?
Vamos a poner Recommendations, Recommendations, y aquí lo mapeamos.
Y lo que vamos a hacer, vamos a extraerle el Object ID, vamos a extraerle el Name, vamos a extraerle la imagen.
Estos son campos que ya tenemos en el índice.
Y vamos a extraer, no, el Image ya no tiene tanto sentido.
Vamos a cambiarle el nombre a Image.
Vale, a ver si no la lío con esto.
De hecho, aquí la he liado porque se me ha olvidado un paréntesis.
Venga, esto y esto.
Vale, me dice que Recommendations is not defined y es normal porque al final no he llamado Recommendations,
le he llamado Related Products, así que vamos a poner Related Products y esto por aquí.
Aquí ahora lo que deberíamos hacer es lo que queremos que renderice.
A ver, voy a guardar esto.
Ahora lo que me dice es, aquí te falta algo.
No te preocupes que yo ahora te pongo.
Vamos a hacer que tenga un enlace.
Y el enlace este que nos lleve justamente a la página del detalle.
Vamos a poner dp, dp porque es como está la ruta.
Y aquí vamos a poner el Object ID que le hemos sacado del objeto.
Y qué más.
Vamos a poner aquí, esto lo dejamos así.
Necesitamos esto que tengan aquí.
Vamos a utilizar el Object ID.
Y lo que nos faltaría es un return de esto para que se deje de quejar.
Y dentro vamos a cargar por ahora la imagen.
Simplemente la imagen.
Y ya está.
Ya tendríamos lo que son los relacionados con artículos que hemos visto.
Vamos a hacer exactamente lo mismo, pero lo vamos a hacer ahora con los que se compran juntos.
Así que vamos a crear aquí otro contenedor.
Esto lo deberíamos extraer en un componente, seguro.
Pero bueno, por ahora lo vamos a hacer aquí.
Vamos a poner, puesto que has comprado artículos similares, pues también te voy a recomendar esto de aquí.
Al final el Name, este Name no lo he utilizado, pero lo podríamos utilizar aquí, en el alto.
Para hacerlo un poco más accesible.
Y aquí lo que vamos a hacer es utilizar el Frequently Bought Together.
Así que lo vamos a poner aquí y aquí.
Guardamos los cambios y volvemos a nuestra aplicación.
Y ahora, si voy aquí abajo, podemos ver que aquí aparecen justamente mis artículos.
¿No tiene estilos?
Bueno, es normal.
¿Por qué?
Porque no le he puesto ningún tipo de Deep aquí.
Así que vamos a arreglar esto.
Deep Class Name Recommendations.
Vamos a hacer que esto esté envuelto por este Deep.
Esto también.
Y vas a ver lo bien que queda esto.
Esto lo vamos a poner aquí también.
Guardamos los cambios.
No guardamos los cambios porque no me deja.
Ahora sí.
Que me había añadido ahí el Deep porque ha querido.
Ahora guardo, refresco, me voy por aquí.
Y mira, aquí tengo los relacionados con artículos que hemos visto.
Que además los puedo ir haciendo de slide y puedo entrar en cada uno.
Y cada uno, pues como puedes ver, le va cambiando.
Y también, puesto que has comprado artículos similares.
Y esto, ¿cómo está funcionando?
Pues está funcionando de que los usuarios, conforme van viendo artículos, están alimentando este modelo de Machine Learning que va aprendiendo y van mejorando respecto a qué es lo que tiene que enseñar.
Así que si yo ahora empiezo a comprar muchas veces este producto y en el carrito, además pongo este también, eventualmente este modelo de Machine Learning aprenderá y lo que hará es que este producto me lo enseñará aquí, puesto que se están comprando de forma conjunta.
De hecho, ves aquí en los eventos que voy enviando, cada vez que estoy haciendo aquí, añadir a la cesta, añadir a la cesta, pues los estoy diciendo que se están comprando juntos.
Y de esta forma lo que va a hacer es aprender cómo tiene que funcionar este proceso de Machine Learning.
Así que es así como funcionan las recomendaciones en Amazon.
Si te interesa el código, si quieres verlo, que sepas que lo tienes en la descripción.
Si te ha gustado, bueno, creo que es algo bastante interesante, algo un poquito diferente, que se sale un poco de lo que estamos habituados.
Hemos visto un poco de React, JavaScript, el servicio de Algolia.
Si te gusta este tipo de vídeos, dale un like y nada, nos vemos en el siguiente.
¡Chao!
¡Gracias!
¡Gracias!