Membres de l'équipe
Selon la taille de votre entreprise, certains de ces rôles peuvent être assurés par la même personne. Dans ce sprint, il est important d'identifier les personnes suivantes et de les solliciter.
Construire l’interface utilisateur
Dans ce sprint, vous allez utiliser les bibliothèques d’Algolia pour construire une interface utilisateur (front end) en utilisant les mockups (maquettes) que vous avez créées. Une fois les tâches ci-dessous complétées, vous pouvez passer au sprint suivant.
Chef de projet
Planifier et gérer le projet
Ingénieurs front-end
Développer l’interface utilisateur, ses éléments visuels et interactifs
Intégration Shopify
Configuration Shopify | Pré-requis | Intégration recommandée |
Utilisation des templates Shopify | Pas de personnalisation requise (le style peut être personnalisé) | Utilisez la bibliothèque InstantSearch via le plugin |
Utilisation des templates Shopify | Personnalisation requise (Ajout et suppression de widgets) | Utilisez la bibliothèque InstantSearch via le plugin et éditez dans le Shopify theme editor |
Storefront personnalisé ou Shopify headless | Personnalisation requise (Ajout et suppression de widgets) | Si vous utilisez un storefront personnalisé ou Shopify headless, vous pouvez utiliser instantsearch directement dans votre code |
Magento
Configuration de Magento | Pré-requis | Intégration recommandée |
Magento Standard | Pas de personnalisation requise (le style peut être personnalisé) | Vous pouvez activer le menu autocomplete, les pages de catégories et les pages de résultats directement depuis le plugin. |
Magento Standard | Personnalisation requise (Ajout et suppression de widgets) | Pour personnaliser la page de résultats, les pages de catégories ou le menu autocomplete, vous devez installer l’extension customAlgolia et modifier les templates ou ajouter des événements front-end |
Magento Headless | Personnalisation requise (Ajout et suppression de widgets) | Si vous utilisez un Magento headless, vous pouvez utiliser InstantSearch directement dans votre code. |
Salesforce Commerce Cloud
Configuration SFCC | Pré-requis | Intégration recommandée |
SFCC Standard | Personnalisation requise (Ajout et suppression de widgets) | Vous pouvez personnaliser votre implémentation d’InstantSearch en utilisant la Cartridge SFCC |
SFCC Headless | Pas de personnalisation requise (le style peut être personnalisé) | Vous pouvez connecter votre frontend à SFCC Headless en utilisant la Boiler Algolia, un front-end React ou Mobify |
Si vous n’utilisez pas les intégrations ci-dessus, pour toute implémentation de résultats de recherche ou de pages de catégories, nous recommandons l’utilisation d’InstantSearch conjointement avec Autocomplete. L’association de ces 2 bibliothèques améliore l’expérience des développeurs ainsi que l’expérience des utilisateurs. InstantSearch est disponible dans les frameworks suivants :
InstantSearch JS
React InstantSearch
Vue InstantSearch
Angular InstantSearch
InstantSearch iOS
InstantSearch Android
InstantSearch vous propose des widgets dont vous pouvez personnaliser le style. Si vous souhaitez modifier le HTML d’un widget, il est recommandé d’utiliser un connecteur afin de pouvoir préserver le query state (l’état de la requête). Si vous avez besoin de réaliser une personnalisation plus avancée, vous pouvez créer un widget (complètement) custom.
Rendez-vous à la section build the search UI pour en savoir plus.
Autocomplete
Pour réaliser une expérience d’autocomplete, incluant des Query Suggestions, la bibliothèque Autocomplete est faite pour vous, en particulier sur mobile, où l’espace disponible est plus limité.
Une implémentation d’Autocomplete est faite de sources et de plugins, et les plugins peuvent ajouter une source et réagir à des changements d’état.
Bibliothèque Recommend
Recommend est une bibliothèque UI (destinée à la construction des interfaces utilisateur) Javascript pour le produit Algolia Recommend, qui permet de proposer des recommandations sur votre site (exemple : des carrousels de produits similaires et produits fréquemment achetés ensemble). Recommend propose 2 composants UI, un pour chaque modèle d’Algolia Recommend: Fréquemment acheté ensemble (Frequently Bought Together) et Produits similaires (Related Products).
Vous pouvez facilement amorcer votre implémentation InstantSearch en utilisant create-instantsearch-app. Le fichier Readme InstantSearch.js, la sandbox de démonstration e-commerce et le guide de démarrage rapide sont également de bons points de départ.
InstantSearch JS
React InstantSearch
Vue InstantSearch
Angular InstantSearch
InstantSearch iOS
InstantSearch Android
Autocomplete
Pour démarrer avec Autocomplete, lisez les concepts essentiels pour en apprendre davantage sur ses principes techniques, tels que les sources et le state (l’état). Ensuite, n’hésitez pas à essayer le playground dans lequel vous pouvez dupliquer une implémentation de base et la tester.
Une fois prêt, vous pouvez installer la bibliothèque et démarrer votre implémentation.
Envoyer vos événements est essentiel pour alimenter vos Analytics de clics et de conversions, et activer les fonctionnalités avancées d’Algolia.
Il est très fortement recommandé d’implémenter les événements au moment de l’implémentation de votre frontend (interface utilisateur). Pourquoi ? Car sans cela vous ne tirerez pas le meilleur parti de votre implémentation d’Algolia dès le départ, et vous gagnerez du temps à réaliser cette étape pendant l’implémentation initiale plutôt que d’avoir à se remobiliser plus tard. N’oubliez pas que vous pouvez utiliser le document de planification établi lors du sprint de conception du Design.
Intégrations
Segment
Si vous utilisez les événements supportés par Algolia, vous pouvez ajouter les informations relatives à Algolia incluant la queryID, l’index et l’objectID.
Vous pouvez ensuite ajouter la destination Algolia dans le dashboard Segment. Si vous n’utilisez pas les événements supportés à ce stade, vous pouvez les implémenter ou utiliser la bibliothèque Algolia Insights documentée plus haut.
Google Tag Manager
Pour commencer, importez le template Algolia Search Insights officiel.
Ensuite, vous pouvez configurer les Tags pour envoyer des événements à l’insights API Algolia. Enfin, utilisez vos Triggers existants pour les clics et les conversions, ou créez-en de nouveaux.
mParticle
Si vous gérez déjà vos événements avec mParticle, utilisez l’intégration officielle Algolia Insights disponible dans le catalogue mParticle afin d’envoyer vos événements existants.
Insights Middleware
Si vous utilisez InstantSearch.js ou Vue InstantSearch et que vous envoyez vos événements dans cet environnement, la meilleure option est l’Insights middleware. Il est aussi disponible avec React Hooks, et pour envoyer des événements avec React InstantSearch, vous pouvez suivre ce guide.
Autocomplete
Algolia propose l’envoi d’événements directement depuis la bibliothèque Autocomplete et il est possible de l’activer via un plugin.
Les clients API
Nous recommandons l’utilisation d’un client API pour envoyer vos événements dans les cas suivants :
- Si vous utilisez InstantSearch uniquement en Vanilla Javascript ou Vue, et que vous voulez envoyer vos événements depuis le frontend, la bibliothèque Insights est la meilleure solution.
- Vous pouvez utiliser n’importe quel client API pour envoyer vos événements depuis votre backend.