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, 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 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! el comercio electrónico realmente 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á! Algolia 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 aplicación básica de comercio electrónico con funciones de Recomendaciones que hemos creado en este artículo como punto de partida. esta 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: para verificar si ya tiene instalado Node, ejecute en su línea de comando. Si no aparece ninguna versión, deberá instalarla; puede encontrar instrucciones de instalación para su máquina . Nodo: node -v aquí Crea una cuenta ngrok . Lo necesitará para canalizar las conexiones desde sus aplicaciones locales para que pueda configurar webhooks y realizar llamadas a la API. ngrok: aquí Commerce.js utiliza una plataforma llamada Chec para administrar sus integraciones, claves de API y productos. Deberá crear una cuenta y luego configurar una tienda Commerce.js. Chec: aquí para aprovechar las funciones de Algolia, cree una de forma gratuita. Una vez que tenga su cuenta, para representar su aplicación de comercio electrónico y un llamado . Algolia: cuenta del plan Algolia Build cree una aplicación índice products para usar todas las funciones de su aplicación, configure ; para hacerlo, deberá generar al menos 500 eventos de conversión durante 3 días, ya sea manualmente o . Eventos de recomendación de Algolia: la recomendación de Algolia a través de un CSV También necesitará estos eventos para usar la Personalización de Algolia. NOTA: una vez que haya configurado y agregado sus eventos, genere un para elementos de tendencia en función de estos eventos para que puedan aparecer en su aplicación. Modelo de recomendación de Algolia: modelo de recomendació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 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. guía completa 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 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. La personalización de Algolia 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 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. de Categorías Una vez que haya creado todas sus categorías deseadas, navegue a sus 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! Productos 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 y . Si no tiene esto configurado, lea las instrucciones en el del proyecto para agregarlo. products.create products.update LÉAME 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 . 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. facetas 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 . Si tiene problemas para encontrar esto, verifique dos veces los datos de su índice para asegurarse de que el campo se complete con objetos que contengan una propiedad . categories.name categories name ) como un atributo. 💡 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 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 . Si es la primera vez que usa Personalización, verá esta pantalla: sección de Personalización en su cuenta 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: : 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. Eventos : 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). Facetas 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 y : categories.name 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 y en . eventos de pesaje facetas de pesaje 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 para ver qué podría surgir con nuestra estrategia actual: user-1 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, , en : SearchBar.js client/src/components // client/src/components/SearchBar.js import React from "react"; import { SearchBox } from "react-instantsearch-dom"; function SearchBar() { return ( ); } export default SearchBar; Esto crea una barra de búsqueda muy simple utilizando el widget 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 ) que se especifica en , 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. productos nuestros componentes InstantSearch en client/src/App.js Para ver el componente una vez que se haya agregado, deberá agregar estilo. Cree un archivo en y pegue el contenido . Finalmente, no olvide importar el CSS en su archivo agregando la siguiente línea: SearchBar SearchBar.css client/src/components de este archivo de ejemplo SearchBar.js 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 , que mostrará estos elementos para nosotros. Cree un archivo en , que albergará nuestro componente . Luego, agregue el siguiente código: client/src/components/SearchHits.js SearchHits // 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 ( { aa("convertedObjectIDs", { userToken: "user-1", index: "products", eventName: "Product conversion", objectIDs: [hit.id], }); }} > ); } function SearchHits() { return ( <> ); } 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 que también se utiliza para mostrar productos en nuestra página principal. componente ProductItem Finalmente, de manera similar al componente , cada está envuelto en un componente 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 , como lo estamos haciendo con todos los clics de productos en nuestro sitio web. ProductList de nuestra página principal ProductItem Link search-insights Agregar rutas a App.js Una vez que tenga listos los componentes y , ¡es hora de agregar estos componentes a nuestra aplicación oficialmente y señalar una ruta a nuestra página ! SearchBar SearchHits SearchHits Dirígete a tu archivo e importa los nuevos componentes en la parte superior del archivo: client/src/App.js 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 encima del componente en su configuración de ruta para la ruta : SearchBar ProductsList / // just added this in /> 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 en su : App.js } /> Lo anterior mostrará una , una lista de de la búsqueda anterior y el componente 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. SearchBar SearchHits Bot 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 configurada. También tenemos una página, , que mostrará los resultados de búsqueda cuando se envíe una consulta. SearchBar SearchHits 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 . Esto se debe a que aún no hemos conectado un evento para este elemento. SearchBar onSubmit ¡Volvamos a sumergirnos en y manos a la obra! SearchBar.js Para nuestra , nuestro comportamiento deseado cuando enviamos nuestro resultado de búsqueda es que se redirija a la ruta configurada en Sin embargo, dado que estamos implementando esto en un detector de eventos, no podemos navegar a esta vista usando etiquetas como lo haríamos normalmente. Afortunadamente, React ofrece gancho que podemos aprovechar para redirigirnos a la página deseada. SearchBar /results/:query App.js un useNavigate() En la parte superior de , importe el enlace : SearchBar useNavigate import { useNavigate } from "react-router-dom"; Luego, dentro del componente funcional , agregue lo siguiente antes de : SearchBar 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 . Luego, declaramos dos vías de cambio de ruta diferentes: una que ocurre en caso de un evento y otra que ocurre en caso de un evento , que ocurre cuando un usuario busca y hace clic en un botón "X". junto al botón de búsqueda. useNavigate() onSubmit() onReset() Dentro de la ruta , 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 , usando la cadena de consulta codificada como el parámetro . Finalmente, usamos el enlace 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 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. routeChangeSubmit() SearchHits :query useNavigate() routeChangeReset() Por último, agregaremos los eventos y a nuestro componente dentro de : onSubmit onReset SearchBox return() { // 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, y la búsqueda. Dentro de , estamos llamando para evitar redireccionamientos no deseados que puedan ocurrir. Luego, usamos el para extraer la consulta de búsqueda a través de . submitting resetting onSubmit() event.preventDefault() event event.target[0].value Sin embargo, si la propiedad 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 y pasa la consulta de búsqueda. event.target[0].value routeChangeSubmit() 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 . Afortunadamente, hemos desarrollado una estrategia de personalización con facilidad utilizando Algolia, ¡y podemos incorporarla rápidamente en nuestra instancia de búsqueda existente! aún mejor Para agregar personalización, necesitaremos agregar dos parámetros a nuestros (de la biblioteca InstantSearch) en nuestro , donde todas nuestras configuraciones de búsqueda están conectadas. Los dos parámetros que necesitaremos agregar son: componentes Configure App.js : un booleano que habilitará o deshabilitará los resultados de personalización que ocurren para la instancia de InstantSearch de un usuario. enablePersonalization : 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: . userToken user-1 Vaya a y agregue los siguientes parámetros a cada etiqueta para cada ruta que contenga una ( y ). client/src/App.js SearchBar / /results/:query Este es un ejemplo de cómo se vería dentro de la ruta de inicio ( ): / Con esto agregado para el componente de cada ruta, ¡ahora podrá ver resultados personalizados en cada búsqueda! Configure 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!