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, le commerce électronique 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 vraiment . 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 !

Algolia 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 !

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 cette 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.

À 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 :

• Node : pour vérifier si Node est déjà installé, exécutez node -v 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 ici .
• ngrok : Créez un compte ngrok ici . 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.
• Chec : 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 ici , puis configurer une boutique Commerce.js.
• Algolia : Pour tirer parti des fonctionnalités d'Algolia, créez gratuitement un compte de plan Algolia Build . Une fois que vous avez votre compte, créez une application pour représenter votre application e-commerce et un index appelé products .
  • Algolia Recommend Events : pour utiliser toutes les fonctionnalités de votre application, configurez Algolia Recommend . Pour ce faire, vous devrez générer au moins 500 événements de conversion sur 3 jours, soit manuellement, soit via un CSV .
  • REMARQUE : Vous aurez également besoin de ces événements pour utiliser la personnalisation d'Algolia.
  • Modèle de recommandation Algolia : une fois vos événements configurés et agrégés, générez un modèle de recommandation pour les éléments de tendance en fonction de ces événements afin qu'ils puissent apparaître dans votre application.

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 guide complet 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.

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

Algolia Personalization 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.

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 Catégories 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.

Une fois que vous avez créé toutes les catégories souhaitées, accédez à vos produits 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 !

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 products.create et products.update . Si vous ne l'avez pas configuré, lisez les instructions du fichier README du projet pour l'ajouter.

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 au facettage . 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.

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 categories.name . Si vous ne parvenez pas à le trouver, revérifiez vos données d'index pour vous assurer que le champ categories contient des objets contenant une propriété name .

• 💡 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 ) en tant qu'attribut.

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 section Personnalisation de votre compte . Si c'est la première fois que vous utilisez la personnalisation, cet écran s'affiche :

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 :

• Événements : 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.
• Facettes : 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).

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 categories.name et 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 la pesée des événements et la pesée des facettes dans 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 user-1 pour voir ce qui pourrait apparaître avec notre stratégie actuelle :

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, SearchBar.js , dans 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;

Cela crée une barre de recherche très simple en utilisant le widget <SearchBox> 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 de products ) qui est spécifié dans nos composants InstantSearch dans client/src/App.js , 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.

Pour afficher le composant SearchBar une fois qu'il a été ajouté, vous devez ajouter un style. Créez un fichier SearchBar.css dans client/src/components et collez-y le contenu de cet exemple de fichier . Enfin, n'oubliez pas d'importer le CSS dans votre fichier SearchBar.js en ajoutant la ligne suivante :

 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é <Hits> , qui fera apparaître ces éléments pour nous.

Créez un fichier sur client/src/components/SearchHits.js , qui hébergera notre composant SearchHits . Ensuite, ajoutez le code suivant :

 // 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;

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 composant ProductItem qui est également utilisé pour afficher les produits sur notre page principale.

Enfin, comme pour le composant ProductList de notre page principale, chaque ProductItem est enveloppé dans un composant Link 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 search-insights , comme nous le faisons pour tous les clics sur les produits sur notre site Web.

Ajouter des routes à App.js

Une fois que vous avez les composants SearchBar et SearchHits prêts, il est temps d'ajouter officiellement ces composants dans notre application et de pointer un itinéraire vers notre page SearchHits !

Rendez-vous dans votre fichier client/src/App.js et importez les nouveaux composants en haut du fichier :

 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 SearchBar au-dessus du composant ProductsList dans votre configuration Route pour le chemin / :

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

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 <Routes> dans votre App.js :

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

Ce qui précède fera apparaître une SearchBar , une liste de SearchHits de la recherche précédente et le composant Bot 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.

À 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 SearchBar . Nous avons également une page, SearchHits , qui affichera les résultats de recherche lorsqu'une requête est soumise.

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 SearchBar . C'est parce que nous n'avons pas encore configuré d'événement onSubmit pour cet élément.

Replongeons-nous dans SearchBar.js et mettons-nous au travail !

Pour notre SearchBar , notre comportement souhaité lorsque nous soumettons notre résultat de recherche est qu'il redirige vers la route /results/:query configurée dans App.js . Cependant, puisque nous implémentons cela dans un écouteur d'événement, nous ne pouvons pas accéder à cette vue en utilisant les balises <Link> comme nous le ferions normalement. Heureusement, React propose un hook useNavigate() dont nous pouvons profiter pour nous rediriger vers la page souhaitée !

En haut de SearchBar , importez le crochet useNavigate :

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

Ensuite, dans le composant fonctionnel SearchBar , ajoutez ce qui suit avant le 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 useNavigate() . Ensuite, nous déclarons deux voies de changement de route différentes - une qui se produit en cas d'événement onSubmit() et une qui se produit en cas d'événement onReset() , qui se produit lorsqu'un utilisateur recherche et clique sur un bouton "X". à côté du bouton de recherche.

Dans la voie routeChangeSubmit() , 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 SearchHits , en utilisant la chaîne de requête codée comme paramètre :query . Enfin, nous utilisons le hook useNavigate() 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 routeChangeReset() 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.

Enfin, nous ajouterons les événements onSubmit et onReset à notre composant SearchBox dans le return() :

 <SearchBox showLoadingIndicator={true} onSubmit={(event) => { // 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, submitting et en resetting la recherche. Dans onSubmit() , nous appelons event.preventDefault() pour éviter toute redirection indésirable qui pourrait se produire. Ensuite, nous utilisons l' event pour extraire la requête de recherche via event.target[0].value .

Cependant, si la propriété event.target[0].value 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 routeChangeSubmit() et transmet la requête de recherche.

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 encore meilleure . 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 !

Pour ajouter de la personnalisation, nous devrons ajouter deux paramètres à nos composants Configure (de la bibliothèque InstantSearch) dans notre App.js , où tous nos paramètres de recherche sont câblés. Les deux paramètres que nous devrons ajouter sont :

• enablePersonalization : un booléen qui activera ou désactivera les résultats de personnalisation qui se produisent pour l'instance InstantSearch d'un utilisateur.
• userToken : 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 - user-1 .

Accédez à client/src/App.js et ajoutez les paramètres suivants à chaque balise <Configure> pour chaque route contenant une SearchBar ( / et /results/:query ).

Voici un exemple de ce à quoi cela ressemblerait dans la route home ( / ) :

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

Avec cela ajouté pour le composant Configure de chaque itinéraire, vous pourrez désormais voir des résultats personnalisés sur chaque recherche !

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 !