English (US) Italiano Português do Brasil

Guide des modèles de badging

S’abonner

Le badging de campagne est un outil utile pour les sites de commerce électronique afin d’accroître la visibilité de produits ou de promotions spécifiques, en créant un sentiment d’urgence ou d’excitation, et en encourageant les visiteurs à effectuer un achat.

Dynamic Yield propose deux modèles de badges à code personnalisé qui vous permettent d’ajouter automatiquement des badges aux produits sur les pages de catégories et dans les résultats de recherche :

  • PLP Badging basé sur les recommandations : badger les produits en fonction de stratégies de recommandation, comme Affinity (affinité) ou Recently Viewed (vu récemment).
    Par exemple : « Sélectionné pour vous » ou « Parce que vous aimez le camping ».
  • Badging PLP basé sur la preuve sociale : badging de produits basé sur la performance (preuve sociale).
    Par exemple : « Record des ventes » ou « Plus de 1000 exemplaires vendus ».

Screen_Shot_2023-04-24_at_16.42.24.png

Pour utiliser les modèles, suivez les étapes suivantes.

Étape 1 : Définir les sélecteurs CSS pour les fiches et les images de produits

Définir le sélecteur de la fiche produit

Le sélecteur HTML renvoie un tableau de toutes les fiches produit de votre page de catégorie. Pour définir le sélecteur, inspectez l’une des fiches produit et accédez au conteneur supérieur de cette fiche produit. Vous pouvez également utiliser la boîte bleue comme guide visuel : vous êtes sur le bon conteneur lorsque le cadre bleu met en évidence l’ensemble de la fiche produit. Choisissez un sélecteur qui permet d’identifier facilement toutes les fiches produit de votre page de catégorie.

Si vous utilisez une classe comme sélecteur, assurez-vous qu’il ne s’agit pas d’une classe dynamique qui change à chaque page. Si c’est le cas, optez pour un autre sélecteur qui n’est pas dynamique.

Exemples :

DY Demo Shop › selector › class name › .col-sm-12

Screen_Shot_2023-04-24_at_17.17.53.pngData Attributes as selectors › selector › attribute › [data-automation=”product-grid-item”]

Screen_Shot_2023-04-24_at_17.19.47.png

Valider le sélecteur

Vous pouvez vérifier que le sélecteur renvoie des produits sur votre page de catégorie en insérant votre classe dans l’extrait de code suivant et en le collant dans la console.

Ce code renvoie un tableau de fiches produits :

document.querySelectorAll('example_ProductCard_Selector')

Ce code renvoie la première fiche produit :

document.querySelectorAll('example_ProductCard_Selector')[0]

Screen_Shot_2023-04-27_at_16.26.43.png

Définir le sélecteur d’image

Définissez le sélecteur CSS du conteneur d’image dans le conteneur de la fiche produit. Il s’agit du sélecteur du conteneur qui inclut la balise <img>, et non du sélecteur de la balise <img> elle-même.

Remarque :

  • Les conteneurs valides sont les suivants : <div>, <article>, <figure> 
  • Les conteneurs non valides incluent : <a> and <img>

Valider le sélecteur :

Vérifiez que le sélecteur que vous avez défini renvoie l’image du premier produit sur votre page de catégorie en insérant vos sélecteurs dans l’extrait de code suivant, puis en le collant dans la console.

Ce code renvoie l’image de la première fiche produit :

document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('example_productImage_Selector')

Screen_Shot_2023-04-27_at_17.03.00.png

Étape 2 : Définir l’emplacement de l’UGS

Il existe deux méthodes pour définir l’emplacement de l’UGS :

Option 1 : Utiliser l’attribut data (recommandé)

Ce modèle prêt à l’emploi a été développé pour les clients qui ont des UGS sur les fiches produits en tant qu’attribut de données. Définissez le nom de l’attribut de données contenant l’UGS du produit. L’attribut de données peut avoir différents noms, mais il doit être facilement identifiable en tant qu’UGS. Vous pouvez le valider en vérifiant la valeur correspondante dans votre flux de produits Dynamic Yield afin de vous assurer que l’UGS renvoie les informations attendues sur le produit.

Validez la définition de l’attribut de données :
Vérifiez que le nom de l’attribut de données est correct en insérant le nom de votre attribut de données dans l’extrait de code suivant, puis en le collant dans la console.

Ce code renvoie l’UGS de la première fiche produit : 

document.querySelectorAll('example_ProductCard_Selector')[0].getAttribute('example_attribute_name')

Exemple : 

DY Demo Shop › Attribute name = data-dy-sku

Screen_Shot_2023-04-30_at_13.47.07.png

Option 2 : URL du produit

Si l’option 1 n’est pas possible et que l’URL du produit dans chaque carte comprend l’UGS du produit de manière claire, utilisez cette option.

Les délimiteurs doivent être spécifiques. Par exemple : product-id=SKU/ › product-id et /
Lorsque les délimiteurs ne sont pas spécifiques, l’expression régulière ne renvoie pas l’UGS.

Exemple :

Délimiteurs : « p/ » et « » (chaîne vide)

URL : https://www.demoshop.net/de/p/90630584

Renvoyé : SKU 90630584 

Screen_Shot_2023-04-30_at_13.53.35.png

Exemple avec l’URL du produit et des délimiteurs qui ne fonctionnent pas :

Délimiteurs : « - » et « Black » 

URL du produit : https://www.demostore.com/eu/shop/edits/bestsellers/stride-waterproof-parka-SB4932_Black.html
Raison : « - » est répété plusieurs fois dans l’URL et « Black » est dynamique et ne fonctionnera pas pour tous les produits. Ce scénario a pour conséquence de ne rien renvoyer ou de renvoyer un produit qui n’est pas l’UGS souhaitée. 

Validez les délimiteurs :
Vous pouvez vérifier que vos délimiteurs et votre méthode fonctionnent en ajoutant les délimiteurs et la classe Items dans l’extrait de code suivant, puis en l’insérant dans la console de votre API.

Ce code renvoie l’UGS :

const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('a').getAttribute('href').match(new RegExp(regexSetup, ''))[2]

Option 3 : URL de l’image

Si l’option 1 n’est pas possible et que l’URL de l’image du produit pour chaque carte contient l’UGS du produit de manière claire, utilisez cette option.

Les délimiteurs doivent être spécifiques. Par exemple : product-id=SKU/ › product-id et /
Lorsque les délimiteurs ne sont pas spécifiques, l’expression régulière ne renvoie pas l’UGS.

Exemple :

Délimiteurs : « img/p/ » et « » (chaîne vide)

URL : https://static.demoshop.com/img/p/6104478-18029579-large.jpg

Renvoyé : SKU 6104478 

Screen_Shot_2023-04-30_at_14.09.03.png

Validez les délimiteurs :
Vous pouvez vérifier que vos délimiteurs et votre méthode fonctionnent en ajoutant les délimiteurs et la classe Items dans l’extrait de code suivant, puis en l’insérant dans la console de votre API.

Ce code renvoie l’UGS :

const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('img').getAttribute('src').match(new RegExp(regexSetup, ''))[2]

Comprendre les paramètres des délimiteurs de chaîne pour les URL

Si vous utilisez l’URL du produit ou l’URL de la page, vous devez indiquer à Dynamic Yield où chercher l’UGS souhaitée. Par exemple, si l’URL ressemble à votresite.com/produit/123456/, vous devez définir où commence et où finit l’UGS, comme suit : 

  • Dans ce cas, le « délimiteur de chaîne avant l’UGS » est tout ce qui précède directement l’UGS elle-même, comme « /produit/ ». 
  • Le « délimiteur de chaîne après l’UGS » est tout ce qui se trouve directement après l’UGS, comme « / ».

N’oubliez pas que ces délimiteurs doivent être spécifiques. Si l’URL contient d’autres informations, comme le nom du produit (votresite.com/produit/grey-mens-shorts-123456/), elle ne fonctionnera pas.

Vous n’avez pas besoin de définir ces deux variables si vous utilisez l’option d’attributs de données recommandée.

Étape 3 : Définissez votre logique de badging

Vous pouvez badger en fonction d’une stratégie de recommandation ou de la performance du
produit :

  • Stratégie de recommandation : sélectionnez une stratégie. En fonction de la réponse de la recommandation, les produits de la page de la catégorie sont badgés. 
  • Performance du produit : définir des critères de preuve sociale. Les produits qui répondent aux critères sont badgés. 

Étape 4 : Créer le design de votre badge

Utilisez vos outils de conception préférés pour créer le modèle de badge qui répond à vos besoins.

Résolution des problèmes

Si vous avez suivi toutes les étapes correctement et validé votre travail, et que vous rencontrez toujours des problèmes avec votre cas d’utilisation, il est probable que le problème se situe en dehors du modèle lui-même.

Pour le badging de recommandation :  

  • Vérifiez que votre stratégie renvoie effectivement des produits sur la page ciblée et que les produits de la stratégie de recommandation existent sur la page. 
  • Si vous utilisez la popularité comme stratégie, sélectionnez Popular dans Category pour augmenter les chances que les produits soient badgés. 

Pour le badging de preuve sociale : 

  • Vérifiez que l’API de performance des produits est activée pour votre site Dynamic Yield (dans les paramètres généraux).  
  • Vérifiez que l’API de performance des produits renvoie effectivement des données. 

Vous avez encore des questions ou des préoccupations ? Contactez l’équipe en charge de votre compte.