Personnalisation avec le contexte des acheteurs

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.

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 »}

Pour utiliser la personnalisation avec Shopper Context :

Dans Business Manager :

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

  • Installez et téléchargez la cartouche.

    • Clonez le référentiel de hooks Shopper Context. Le nom du répertoire de haut niveau est shopper_context_hooks.

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

    • Dans le shopper_context_hooks répertoire, exécutez :

      npm run uploadCartridge

Pour plus d’informations sur le téléchargement de la cartridge, reportez-vous à la section Téléchargement de code pour Storefront Reference Architecture (SFRA).

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.

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.

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.

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.

Cette section propose une solution pour une erreur courante que vous pouvez rencontrer lors de l’utilisation de Shopper Context.

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.