Cómo personalizar su motor de búsqueda de comercio electrónico

Las compras en línea se diseñaron inicialmente como un camino glorioso hacia la conveniencia: unos pocos clics y sus artículos favoritos se envían directamente a su puerta, ¡sin necesidad de interacción social o caminatas por los centros comerciales!

Desde entonces, el comercio electrónico se ha convertido en algo completamente diferente. Ahora, las tiendas en línea pueden resultar abrumadoras con un catálogo aparentemente interminable y una orientación interpersonal mínima. Como resultado, los usuarios en las experiencias de comercio electrónico tienden a apoyarse mucho en la búsqueda para ayudar a reducir lo que necesitan, pero pueden experimentar el dilema cíclico de buscar en miles de resultados para encontrar lo que realmente están buscando. Sin embargo, personalizar su experiencia de búsqueda con Algolia puede eliminar este dilema al personalizar esos resultados de búsqueda en función de la actividad y los intereses del usuario. Esto brinda una mejor experiencia de búsqueda para los usuarios y también aumenta el compromiso con el catálogo de su sitio web, ¡lo cual es una ventaja para todos!

Algolia ofrece las herramientas para facilitar a los desarrolladores la implementación de funciones de búsqueda personalizada. ¡Siga leyendo para aprender cómo aprovechar la personalización de Algolia para crear una experiencia de búsqueda personalizada que a sus usuarios les encantará!

Lo que estamos construyendo

En este tutorial, crearemos una aplicación de comercio electrónico utilizando React y Commerce.js. Afortunadamente, no tendremos que crear desde cero: utilizaremos esta aplicación básica de comercio electrónico con funciones de Recomendaciones que hemos creado en este artículo como punto de partida.

Al completar el tutorial, nuestra aplicación podrá buscar en el catálogo de productos de nuestra tienda y obtener resultados de búsqueda relevantes (y personalizados) según la actividad del usuario:

Si desea ver el código completo del proyecto con anticipación, puede visitar el repositorio de aplicaciones de algolia-commercejs-personalizations .

Empezando

Antes de comenzar a construir, asegúrese de configurar lo siguiente:

• Nodo: para verificar si ya tiene instalado Node, ejecute node -v en su línea de comando. Si no aparece ninguna versión, deberá instalarla; puede encontrar instrucciones de instalación para su máquina aquí .
• ngrok: Crea una cuenta ngrok aquí . Lo necesitará para canalizar las conexiones desde sus aplicaciones locales para que pueda configurar webhooks y realizar llamadas a la API.
• Chec: Commerce.js utiliza una plataforma llamada Chec para administrar sus integraciones, claves de API y productos. Deberá crear una cuenta aquí y luego configurar una tienda Commerce.js.
• Algolia: para aprovechar las funciones de Algolia, cree una cuenta del plan Algolia Build de forma gratuita. Una vez que tenga su cuenta, cree una aplicación para representar su aplicación de comercio electrónico y un índice llamado products .
  • Eventos de recomendación de Algolia: para usar todas las funciones de su aplicación, configure la recomendación de Algolia ; para hacerlo, deberá generar al menos 500 eventos de conversión durante 3 días, ya sea manualmente o a través de un CSV .
  • NOTA: También necesitará estos eventos para usar la Personalización de Algolia.
  • Modelo de recomendación de Algolia: una vez que haya configurado y agregado sus eventos, genere un modelo de recomendación para elementos de tendencia en función de estos eventos para que puedan aparecer en su aplicación.

Si no está familiarizado con los conceptos anteriores de Algolia y no está seguro de cómo configurarlo por su cuenta, ¡está de suerte! Tenemos una guía completa que captura los pasos de configuración anteriores, además de configurar otros datos necesarios, como eventos para recomendaciones y personalización y generar un modelo de recomendaciones.

Una vez que tenga una tienda de comercio electrónico funcionando localmente que muestre con éxito sus productos, ejecute el chatbot y muestre recomendaciones de artículos de tendencia en la página de detalles de su producto, ¡puede continuar con el siguiente paso!

Hora de construir

La personalización de Algolia utiliza los gustos específicos de un usuario, rastreados a través de eventos, para generar resultados más relevantes y personales para sus experiencias de búsqueda. Dado que las búsquedas pueden significar diferentes cosas para diferentes tipos de personas, Personalización garantizará que los usuarios vean primero los resultados que más les importan. Para aprovechar la magia de la personalización, primero debemos seguir algunos pasos.

Categoriza tus productos

Para proporcionar información más detallada sobre las relaciones entre sus productos, deberá crear y agregar categorías a sus productos en Commerce.js. Las categorías pueden ser cualquier agrupación general de cómo los productos se relacionan entre sí; en el caso de nuestra tienda de consignación vintage, pueden ser tipos de ropa (tops, accesorios, zapatos), marcas (Vivienne Westwood, Dior, Chanel) e incluso subcategorías dentro de esas categorías (dentro de los zapatos, hay zapatillas, tacones y botas).

Agregue categorías en Commerce.js y asígnelas a productos

En primer lugar, agregaremos categorías a nuestros productos en Commerce.js. Navegue a la página de Categorías en la barra lateral de su tablero Chec y haga clic en el botón "Agregar" en la parte superior derecha para agregar nuevas categorías. Las categorías pueden tener padres y subcategorías.

Una vez que haya creado todas sus categorías deseadas, navegue a sus Productos dentro de Commerce.js y asígneles estas categorías. Agregue tantas categorías como desee a cada producto: ¡cuantas más categorías se agreguen, más oportunidades para que se construyan relaciones entre artículos!

Las listas de productos actualizadas se sincronizarán automáticamente con Algolia gracias al webhook que configuró en Commerce.js que envía nuevos productos a Algolia para los eventos products.create y products.update . Si no tiene esto configurado, lea las instrucciones en el LÉAME del proyecto para agregarlo.

Recomendamos verificar dos veces sus productos en Algolia para asegurarse de que las categorías se completen para cada elemento correspondiente que actualice en Commerce.js. Si encuentra que los productos no se sincronizan con su índice de Algolia, puede verificar su webhook configurado en Chec aquí .

Definir atributos para facetas en Algolia

Con cada producto en su inventario categorizado, podemos asignar importancia a estas categorías a través de facetas . Las facetas son un conjunto de categorías filtrables que permiten a los usuarios refinar los resultados a través de múltiples categorías simultáneamente. Estas categorías, denominadas "atributos" en Algolia, consistirán en las categorías que hemos asignado a nuestros productos en Commerce.js.

Para declarar atributos para facetar, navegue hasta el índice de su aplicación en su tablero de Algolia. Luego, haga clic en "Configuración" y busque el enlace "Facetas" debajo del encabezado "Filtrado y facetado". Debajo del encabezado "Atributos para facetar", haga clic en "Agregar un atributo"; esto mostrará una serie de propiedades que posee cada elemento en su índice. Busque el atributo categories.name . Si tiene problemas para encontrar esto, verifique dos veces los datos de su índice para asegurarse de que el campo categories se complete con objetos que contengan una propiedad name .

• 💡 Si desea tener una faceta adicional para obtener resultados aún más personalizados, también podemos agregar las etiquetas SEO que creamos para búsquedas de artículos ( seo.description ) como un atributo.

Con cada atributo, también puede categorizarlos según si deben ser "solo filtrar", "buscables" o "no aptos para búsquedas". Puede obtener más información sobre estas agrupaciones aquí .

Una vez completado, la sección "Atributos para facetar" de su índice debería verse así:

Configurar Personalización

Ahora, estamos listos para configurar la Personalización a través del tablero.

💡 *La personalización es una característica premium de Algolia que está disponible en el plan Build gratuito para el desarrollo de preproducción.*

Comience navegando a la sección de Personalización en su cuenta . Si es la primera vez que usa Personalización, verá esta pantalla:

Haga clic en "Habilitar personalización" y siga el flujo para aceptar los términos y condiciones.

Una vez que haya completado el flujo, verá un tablero que se ve así:

Dentro de este panel, puede configurar una estrategia de personalización para asegurarse de que los usuarios vean los resultados más relevantes para los datos que tiene. Hay dos elementos diferentes que influyen en esta estrategia:

• Eventos : el mecanismo principal para conocer las afinidades de los usuarios. Estos se recopilan a través de la API de Insights. En nuestra aplicación, actualmente recopilamos eventos de conversión provocados por usuarios que hacen clic en productos.
• Facetas : se configuraron para su índice anteriormente en este artículo. Las facetas consisten en categorías, grupos y detalles adicionales de un producto que brindan más información sobre un elemento con el que se interactuó en un evento y qué es exactamente lo que le gusta a un usuario sobre ese producto (ejemplos de esto son la marca, el tipo de producto o el color).

Pesar eventos y facetas

En el tablero, podrá sopesar la importancia de los eventos y las facetas para influir en su estrategia. La ponderación le permite poner diferentes niveles de importancia y agregar más o menos significado a ciertos eventos y facetas sobre otros, combinando todos los pesos en una estrategia general que influirá en la Personalización.

Para comenzar con el pesaje, deberá agregar los eventos y las facetas que le gustaría tener en su estrategia. Todos los eventos disponibles para su índice aparecerán automáticamente en la categoría "Eventos disponibles" en el tablero. Si no ve ningún evento, intente volver a generar algunos eventos de conversión con las facetas recién agregadas haciendo clic en varios productos en su tienda. Para agregar eventos a su estrategia una vez que aparecen en "Eventos disponibles", haga clic en el botón "Agregar a la estrategia".

Para las facetas, puede agregarlas haciendo clic en el botón "Agregar una faceta" a la derecha del tablero. Desde allí, puede seleccionar cualquier atributo para facetas que haya agregado anteriormente, como categories.name y seo.description :

Al agregar estos eventos y facetas, podrá ajustar los porcentajes de peso para varias facetas y eventos agregados a su estrategia. Cuanto mayor sea el peso, más importante se priorizará ese evento o faceta en su estrategia.

Obtenga más información sobre eventos de pesaje y facetas de pesaje en este artículo .

Definir el impacto de la personalización

Además de ponderar, puede definir el impacto de una estrategia de personalización para influir en el impulso de posición relativa que tienen las afinidades de los usuarios en el ranking de búsqueda. Para este tutorial, hemos dejado el impacto en un 50 % predeterminado.

Explore una estrategia detallada sobre el impacto de la personalización aquí.

Simula tu estrategia

Para probar varias alteraciones de la configuración de eventos, facetas e impactos, puede simular su estrategia de personalización y buscar por ID de usuario para ver los resultados de la estrategia pronosticada.

Dado que solo hemos codificado un usuario para nuestra aplicación, podemos buscar user-1 para ver qué podría surgir con nuestra estrategia actual:

Para obtener más información sobre simulaciones de estrategias de personalización, puede ver la guía aquí .

Guardar ajustes

Por último, una vez que esté satisfecho con los resultados de la simulación de su estrategia, asegúrese de presionar el botón "Guardar cambios". Si no está satisfecho, puede hacer clic en "Descartar".

Añadir en el componente SearchBar

Para buscar, los usuarios necesitan un lugar para ingresar resultados de búsqueda que se vinculen a su índice de Algolia y consulten los resultados.

Para comenzar, cree un archivo, SearchBar.js , en client/src/components :

 // client/src/components/SearchBar.js import React from "react"; import { SearchBox } from "react-instantsearch-dom"; function SearchBar() { return ( <div className="search__bar"> <SearchBox showLoadingIndicator={true} /> </div> ); } export default SearchBar;

Esto crea una barra de búsqueda muy simple utilizando el widget <SearchBox> de la biblioteca Algolia InstantSearch .

El cuadro de búsqueda permite a los usuarios ingresar búsquedas. Tras el envío, se realiza una consulta para buscar en un índice de Algolia (en este caso, sus productos ) que se especifica en nuestros componentes InstantSearch en client/src/App.js , con el que se incluyen todas nuestras vistas. Envolver estas vistas en etiquetas InstantSearch nos da acceso a todas las capacidades y componentes de InstantSearch para todos los componentes dentro de la etiqueta.

Para ver el componente SearchBar una vez que se haya agregado, deberá agregar estilo. Cree un archivo SearchBar.css en client/src/components y pegue el contenido de este archivo de ejemplo . Finalmente, no olvide importar el CSS en su archivo SearchBar.js agregando la siguiente línea:

 import "./SearchBar.css";

Resultados de búsqueda de superficie en SearchHits

Ahora que tenemos una forma para que los usuarios ingresen búsquedas, ¿cómo podemos mostrar los resultados?

Esto plantea la necesidad de otro componente nuevo al que podamos redirigir las búsquedas, que mostrará diferentes productos según la consulta. Para obtener los resultados de la búsqueda de Algolia, podemos aprovechar nuevamente la biblioteca InstantSearch; específicamente, podemos usar un componente en esta biblioteca llamado <Hits> , que mostrará estos elementos para nosotros.

Cree un archivo en client/src/components/SearchHits.js , que albergará nuestro componente SearchHits . Luego, agregue el siguiente código:

 // client/src/components/SearchHits.js import React from "react"; import { Hits } from "react-instantsearch-dom"; import ProductItem from "./ProductItem"; import aa from "search-insights"; import { Link } from "react-router-dom"; function Hit({ hit }) { return ( <div className="hit"> <Link to={`/products/${hit.id}`} state={{ selectedProduct: hit }} key={hit.id} onClick={() => { aa("convertedObjectIDs", { userToken: "user-1", index: "products", eventName: "Product conversion", objectIDs: [hit.id], }); }} > <ProductItem product={hit} /> </Link> </div> ); } function SearchHits() { return ( <> <Hits hitComponent={Hit} /> </> ); } export default SearchHits;

Dentro del componente funcional principal SearchHits, devolvemos nuestro componente Hits de la biblioteca InstantSearch<. Los hits mostrarán una lista de resultados, o hits de búsqueda, según lo que se ingrese dentro de un cuadro de búsqueda dentro de la misma etiqueta InstantSearch; en este caso, es el cuadro de búsqueda que acabamos de implementar en SearchBar.js.

Con el componente Resultados, puede representar cada resultado de búsqueda mediante un componente personalizado. En nuestro código, hemos reutilizado el componente ProductItem que también se utiliza para mostrar productos en nuestra página principal.

Finalmente, de manera similar al componente ProductList de nuestra página principal , cada ProductItem está envuelto en un componente Link que conduce a la página de detalles individual del producto. Esto permite a los usuarios ver el elemento con mayor profundidad en la lista de resultados de búsqueda y también realiza un seguimiento de los clics de conversión utilizando la biblioteca search-insights , como lo estamos haciendo con todos los clics de productos en nuestro sitio web.

Agregar rutas a App.js

Una vez que tenga listos los componentes SearchBar y SearchHits , ¡es hora de agregar estos componentes a nuestra aplicación oficialmente y señalar una ruta a nuestra página SearchHits !

Dirígete a tu archivo client/src/App.js e importa los nuevos componentes en la parte superior del archivo:

 import SearchBar from "./components/SearchBar"; import SearchHits from "./components/SearchHits";

Ahora, muestremos la barra de búsqueda en la página de inicio. Para hacerlo, agregue su componente SearchBar encima del componente ProductsList en su configuración de ruta para la ruta / :

 <Route exact path="/" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> // just added this in <ProductsList products={products} /> <Bot /> </InstantSearch> />

Por último, agregaremos una nueva ruta que mostrará dinámicamente los resultados de búsqueda en función de la consulta. Para hacerlo, necesitaremos una ruta dinámica que incluya la consulta de búsqueda. Agregue lo siguiente dentro de la etiqueta <Routes> en su App.js :

 <Route exact path="/results/:query" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> <SearchHits /> <Bot /> </InstantSearch> } />

Lo anterior mostrará una SearchBar , una lista de SearchHits de la búsqueda anterior y el componente Bot existente para el chatbot de nuestra tienda. Al igual que estamos haciendo con las vistas de nuestras otras rutas, estamos envolviendo el contenido de la página con una instancia de InstantSearch para que los usuarios puedan usar la biblioteca y sus capacidades de búsqueda dentro de la página.

En este punto, debería poder ver su barra de búsqueda en la página de inicio:

Actualice SearchBar para redirigir a SearchHits o a casa según las rutas

Por fin, tenemos nuestra SearchBar configurada. También tenemos una página, SearchHits , que mostrará los resultados de búsqueda cuando se envíe una consulta.

Sin embargo, es posible que observe que no aparecen resultados (y, de hecho, nada cambia realmente) al hacer clic en el botón Buscar en su SearchBar . Esto se debe a que aún no hemos conectado un evento onSubmit para este elemento.

¡Volvamos a sumergirnos en SearchBar.js y manos a la obra!

Para nuestra SearchBar , nuestro comportamiento deseado cuando enviamos nuestro resultado de búsqueda es que se redirija a la ruta /results/:query configurada en App.js Sin embargo, dado que estamos implementando esto en un detector de eventos, no podemos navegar a esta vista usando etiquetas <Link> como lo haríamos normalmente. Afortunadamente, React ofrece un gancho useNavigate() que podemos aprovechar para redirigirnos a la página deseada.

En la parte superior de SearchBar , importe el enlace useNavigate :

 import { useNavigate } from "react-router-dom";

Luego, dentro del componente funcional SearchBar , agregue lo siguiente antes de return() :

 let navigate = useNavigate(); const routeChangeSubmit = (query) => { let queryURI = encodeURIComponent(query); let path = `/results/${queryURI}`; navigate(path); }; const routeChangeReset = () => { let path = `/`; navigate(path); };

Lo anterior inicia una instancia de enlace de useNavigate() . Luego, declaramos dos vías de cambio de ruta diferentes: una que ocurre en caso de un evento onSubmit() y otra que ocurre en caso de un evento onReset() , que ocurre cuando un usuario busca y hace clic en un botón "X". junto al botón de búsqueda.

Dentro de la ruta routeChangeSubmit() , tomamos la consulta y la codificamos para que no cause problemas con el formato de la URL del enrutador (esto es útil para los casos en que las consultas de búsqueda de los usuarios contienen espacios u otros caracteres que no son compatibles con la URL). Luego, establecemos una ruta a la ruta deseada para nuestros SearchHits , usando la cadena de consulta codificada como el parámetro :query . Finalmente, usamos el enlace useNavigate() para dirigir al usuario a esa ruta de ruta, lo que da como resultado una redirección perfecta a los resultados de búsqueda. El routeChangeReset() hace lo mismo, excepto que redirige a la página de inicio y no requiere ninguna manipulación de URL ya que la ruta es sencilla.

Por último, agregaremos los eventos onSubmit y onReset a nuestro componente SearchBox dentro de return() :

 <SearchBox showLoadingIndicator={true} onSubmit={(event) => { // added event.preventDefault(); if (event.target[0].value) { routeChangeSubmit(event.target[0].value); } }} onReset={() => { // added routeChangeReset(); }} />

Ambos detectores de eventos llaman a las rutas que acabamos de agregar para las acciones respectivas, submitting y resetting la búsqueda. Dentro de onSubmit() , estamos llamando event.preventDefault() para evitar redireccionamientos no deseados que puedan ocurrir. Luego, usamos el event para extraer la consulta de búsqueda a través de event.target[0].value .

Sin embargo, si la propiedad event.target[0].value está vacía (lo que significa que un usuario ha hecho clic en el botón de búsqueda sin ingresar una consulta), se producirá una redirección de URL no válida, lo que generará una página en blanco. Como resultado, el código verificará que el valor exista y, si existe, llama a nuestra ruta routeChangeSubmit() y pasa la consulta de búsqueda.

Con este código agregado, debería poder buscar elementos sin problemas y ver los resultados correspondientes:

Habilite la personalización en el componente Configurar

Buscar es fantástico, pero buscar con personalización es aún mejor . Afortunadamente, hemos desarrollado una estrategia de personalización con facilidad utilizando Algolia, ¡y podemos incorporarla rápidamente en nuestra instancia de búsqueda existente!

Para agregar personalización, necesitaremos agregar dos parámetros a nuestros componentes Configure (de la biblioteca InstantSearch) en nuestro App.js , donde todas nuestras configuraciones de búsqueda están conectadas. Los dos parámetros que necesitaremos agregar son:

• enablePersonalization : un booleano que habilitará o deshabilitará los resultados de personalización que ocurren para la instancia de InstantSearch de un usuario.
• userToken : una cadena que pretende ser una identificación de usuario única; si está utilizando cuentas de usuario separadas para su aplicación, recuperaría la identificación del usuario actual y la completaría aquí. En el escenario de nuestra aplicación, solo estamos rastreando la actividad de un usuario, por lo que completaremos este valor con la ID de ese usuario: user-1 .

Vaya a client/src/App.js y agregue los siguientes parámetros a cada etiqueta <Configure> para cada ruta que contenga una SearchBar ( / y /results/:query ).

Este es un ejemplo de cómo se vería dentro de la ruta de inicio ( / ):

 <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics enablePersonalization={true} userToken="user-1" /> <SearchBar /> <ProductsList products={products} /> <Bot /> </InstantSearch>

Con esto agregado para el componente Configure de cada ruta, ¡ahora podrá ver resultados personalizados en cada búsqueda!

Para obtener más información sobre cómo habilitar la personalización en producción y otros métodos que puede usar para habilitar la personalización (como habilitarla en el tablero para ciertos índices), visite este artículo .

Conclusión

¡Increíble trabajo, y gracias por seguirnos! 🎉 Con esta guía, aprendió cómo agregar una búsqueda personalizada a su experiencia de comercio electrónico. Si desea ver el código completo del proyecto para este tutorial, puede visitar el repositorio algolia-commercejs-personalizations-app .

Las funciones de Personalización de Algolia hicieron todo el trabajo pesado por nosotros: a través del panel de Personalización, pudo crear fácilmente una estrategia para experiencias de búsqueda de usuarios personalizadas. Además, los componentes preconstruidos de Algolia de la biblioteca InstantSearch le brindaron una forma sencilla de comenzar a ejecutar e implementar una solución de búsqueda fácil en su sitio, con una configuración mínima necesaria.

¡Esperamos que hayas aprendido mucho sobre el poder de la personalización con este tutorial! 💪 Si desea piratear más en la aplicación que hemos creado hoy, puede considerar hacer algunas actualizaciones como:

• Agregar pruebas de front-end y back-end para asegurarse de que su sitio siempre funcione sin problemas

• Introducción a las cuentas de usuario: permita que los usuarios se registren, inicien sesión y cierren sesión en las cuentas de su sitio. También puede agregar nuevas funciones específicas del usuario, como favoritos

• Generando más tipos de eventos y experimentando con diferentes modelos de recomendación y estrategias de personalización

• Crear una experiencia para agregar artículos a un carrito y pagar

  
  

¡Las posibilidades son infinitas! ✨ ¡Mucha suerte con tu futuro hacking!