9.3 Préparation de la configuration de la propriété du client de collecte de données Adobe Experience Platform et du SDK Web pour Offer Decisioning

REMARQUE

L’utilisation d’Offer Decisioning dans le SDK web d’Adobe Experience Platform est actuellement possible en accès anticipé pour certains utilisateurs. Cette fonctionnalité n’est pas disponible pour toutes les organisations IMS.

9.3.1 Mise à jour de la matrice de données

Dans Exercice 0.2, vous avez créé votre propre Datastream. Vous avez ensuite utilisé le nom --demoProfileLdap-- - Demo System Datastream.

Dans cet exercice, vous devez configurer Datastream pour utiliser Offer Decisioning.

Pour ce faire, accédez à https://experience.adobe.com/#/data-collection/. Vous verrez alors ceci. Cliquez sur Datastreams ou Flux de données (bêta).

Dans le coin supérieur droit de votre écran, sélectionnez le nom de votre environnement de test, qui doit être --aepSandboxId--.

Cliquez sur l’icône Edge Configuration dans le volet de navigation de gauche.

Recherchez votre Datastream, qui est nommé --demoProfileLdap-- - Demo System Datastream. Cliquez sur Datastream pour l’ouvrir.

WebSDK

Vous verrez alors ceci. Cliquez sur en regard de Adobe Experience Platform puis cliquez sur Modifier.

WebSDK

Pour activer Offer Decisioning, cochez la case correspondant à Offer Decisioning. Cliquez sur Enregistrer.

WebSDK

Votre Datastream est maintenant prêt à travailler avec Offer Decisioning.

WebSDK

9.3.2 Configuration de la propriété du client de collecte de données Adobe Experience Platform pour demander des offres personnalisées

Accédez à https://experience.adobe.com/#/data-collection/, à Client. Recherchez vos propriétés de collecte de données, qui sont nommées --demoProfileLdap-- - Demo System (DD/MM/YYYY). Ouvrez la propriété du client de collecte de données pour le Web.

WebSDK

Dans la propriété , accédez à Règles et ouvrez la règle. Page vue.

WebSDK

Cliquez pour ouvrir la Action SDK Web AEP - Envoyer l’événement.

WebSDK

Vous verrez alors ceci. L’option de menu pour Portées de décision.

WebSDK

Pour chaque requête envoyée à la périphérie et à Adobe Experience Platform, il est possible de fournir une ou plusieurs Portées de décision. A Portée de décision est une combinaison de deux éléments :

  • ID de décision
  • Identifiant d’emplacement

Regardons d'abord où vous pouvez trouver ces deux éléments.

9.3.2.1 Récupérez votre Identifiant de référencement

Le Identifiant de référencement identifie l’emplacement et le type de ressource requis. Par exemple, l’image principale de la page d’accueil du site web Luma correspond à la variable Identifiant de référencement pour Web - Image.

REMARQUE

Dans le cadre du module 6, vous avez déjà configuré une activité de ciblage d’expérience Adobe Target qui modifiera l’image de l’emplacement du héros sur la page d’accueil, comme vous pouvez le voir dans la capture d’écran. Pour le plaisir de l’exercice, vous allez maintenant faire apparaître vos offres sur l’image sous l’image principale, comme indiqué dans la capture d’écran.

WebSDK

Pour rechercher la variable Identifiant de référencement pour Web - Image Accédez à Adobe Journey Optimizer en accédant à Adobe Experience Cloud. Cliquez sur Journey Optimizer.

ACOP

Vous serez redirigé vers le Accueil dans Journey Optimizer. Tout d’abord, assurez-vous d’utiliser l’environnement de test approprié. L’environnement de test à utiliser est appelé --aepSandboxId--. Pour passer d’un environnement de test à un autre, cliquez sur Production (VA7) et sélectionnez l’environnement de test dans la liste. Dans cet exemple, l’environnement de test est nommé Activation AEP FY22. Vous serez alors dans le Accueil affichage de votre environnement de test --aepSandboxId--.

ACOP

Ensuite, accédez à Composants puis à Emplacements. Cliquez sur le bouton Web - Image placement pour afficher ses détails.

WebSDK

Comme vous pouvez le voir dans l’image ci-dessus, dans cet exemple, la variable Identifiant de référencement is xcore:offer-placement:14bf09dc4190ebba. Notez les Identifiant de référencement pour votre emplacement Web - Image comme vous en aurez besoin lors du prochain exercice.

9.3.2.2 Récupérez votre ID de décision

Le ID de décision identifie la combinaison d’offres personnalisées et d’offres de secours que vous souhaitez utiliser. Dans l’exercice précédent, vous avez créé le vôtre. Décision et son nom --demoProfileLdap-- - Luma Decision.

Pour rechercher la variable ID de décision pour votre --demoProfileLdap-- - Luma Decision, accédez à https://platform.adobe.com.

Ensuite, accédez à Offres puis accédez à Décisions. Cliquez pour sélectionner votre Décision, qui est nommé --demoProfileLdap-- - Luma Decision.

WebSDK

Comme vous pouvez le voir dans l’image ci-dessus, dans cet exemple, la variable ID de décision is xcore:offer-activity:14c052382e1b6505. Notez les ID de décision pour votre décision --demoProfileLdap-- - Luma Decision comme vous en aurez besoin lors du prochain exercice.

Maintenant que vous avez récupéré les deux éléments dont vous avez besoin pour créer une Portées de décision, vous pouvez passer à l’étape suivante, qui implique de coder la portée de la décision.

9.3.2.3 Codage BASE64

Le Portée de décision vous devez entrer une chaîne codée en BASE64. Cette chaîne codée en BASE64 est une combinaison de la chaîne Identifiant de référencement et le ID de décision, comme vous pouvez le voir ci-dessous.

{
  "activityId":"xcore:offer-activity:14c052382e1b6505",
  "placementId":"xcore:offer-placement:14bf09dc4190ebba"
}

Le Portée de décision peut être généré de deux façons :

  • Utilisez un service public comme https://www.base64encode.org/. Saisissez le code JSON comme mentionné ci-dessus, puis cliquez sur Encode et vous obtiendrez la chaîne codée BASE64 ci-dessous.

    WebSDK

  • Récupérez la chaîne codée BASE64 à partir de Adobe Experience Platform. Accédez à Décisions et cliquez sur pour ouvrir le Décision, qui est nommé --demoProfileLdap-- - Luma Decision.

    WebSDK

    Après ouverture --demoProfileLdap-- - Luma Decision, vous verrez ceci. Localisation de l’emplacement Web - Image et cliquez sur le bouton Copier bouton . Cliquez ensuite sur Étendue de décision codée. Le Portée de décision est désormais copié dans le presse-papiers.

    WebSDK

Ensuite, revenez à Launch, à votre action. SDK Web AEP - Envoyer l’événement.

WebSDK

Collez la portée de décision codée dans le champ de saisie.

WebSDK

Enregistrer vos modifications dans l’action SDK Web AEP - Envoyer l’événement en cliquant Conserver les modifications.

WebSDK

Cliquez ensuite sur Enregistrer ou Enregistrer dans la bibliothèque

WebSDK

Dans la collecte de données Adobe Experience Platform, accédez à Flux de publication et ouvrez votre Bibliothèque de développement qui est nommé Principal. Cliquez sur + Ajouter toutes les ressources modifiées puis cliquez sur Enregistrement et création pour le développement. Vos modifications seront désormais publiées sur votre site web de démonstration.

WebSDK

Chaque fois que vous chargez une Page générale maintenant, comme par exemple la page d’accueil du site web de démonstration, Offer Decisioning évalue l’offre applicable et renvoie une réponse au site web avec les détails de l’offre à afficher. L’affichage de l’offre sur le site web nécessite une configuration supplémentaire, ce que vous allez faire à l’étape suivante.

9.3.3 Configuration de la propriété cliente de collecte de données Adobe Experience Platform pour recevoir et appliquer des offres personnalisées

Accédez à https://experience.adobe.com/#/data-collection/, à Propriétés. Recherchez vos propriétés de collecte de données, qui sont nommées --demoProfileLdap-- - Demo System (DD/MM/YYYY). Ouvrez la propriété Collecte de données pour le Web.

WebSDK

Dans la propriété , accédez à Règles.

WebSDK

Rechercher et ouvrir la règle Décision reçue.

WebSDK

Vous verrez alors ceci. Ouvrir l’action Placez l’offre sur la page.

WebSDK

Cliquez sur Ouvrir l’éditeur.

WebSDK

Remplacez le code en collant le code ci-dessous dans l’éditeur.

if(!Array.isArray(event.decisions)) {
  console.log('No decisions returned')
  return;
}
console.log("decision",event.decisions)

event.decisions.forEach(function(payload) {
  payload.items.forEach(function(item){
    console.log("Response from Offer Decisioning ", item.data.content);

    var element = document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div");
    if(!element){
      console.log("Offer Placement Area Selector not found")
      return;
    }
    if(!item.data){
      return
    }
    //check if offer already exists
    var offer = document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div");
    if(!offer){
      element.insertAdjacentHTML('afterbegin', item.data.content)
    }
    else {
      console.log("item.data.deliveryURL: " + item.data.deliveryURL)
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.background="url('"+item.data.deliveryURL+"')";
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.backgroundRepeat="no-repeat";
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.backgroundPosition="center center";
      document.querySelector("#root > div > div > div.app-content > div > section.feature_part.padding_top > div > div.row.align-items-center.justify-content-between > div.col-lg-7.col-sm-6.\\30  > div").style.backgroundSize = "contain";
    }
  })
});

Les lignes 26-27-28-29 appliqueront l'image qui est renvoyée par Offer decisioning au site web. Cliquez sur Enregistrer.

WebSDK

Cliquez sur Conserver les modifications.

WebSDK

Cliquez ensuite sur Enregistrer ou Enregistrer dans la bibliothèque

WebSDK

Dans la collecte de données Adobe Experience Platform, accédez à Flux de publication et ouvrez votre Bibliothèque de développement qui est nommé Principal. Cliquez sur + Ajouter toutes les ressources modifiées puis cliquez sur Enregistrement et création pour le développement. Vos modifications seront désormais publiées sur votre site web de démonstration.

WebSDK

Avec cette modification, cette règle dans la collecte de données Adobe Experience Platform écoute désormais la réponse de l’Offer decisioning qui fait partie de la réponse du SDK Web. Lorsque la réponse est reçue, l’image de l’offre s’affiche sur la page d’accueil.

En regardant le site web de démonstration, vous verrez que cette image sera remplacée maintenant :

REMARQUE

Dans le cadre du module 6, vous avez déjà configuré une activité de ciblage d’expérience Adobe Target qui modifiera l’image de l’emplacement du héros sur la page d’accueil, comme vous pouvez le voir dans la capture d’écran. Pour le plaisir de l’exercice, vous allez maintenant faire apparaître vos offres sur l’image sous l’image principale, comme indiqué dans la capture d’écran.

WebSDK

Et au lieu des images par défaut du site web Luma, vous verrez désormais une offre comme celle-ci. Dans ce cas, l’offre de secours s’affiche.

WebSDK

Vous avez maintenant configuré 2 types de personnalisation :

  • 1 activité de ciblage d’expérience à l’aide d’Adobe Target dans le module 6
  • Mise en oeuvre d’un Offer decisioning à l’aide de votre propriété de collecte de données

Au cours de l’exercice suivant, vous verrez comment combiner vos offres et décisions créées dans Adobe Journey Optimizer avec une activité de ciblage d’expérience Adobe Target.

Étape suivante : 9.4 Combinaison d’Adobe Target et d’Offer Decisioning

Revenir au module 9

Revenir à tous les modules

Sur cette page