Avec Shopper Context, vous pouvez personnaliser les expériences d’achat en adaptant vos promotions, vos prix, vos recommandations de produits et le contenu diffusé sur votre site en fonction du comportement des acheteurs. Par exemple, si des acheteurs visitent votre site à partir d’un appareil mobile, offrez-leur une remise de 10% %.
Le hook nommé useUpdateShopperContext est utilisé pour définir le contexte de l’acheteur dans un site Kit Progressive Web App (PWA). L’implémentation par défaut de Shopper Context dans PWA Kit est une démonstration des capacités de personnalisation. Dans l’implémentation de démonstration décrite dans ce guide, nous utilisons des paramètres de requête pour activer un schéma de personnalisation qui modifie le contenu et les promotions des pages de liste de produits (PLP). Étendez notre implémentation avec un code personnalisé pour qu’il corresponde à votre propre stratégie de personnalisation.
Ce guide explique notre implémentation de démonstration de Shopper Context et comment le configurer et l’étendre pour alimenter la stratégie de personnalisation de votre site PWA Kit. La fonctionnalité décrite dans ce guide n’est pas prise en charge dans une boutique hybride.
Nous vous recommandons de tester la personnalisation dans un environnement autre que de production avant de déployer vos modifications en production. Vous pouvez également prévisualiser votre personnalisation à l’aide de l’aperçu de la boutique en ligne.
Avant d’exécuter les commandes de ce guide, remplacez les espaces réservés par des valeurs réelles. Les espaces réservés sont formatés ainsi : $PLACEHOLDER.
Exemple d’utilisation
Cette vidéo montre un exemple de personnalisation du contenu et des promotions avec l’implémentation de démonstration de Shopper Context.
::video{src=“tRLVE69bmVyFsNAWv4LSfo » title=“Contexte de l’acheteur dans PWA Kit » type=“vidyard »}
Prérequis
Pour utiliser la personnalisation avec Shopper Context :
Configurez votre site en fonction des types de personnalisation que vous souhaitez utiliser. Par exemple, configurez des groupes de clients dans Business Manager pour appliquer des règles de tarification, de produits ou de promotions personnalisés.
Configurer le contexte de l’acheteur
1. Créer un client privé SLAS
Dans l’interface utilisateur d’administration de Shopper Login and API Access (SLAS), créez un client privé SLAS. Reportez-vous à la section Créer un client SLAS.
La shopper_context_hooks cartridge agit comme une liste blanche pour s’assurer que seul le contexte que vous souhaitez utiliser pour les campagnes de personnalisation peut être défini à partir du client. Dans Business Manager :
Ajoutez-le shopper_context_hooks au chemin d’accès de la cartridge de votre site. Cette étape garantit la sécurité du site en empêchant les membres non autorisés de votre équipe de développement de site de définir toutes les étendues du contexte de l’acheteur.
Accédez à Administration > Sites > Gérer les sites.
Sélectionnez le site sur lequel vous souhaitez utiliser cette cartridge. Exemple d’identifiant de site : RefArch.
Cliquez sur l’onglet Paramètres.
Dans le champ Cartouches, ajoutez le nouveau chemin d’accès shopper_context_hooksde la cartouche. Ajoutez le nouveau chemin d’accès de la cartouche avant le chemin d’accès de app_storefront_base.
Exemple :shopper_context_hooks:app_storefront_base
Pour installer les dépendances de package, à partir du shopper_context_hooks répertoire, exécutez :
npm install
Configurez les identifiants client en les mettant à jour CLIENT_REGISTRY dans cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js
Créez un dw.json fichier dans le shopper_context_hooks répertoire. Dans cet exemple, remplacez les $ chaînes par des valeurs réelles ou définissez les variables d’environnement correspondantes.
Configurez le registre client en ajoutant une préférence de site personnalisée. Pour ce faire, importez le dans system-objecttype-extensions.xml Business Manager.
Accédez à Administration > Développement> du site Importer & et exporter.
Sous Importer & des fichiers d’exportation, cliquez sur Télécharger.
Cliquez sur Choisir un fichier.
Accédez à meta/meta.
Cliquez sur system-objecttype-extensions.xml.
Cliquez sur Télécharger sur le serveur.
Une fois le fichier téléchargé, cliquez sur Retour.
Sous Métadonnées, cliquez sur Importer.
Sélectionnez system-objecttype-extensions.xml et cliquez sur Suivant.
Une fois le fichier validé, cliquez sur Importer.
5. Mettre à jour la shopper_context_hooks cartridge CLIENT_REGISTRY à partir des préférences du site
Pour mettre à jour votre configuration, dans Business Manager :
Accédez à Outils >du marchand, Préférences> du site, Préférences >personnalisées, Préférences des hooks contextuels de l’acheteur.
Mettez à jour le champ Registre client à l’aide d’une configuration JSON. Saisissez l’identifiant client que vous avez configuré à l’étape 1 et les clés de contexte de l’acheteur que le client peut définir. Vous pouvez entrer n’importe laquelle des clés disponibles dans le type ShopperContext. Pour les identifiants client qui nécessitent des autorisations pour définir toutes les clés de contexte de l’acheteur, comme l’identifiant client utilisé pour l’aperçu de la boutique, utilisez la clé all.
Dans cet exemple, nous définissons des clés de contexte de l’acheteur pour deux identifiants client différents.
Les demandes provenant de l’identifiant aaaaaaaa-8536-4a39-acbb-8e7f1759f901 client ne peuvent définir que les 3 clés spécifiées dans le contexte de l’acheteur.
Les demandes provenant de l’identifiant bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff client peuvent définir toutes les clés dans le contexte de l’acheteur.
Ajoutez cette étendue de contexte d’acheteur au client privé SLAS : sfcc.shopper-context.rw. Reportez-vous à la section Créer un client SLAS.
Démonstration de l’implémentation de Shopper Context
Notre démo de Shopper Context utilise l’ensemble sourceCode via un paramètre de requête pour déclencher des modifications de contenu sur un PLP et de nouvelles promotions pour un groupe de clients spécifique. Vous pouvez voir la démo en action sur un PLP en ajoutant &sourcecode=instagram à l’URL.
Dans notre démo, nous utilisons l’accroche useUpdateShopperContext pour déclencher une campagne de personnalisation. Dans votre projet, ajoutez ou supprimez les paramètres de requête Shopper Context dans la SHOPPER_CONTEXT_SEARCH_PARAMS constante in app/constants.js pour obtenir vos propres personnalisations déclenchées par les paramètres de requête.
Par exemple, si vous avez ajouté des attributs personnalisés que vous souhaitez définir à l’aide de paramètres de requête, incluez-les en tant que paramètres de requête personnalisés dans app/constants.js. Dans cet exemple, nous ajoutons les paramètres suivants : deviceType et storeId.
1export const SHOPPER_CONTEXT_SEARCH_PARAMS = {2 // These are the default query parameters.3 sourceCode:{paramName: 'sourceCode'},4 geoLocation:{5 city:{paramName: 'city'},6 country:{paramName: 'country'},7 countryCode:{paramName: 'countryCode'},8 latitude:{paramName: 'latitude', type: SHOPPER_CONTEXT_FIELD_TYPES.DOUBLE},9 longitude:{paramName: 'longitude', type: SHOPPER_CONTEXT_FIELD_TYPES.DOUBLE},10 metroCode:{paramName: 'metroCode'},11 postalCode:{paramName: 'postalCode'},12 region:{paramName: 'region'},13 regionCode:{paramName: 'regionCode'}14},15 // These are examples of custom query parameters that you can optionally add.16 customQualifiers:{17 deviceType:{paramName: 'deviceType'}18},19 assignmentQualifiers:{20 storeId:{paramName: 'storeId'}21}22}, // More code here...
Étendre le contexte de l’acheteur
Si vous le souhaitez, vous pouvez ajouter une personnalisation au-delà de ce qui se trouve dans l’implémentation de démonstration de Shopper Context. Par exemple, vous pouvez personnaliser le contenu en fonction de la géolocalisation d’un acheteur.
Dans cet exemple de code, nous obtenons la géolocalisation d’un acheteur. Une fois que vous avez obtenu la géolocalisation, vous pouvez appliquer la personnalisation de votre choix. Exemple :
Pour New York, États-Unis : 20% de réduction sur les hauts pour femmes.
Pour Boston, États-Unis : 15% de réduction sur les hauts pour femmes.
1// ... Default imports in the hook2import{useEffect, useState}from 'react'34export const useUpdateShopperContext = ()=>{5 // ... Default code in the hook6 const[location, setLocation] = useState({latitude: null, longitude: null})78 // Get the latitude and longitude of the shopper's geolocation using the browser's navigator.geolocation API.9 const fetchLocation = ()=>{10 if(typeof navigator !== 'undefined' && navigator.geolocation){11 navigator.geolocation.getCurrentPosition(12(position)=>{13 setLocation({14 latitude: position.coords.latitude,15 longitude: position.coords.longitude16})17},18(err)=>{19 console.error(err.message)// Handle errors gracefully20},21{22 enableHighAccuracy: true, // Try to get the most accurate location23 timeout: 10000, // Time in milliseconds before timing out24 maximumAge: 60000 // Cache the location for 1 minute25}26)27}else{28 console.error('Geolocation is not supported by this browser.')29}30}3132 fetchLocation()3334 // Update the Shopper Context when the latitude and/or longitude changes.35 useEffect(()=>{36 if(location.latitude && location.longitude){37 const newShopperContext = {38 geoLocation:{39 latitude: location.latitude,40 longitude: location.longitude41}42}43 handleShopperContextUpdate(shopperContext, newShopperContext)44}45}, [location.latitude, location.longitude])46}
Résoudre les problèmes liés au contexte de l’acheteur
Cette section propose une solution pour une erreur courante que vous pouvez rencontrer lors de l’utilisation de Shopper Context.
Personnalisation incorrecte ou manquante
Cause potentielle : La personnalisation dans Business Manager n’est pas configurée correctement.
Solution suggérée : Vérifiez que le déclencheur de contexte que vous définissez est associé à une campagne de personnalisation dans Business Manager.
j