Comment personnaliser votre moteur de recherche de commerce électronique

Les achats en ligne ont été initialement conçus comme une voie glorieuse vers la commodité - quelques clics et vos articles préférés sont expédiés directement à votre porte, aucune interaction sociale ou randonnée dans les centres commerciaux n'est nécessaire ! Depuis lors, a depuis évolué vers quelque chose de complètement différent. Désormais, les boutiques en ligne peuvent sembler accablantes avec un catalogue apparemment sans fin et un minimum de conseils interpersonnels. Par conséquent, les utilisateurs d'expériences de commerce électronique ont tendance à s'appuyer fortement sur la recherche pour affiner leurs besoins, mais peuvent être confrontés au dilemme cyclique consistant à parcourir des milliers de résultats pour trouver ce qu'ils recherchent . Cependant, personnaliser votre expérience de recherche avec Algolia peut éliminer ce dilemme en personnalisant ces résultats de recherche en fonction de l'activité et des intérêts de l'utilisateur. Cela offre une meilleure expérience de recherche aux utilisateurs et augmente également l'engagement avec le catalogue de votre site Web, ce qui est une victoire pour tout le monde ! le commerce électronique vraiment offre les outils pour faciliter la mise en œuvre des fonctionnalités de recherche personnalisée pour les développeurs. Lisez la suite pour savoir comment tirer parti de la personnalisation d'Algolia pour créer une expérience de recherche personnalisée que vos utilisateurs vont adorer ! Algolia Ce que nous construisons Dans ce didacticiel, nous allons créer une application de commerce électronique à l'aide de React et Commerce.js. Heureusement, nous n'aurons pas à créer à partir de zéro - nous utiliserons application de commerce électronique de base avec les fonctionnalités de recommandations que nous avons créées dans cet article comme point de départ. cette À la fin du didacticiel, notre application pourra effectuer une recherche dans le catalogue de produits de notre magasin et afficher des résultats de recherche pertinents (et personnalisés) en fonction de l'activité de l'utilisateur : Si vous souhaitez afficher le code complet du projet à l'avance, vous pouvez visiter le référentiel . algolia-commercejs-personalizations-app Commencer Avant de commencer à créer, assurez-vous de configurer les éléments suivants : pour vérifier si Node est déjà installé, exécutez dans votre ligne de commande. Si aucune version ne s'affiche, vous devrez l'installer — vous pouvez trouver les instructions d'installation pour votre machine . Node : node -v ici Créez un compte ngrok . Vous en aurez besoin pour tunneliser les connexions à partir de vos applications locales afin de pouvoir configurer des webhooks et effectuer des appels d'API. ngrok : ici Commerce.js utilise une plate-forme appelée Chec pour gérer vos intégrations, vos clés API et vos produits. Vous devrez créer un compte , puis configurer une boutique Commerce.js. Chec : ici Pour tirer parti des fonctionnalités d'Algolia, créez gratuitement un . Une fois que vous avez votre compte, pour représenter votre application e-commerce et un appelé . Algolia : compte de plan Algolia Build créez une application index products pour utiliser toutes les fonctionnalités de votre application, configurez . Pour ce faire, vous devrez générer au moins 500 événements de conversion sur 3 jours, soit manuellement, soit . Algolia Recommend Events : Algolia Recommend via un CSV Vous aurez également besoin de ces événements pour utiliser la personnalisation d'Algolia. REMARQUE : une fois vos événements configurés et agrégés, générez un pour les éléments de tendance en fonction de ces événements afin qu'ils puissent apparaître dans votre application. Modèle de recommandation Algolia : modèle de recommandation Si vous n'êtes pas familier avec les concepts Algolia ci-dessus et que vous ne savez pas comment le configurer vous-même, vous avez de la chance ! Nous avons un qui capture les étapes de configuration ci-dessus ainsi que la configuration d'autres données nécessaires, comme les événements pour les recommandations et la personnalisation et la génération d'un modèle de recommandations. guide complet Une fois que vous avez un magasin de commerce électronique fonctionnant localement qui affiche avec succès vos produits, exécute le chatbot et fait apparaître des recommandations d'articles tendance sur la page de détail de votre produit, vous pouvez passer à l'étape suivante ! Il est temps de construire utilise les goûts spécifiques d'un utilisateur, suivis à travers des événements, pour générer des résultats plus pertinents et personnels pour leurs expériences de recherche. Étant donné que les recherches peuvent signifier différentes choses pour différents types de personnes, la personnalisation garantira que les utilisateurs verront en premier les résultats qui les intéressent le plus. Afin de tirer parti de la magie de la personnalisation, nous devons d'abord suivre quelques étapes. Algolia Personalization Catégorisez vos produits Pour fournir des informations plus approfondies sur les relations entre vos produits, vous devrez créer et ajouter des catégories à vos produits dans Commerce.js. Les catégories peuvent être n'importe quel regroupement général de la façon dont les produits sont liés les uns aux autres - dans le cas de notre magasin de consignation vintage, il peut s'agir de types de vêtements (hauts, accessoires, chaussures), de marques (Vivienne Westwood, Dior, Chanel) et même sous-catégories au sein de ces catégories (dans les chaussures, il y a des baskets, des talons et des bottes). Ajouter des catégories dans Commerce.js et les affecter aux produits Tout d'abord, nous allons ajouter des catégories à nos produits dans Commerce.js. Accédez à la page dans la barre latérale de votre tableau de bord Chec et cliquez sur le bouton "Ajouter" en haut à droite pour ajouter de nouvelles catégories. Les catégories peuvent avoir des catégories parentes et des sous-catégories. Catégories Une fois que vous avez créé toutes les catégories souhaitées, accédez à vos dans Commerce.js et attribuez-leur ces catégories. Ajoutez autant de catégories que vous le souhaitez à chaque produit - plus vous ajoutez de catégories, plus vous avez de possibilités de créer des relations entre les articles ! produits Les listes de produits mises à jour seront automatiquement synchronisées avec Algolia grâce au webhook que vous avez configuré dans Commerce.js qui pousse les nouveaux produits vers Algolia pour les événements et . Si vous ne l'avez pas configuré, lisez les instructions du du projet pour l'ajouter. products.create products.update fichier README Nous vous recommandons de revérifier vos produits dans Algolia pour vous assurer que les catégories sont renseignées pour chaque article correspondant que vous mettez à jour dans Commerce.js. Si vous constatez que les produits ne se synchronisent pas avec votre index Algolia, vous pouvez vous enregistrer sur votre webhook configuré dans Chec . ici Définir les attributs des facettes dans Algolia Avec chaque produit de votre inventaire catégorisé, nous pouvons attribuer une importance à ces catégories grâce . Les facettes sont un ensemble de catégories filtrables qui permettent aux utilisateurs d'affiner les résultats dans plusieurs catégories simultanément. Ces catégories, appelées "attributs" dans Algolia, seront constituées des catégories que nous avons attribuées à nos produits dans Commerce.js. au facettage Pour déclarer des attributs pour le facettage, accédez à l'index de votre application dans votre tableau de bord Algolia. Ensuite, cliquez sur "Configuration" et recherchez le lien "Facets" sous l'en-tête "Filtrage et facettage". Sous l'en-tête "Attributs pour le facettage", cliquez sur "Ajouter un attribut" - cela fera apparaître une série de propriétés que chaque élément de votre index possède. Recherchez l'attribut . Si vous ne parvenez pas à le trouver, revérifiez vos données d'index pour vous assurer que le champ contient des objets contenant une propriété . categories.name categories name ) en tant qu'attribut. 💡 Si vous souhaitez avoir une facette supplémentaire pour des résultats encore plus personnalisés, nous pouvons également ajouter les balises SEO que nous avons créées pour les recherches d'articles ( seo.description Avec chaque attribut, vous pouvez également les classer selon qu'ils doivent être "filtre uniquement", "recherchable" ou "non-recherchable". Vous pouvez en savoir plus sur ces regroupements . ici Une fois terminée, la section "Attributs pour le facettage" de votre index devrait ressembler à ceci : Configurer la personnalisation Nous sommes maintenant prêts à configurer la personnalisation via le tableau de bord ! 💡 *La personnalisation est une fonctionnalité Algolia premium disponible dans le plan de construction gratuit pour le développement de pré-production.* Commencez par accéder à la . Si c'est la première fois que vous utilisez la personnalisation, cet écran s'affiche : section Personnalisation de votre compte Cliquez sur "Activer la personnalisation" et suivez le flux pour accepter les termes et conditions. Une fois que vous avez terminé le flux, vous verrez un tableau de bord qui ressemble à ceci : Dans ce tableau de bord, vous pouvez configurer une stratégie de personnalisation pour vous assurer que les utilisateurs voient les résultats les plus pertinents pour les données dont vous disposez. Deux éléments différents influencent cette stratégie : : le principal mécanisme d'apprentissage des affinités des utilisateurs. Ceux-ci sont collectés via l'API Insights. Dans notre application, nous collectons actuellement les événements de conversion déclenchés par les utilisateurs cliquant sur les produits. Événements : elles ont été configurées pour votre index plus haut dans cet article. Les facettes se composent de catégories, de groupes et de détails supplémentaires d'un produit qui fournissent plus d'informations sur un élément avec lequel il a interagi lors d'un événement et sur ce qu'un utilisateur aime exactement à propos de ce produit (par exemple, la marque, le type de produit ou la couleur). Facettes Peser les événements et les facettes Dans le tableau de bord, vous pourrez peser l'importance des événements et des facettes pour influencer votre stratégie. La pondération vous permet de mettre différents niveaux d'importance et d'ajouter plus ou moins de sens à certains événements et facettes par rapport à d'autres, en combinant tous les poids dans une stratégie générale qui influencera la personnalisation. Pour commencer à peser, vous devrez ajouter les événements et les facettes que vous aimeriez avoir dans votre stratégie. Tous les événements disponibles pour votre index apparaîtront automatiquement dans une catégorie "Événements disponibles" sur le tableau de bord. Si vous ne voyez aucun événement, essayez de générer à nouveau certains événements de conversion avec les facettes nouvellement ajoutées en cliquant sur divers produits de votre boutique. Pour ajouter des événements à votre stratégie une fois qu'ils apparaissent sous "Événements disponibles", cliquez sur le bouton "Ajouter à la stratégie". Pour les facettes, vous pouvez les ajouter en cliquant sur le bouton "Ajouter une facette" à droite du tableau de bord. À partir de là, vous pouvez sélectionner tous les attributs de facettage que vous avez ajoutés précédemment, tels que et : categories.name seo.description Lors de l'ajout de ces événements et facettes, vous pourrez ajuster les pourcentages de poids pour les différentes facettes et événements ajoutés à votre stratégie. Plus le poids est élevé, plus cet événement ou cette facette sera prioritaire dans votre stratégie. Apprenez-en plus sur et dans . la pesée des événements la pesée des facettes cet article Définir l'impact de la personnalisation En plus de la pondération, vous pouvez définir l'impact d'une stratégie de personnalisation pour influencer l'amélioration de la position relative que les affinités des utilisateurs ont sur le classement de recherche. Pour ce didacticiel, nous avons laissé l'impact à 50 % par défaut. Découvrez une stratégie approfondie sur l'impact de la personnalisation ici. Simulez votre stratégie Pour tester diverses modifications des paramètres d'événement, de facette et d'impact, vous pouvez simuler votre stratégie de personnalisation et rechercher par ID utilisateur pour afficher les résultats de la stratégie prévue. Étant donné que nous n'avons codé en dur qu'un seul utilisateur pour notre application, nous pouvons rechercher pour voir ce qui pourrait apparaître avec notre stratégie actuelle : user-1 Pour en savoir plus sur les simulations de stratégies de personnalisation, vous pouvez consulter le guide . ici Enregistrer les paramètres Enfin, une fois que vous êtes satisfait des résultats de la simulation de votre stratégie, assurez-vous de cliquer sur le bouton "Enregistrer les modifications". Si vous n'êtes pas satisfait, vous pouvez cliquer sur « Supprimer ». Ajouter dans le composant SearchBar Pour effectuer une recherche, les utilisateurs ont besoin d'un endroit pour saisir les résultats de la recherche qui renvoient à votre index Algolia et aux requêtes de résultats. Pour commencer, créez un fichier, , dans : 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; Cela crée une barre de recherche très simple en utilisant le widget de la bibliothèque Algolia . InstantSearch La SearchBox permet aux utilisateurs de saisir des recherches. Lors de la soumission, une requête est effectuée pour rechercher un index Algolia (dans ce cas, il s'agit ) qui est spécifié dans , avec lequel toutes nos vues sont enveloppées. L'encapsulation de ces vues dans des balises InstantSearch nous donne accès à toutes les fonctionnalités et composants InstantSearch pour tous les composants de la balise. de products nos composants InstantSearch dans client/src/App.js Pour afficher le composant une fois qu'il a été ajouté, vous devez ajouter un style. Créez un fichier dans et collez-y le contenu . Enfin, n'oubliez pas d'importer le CSS dans votre fichier en ajoutant la ligne suivante : SearchBar SearchBar.css client/src/components de cet exemple de fichier SearchBar.js import "./SearchBar.css"; Afficher les résultats de recherche dans SearchHits Maintenant que nous avons un moyen pour les utilisateurs d'entrer des recherches, comment pouvons-nous afficher les résultats ? Cela soulève le besoin d'un autre nouveau composant vers lequel nous pouvons rediriger les recherches, qui fera apparaître différents produits en fonction de la requête. Pour obtenir les résultats de la recherche à partir d'Algolia, nous pouvons à nouveau tirer parti de la bibliothèque InstantSearch - en particulier, nous pouvons utiliser un composant de cette bibliothèque appelé , qui fera apparaître ces éléments pour nous. Créez un fichier sur , qui hébergera notre composant . Ensuite, ajoutez le code suivant : 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; Dans le composant fonctionnel principal SearchHits, nous renvoyons notre composant Hits de la bibliothèque InstantSearch<. Les résultats afficheront une liste de résultats, ou résultats de recherche, en fonction de ce qui est entré dans une SearchBox dans la même balise InstantSearch — dans ce cas, c'est la SearchBox que nous venons d'implémenter dans SearchBar.js. Avec le composant Hits, vous pouvez afficher chaque résultat de recherche à l'aide d'un composant personnalisé. Dans notre code, nous avons réutilisé le qui est également utilisé pour afficher les produits sur notre page principale. composant ProductItem Enfin, le composant de notre page principale, chaque est enveloppé dans un composant qui mène à la page de détail individuelle du produit. Cela permet aux utilisateurs d'examiner l'élément plus en profondeur à partir de la liste des résultats de recherche et de suivre également les clics de conversion à l'aide de la bibliothèque , comme nous le faisons pour tous les clics sur les produits sur notre site Web. comme pour ProductList ProductItem Link search-insights Ajouter des routes à App.js Une fois que vous avez les composants et prêts, il est temps d'ajouter officiellement ces composants dans notre application et de pointer un itinéraire vers notre page ! SearchBar SearchHits SearchHits Rendez-vous dans votre fichier et importez les nouveaux composants en haut du fichier : client/src/App.js import SearchBar from "./components/SearchBar"; import SearchHits from "./components/SearchHits"; Maintenant, faisons apparaître la barre de recherche sur la page d'accueil. Pour ce faire, ajoutez votre composant au-dessus du composant dans votre configuration Route pour le chemin : SearchBar ProductsList / // just added this in /> Enfin, nous ajouterons un nouvel itinéraire qui affichera dynamiquement les résultats de recherche en fonction de la requête. Pour ce faire, nous aurons besoin d'une route dynamique qui accepte la requête de recherche. Ajoutez ce qui suit dans la balise dans votre : App.js } /> Ce qui précède fera apparaître une , une liste de de la recherche précédente et le composant existant pour le chatbot de notre boutique. Comme nous le faisons avec les vues de nos autres itinéraires, nous encapsulons le contenu de la page avec une instance InstantSearch afin que les utilisateurs puissent utiliser la bibliothèque et ses capacités de recherche dans la page. SearchBar SearchHits Bot À ce stade, vous devriez pouvoir voir votre barre de recherche sur la page d'accueil : Mettre à jour SearchBar pour rediriger vers SearchHits ou home en fonction des itinéraires Enfin, nous avons configuré notre . Nous avons également une page, , qui affichera les résultats de recherche lorsqu'une requête est soumise. SearchBar SearchHits Cependant, vous remarquerez peut-être qu'aucun résultat ne s'affiche (et en fait, rien ne change vraiment) en cliquant sur le bouton Rechercher dans votre . C'est parce que nous n'avons pas encore configuré d'événement pour cet élément. SearchBar onSubmit Replongeons-nous dans et mettons-nous au travail ! SearchBar.js Pour notre , notre comportement souhaité lorsque nous soumettons notre résultat de recherche est qu'il redirige vers la route configurée dans . Cependant, puisque nous implémentons cela dans un écouteur d'événement, nous ne pouvons pas accéder à cette vue en utilisant les balises comme nous le ferions normalement. Heureusement, React propose hook dont nous pouvons profiter pour nous rediriger vers la page souhaitée ! SearchBar /results/:query App.js un useNavigate() En haut de , importez le crochet : SearchBar useNavigate import { useNavigate } from "react-router-dom"; Ensuite, dans le composant fonctionnel , ajoutez ce qui suit avant le : SearchBar return() let navigate = useNavigate(); const routeChangeSubmit = (query) => { let queryURI = encodeURIComponent(query); let path = `/results/${queryURI}`; navigate(path); }; const routeChangeReset = () => { let path = `/`; navigate(path); }; Ce qui précède lance une instance de hook de . Ensuite, nous déclarons deux voies de changement de route différentes - une qui se produit en cas d'événement et une qui se produit en cas d'événement , qui se produit lorsqu'un utilisateur recherche et clique sur un bouton "X". à côté du bouton de recherche. useNavigate() onSubmit() onReset() Dans la voie , nous prenons la requête et l'encodons afin qu'elle ne cause pas de problèmes avec le formatage de l'URL du routeur (ceci est utile dans les cas où les requêtes de recherche des utilisateurs contiennent des espaces ou d'autres caractères non compatibles avec l'URL). Ensuite, nous définissons un chemin vers la route souhaitée pour nos , en utilisant la chaîne de requête codée comme paramètre . Enfin, nous utilisons le hook pour diriger l'utilisateur vers ce chemin de route, ce qui se traduit par une redirection transparente vers les résultats de la recherche. Le fait la même chose, sauf qu'il redirige vers la page d'accueil et ne nécessite aucune manipulation d'URL puisque le chemin est simple. routeChangeSubmit() SearchHits :query useNavigate() routeChangeReset() Enfin, nous ajouterons les événements et à notre composant dans le : onSubmit onReset SearchBox return() { // added event.preventDefault(); if (event.target[0].value) { routeChangeSubmit(event.target[0].value); } }} onReset={() => { // added routeChangeReset(); }} /> Les deux écouteurs d'événement appellent les chemins que nous venons d'ajouter pour les actions respectives, et en la recherche. Dans , nous appelons pour éviter toute redirection indésirable qui pourrait se produire. Ensuite, nous utilisons l' pour extraire la requête de recherche via . submitting resetting onSubmit() event.preventDefault() event event.target[0].value Cependant, si la propriété est vide (ce qui signifie qu'un utilisateur a cliqué sur le bouton de recherche sans entrer de requête), une redirection d'URL non valide se produirait, entraînant une page vierge. En conséquence, le code vérifiera pour s'assurer que la valeur existe, et si c'est le cas, il appelle alors notre voie et transmet la requête de recherche. event.target[0].value routeChangeSubmit() Avec ce code ajouté, vous devriez être en mesure de rechercher des éléments de manière transparente et d'afficher les résultats correspondants : Activer la personnalisation dans le composant de configuration La recherche est fantastique, mais la recherche avec personnalisation est . Heureusement, nous avons développé une stratégie de personnalisation avec facilité en utilisant Algolia, et nous pouvons rapidement l'intégrer dans notre instance de recherche existante ! encore meilleure Pour ajouter de la personnalisation, nous devrons ajouter deux paramètres à nos (de la bibliothèque InstantSearch) dans notre , où tous nos paramètres de recherche sont câblés. Les deux paramètres que nous devrons ajouter sont : composants Configure App.js : un booléen qui activera ou désactivera les résultats de personnalisation qui se produisent pour l'instance InstantSearch d'un utilisateur. enablePersonalization : une chaîne destinée à être un identifiant d'utilisateur unique. Si vous utilisez des comptes d'utilisateurs distincts pour votre application, vous devez récupérer l'identifiant de l'utilisateur actuel et le remplir ici. Dans le scénario de notre application, nous suivons uniquement l'activité d'un seul utilisateur, nous remplirons donc cette valeur avec l'ID de cet utilisateur - . userToken user-1 Accédez à et ajoutez les paramètres suivants à chaque balise pour chaque route contenant une ( et ). client/src/App.js SearchBar / /results/:query Voici un exemple de ce à quoi cela ressemblerait dans la route home ( ) : / Avec cela ajouté pour le composant de chaque itinéraire, vous pourrez désormais voir des résultats personnalisés sur chaque recherche ! Configure Pour en savoir plus sur l'activation de la personnalisation en production et sur les autres méthodes que vous pouvez utiliser pour activer la personnalisation (comme l'activer dans le tableau de bord pour certains index), consultez . cet article Conclusion Incroyable travail et merci de nous avoir suivi ! 🎉 Avec ce guide, vous avez appris à ajouter une recherche personnalisée à votre expérience de commerce électronique. Si vous souhaitez afficher le code complet du projet pour ce didacticiel, vous pouvez visiter le référentiel . algolia-commercejs-personalizations-app Les fonctionnalités de personnalisation d'Algolia ont fait tout le travail pour nous - grâce au tableau de bord de personnalisation, vous avez pu facilement créer une stratégie pour des expériences de recherche d'utilisateurs personnalisées. De plus, les composants pré-construits d'Algolia à partir de la bibliothèque InstantSearch vous ont fourni un moyen simple de démarrer et de mettre en œuvre une solution de recherche simple sur votre site, avec une configuration minimale nécessaire. Nous espérons que vous avez beaucoup appris sur la puissance de la personnalisation grâce à ce didacticiel ! 💪 Si vous souhaitez pirater davantage l'application que nous avons créée aujourd'hui, vous pouvez envisager de faire quelques mises à jour telles que : Ajout de tests front-end et back-end pour vous assurer que votre site fonctionne toujours correctement Présentation des comptes d'utilisateurs - permet aux utilisateurs de s'inscrire, de se connecter et de se déconnecter des comptes sur votre site. Vous pouvez également ajouter de nouvelles fonctionnalités spécifiques à l'utilisateur, telles que les favoris Générer plus de types d'événements et expérimenter différents modèles de recommandation et stratégies de personnalisation Créer une expérience pour ajouter des articles à un panier et passer à la caisse Les possibilités sont infinies! ✨ Bonne chance avec votre futur piratage !