Diffuser des offres à l’aide de l’API Edge Decisioning edge-decisioning-api
Prise en main et prérequis edge-overview-and-prerequisites
Le SDK web d’Adobe Experience Platform est une bibliothèque JavaScript côté client qui permet aux clients d’Adobe Experience Cloud d’interagir avec les différents services d’Experience Cloud à l’aide d’Experience Platform Edge Network.
Le SDK web Experience Platform prend en charge la demande des solutions de personnalisation auprès d’Adobe, dont la gestion des décisions, ce qui vous permet de récupérer et de générer des offres personnalisées que vous avez créées à l’aide des API ou de la bibliothèque des offres. Pour obtenir des instructions plus détaillées, consultez la documentation sur la création d’une offre.
Vous pouvez mettre en œuvre la gestion des décisions de deux façons différentes à l’aide du SDK web de Platform. La première est destinée aux développeurs et nécessite des connaissances en matière de sites web et de programmation. L’autre méthode consiste à utiliser l’interface utilisateur d’Adobe Experience Platform pour configurer les offres. Seul un petit script à référencer dans l’en-tête de la page HTML sera nécessaire.
Pour plus d’informations sur la diffusion d’offres personnalisées à l’aide du SDK web Adobe Experience Platform, consultez la documentation Adobe Experience Platform sur la gestion des décisions.
SDK web Adobe Experience Platform aep-web-sdk
Le SDK web de Platform remplace les SDK suivants :
- Visitor.js
- AppMeasurement.js
- AT.js
- DIL.js
Le SDK n’a pas combiné ces bibliothèques. Il s’agit d’une nouvelle implémentation à partir de zéro. Pour l’utiliser, procédez comme suit :
-
Assurez-vous que votre entreprise dispose des autorisations appropriées pour utiliser le SDK et que vous les avez configurées correctement.
-
Configurez votre flux de données dans l’onglet Collecte de données de votre compte dans Adobe Experience Cloud.
-
Installez le SDK. Pour ce faire, plusieurs méthodes sont à votre disposition. Elles sont décrites sur la page Installer le SDK. La présente page décrit chacune des méthodes d’implémentation.
Pour utiliser le SDK, vous devez disposer d’un schéma et d’un flux de données définis.
Pour personnaliser les offres, vous devez configurer séparément vos options de personnalisation/profils.
Pour configurer le SDK pour la gestion des décisions, procédez à l’une des deux étapes ci-dessous :
Option 1 : installer l’extension de balise et l’implémentation à l’aide de Launch
Cette approche est plus conviviale pour les personnes qui ont moins d’expérience en matière de codage.
-
Installez et configurez l’extension SDK web Adobe Experience Platform avec le train de données créé lors de la sélection de la configuration dans la liste déroulante « Train de données ». Consultez la documentation relative aux extensions.
-
Créez les Éléments de données nécessaires. Au minimum, vous devez créer un mappage d’identité SDK web Platform et un élément de données objet XDM du SDK web Platform.
-
Créez vos Règles en procédant comme suit :
Ajoutez une action d’envoi d’événement pour le SDK web Platform et ajoutez les portées de décision appropriées à la configuration de cette action.
-
Créez et publiez une bibliothèque contenant toutes les règles, éléments de données et extensions pertinents que vous avez configurés.
Option 2 : implémenter manuellement à l’aide de la version autonome préconfigurée
Pour utiliser la gestion des décisions avec l’installation autonome préconfigurée du SDK Web, procédez comme suit. Ce guide part du principe qu’il s’agit de votre première implémentation du SDK. Il se peut donc que certaines étapes ne vous concernent pas. Ce guide suppose également que vous possédez déjà des connaissances en matière de développement.
Incluez le fragment de code JavaScript suivant provenant de la section « Option 2 : version autonome préconfigurée » sur cette page dans la section <head> de votre page HTML.
javascript
<script>
!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
[]).push(o),n[o]=function(){var u=arguments;return new Promise(
function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
(window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js" async></script>
Pour configurer le SDK, vous aurez besoin des deux identifiants suivants de votre compte Adobe : edgeConfigId et orgId. edgeConfigId est le même que votre ID de flux de données, que vous avez configuré dans les prérequis.
Pour trouver votre edgeConfigID/ID de flux de données, accédez à Collecte de données et sélectionnez votre flux de données. Pour trouver votre orgId, accédez à votre profil.
Configurez le SDK dans JavaScript en suivant les instructions fournies sur cette page. Vous utiliserez toujours votre edgeConfigId et orgId dans la fonction de configuration. La documentation décrit également les paramètres facultatifs qui existent pour votre configuration. Votre configuration finale peut se présenter comme suit :
javascript
alloy("configure", {
"edgeConfigId": "12345678-0ABC-DEF-GHIJ-KLMNOPQRSTUV",
"orgId":"ABCDEFGHIJKLMNOPQRSTUVW@AdobeOrg",
"debugEnabled": true,
"edgeDomain": "edge.adobedc.net",
"clickCollectionEnabled": true,
"idMigrationEnabled": true,
"thirdPartyCookiesEnabled": true,
"defaultConsent":"in"
});
Installez l’extension Chrome Debugger à des fins de débogage. Téléchargez-la ici : https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob
Ensuite, connectez-vous à votre compte dans le débogueur. Accédez aux Journaux et vérifiez que vous êtes connecté à l’espace de travail approprié. Copiez à présent la version codée en base64 de la portée de décision de votre offre.
Lors de la modification de votre site web, incluez le script avec la configuration et la fonction sendEvent pour envoyer la portée de décision à Adobe.
Exemple :
javascript
alloy("sendEvent", {
"decisionScopes":
[
"eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
]
});
Consultez l’exemple suivant illustrant comment gérer la réponse :
javascript
alloy("sendEvent", {
"decisionScopes":
[
"eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
]
}).then(function(result) {
Object.entries(result).forEach(([key, value]) => {
console.log(key, value);
});
});
Vous pouvez utiliser le débogueur pour vérifier que vous êtes bien connecté au réseau Edge.
Reportez-vous à la façon dont vous avez créé votre offre et à la mise en forme utilisée. En fonction des critères rencontrés dans la décision, une offre vous sera renvoyée contenant les informations que vous avez spécifiées lors de sa création dans Adobe Experience Platform.
Dans cet exemple, le code JSON à renvoyer est le suivant :
json
{
"name":"ABC Test",
"description":"This is a test offer",
"link":"https://sampletesting.online/",
"image":"https://sample-demo-URL.png"
}
Gérez l’objet de réponse et analysez les données dont vous avez besoin. Comme vous pouvez envoyer plusieurs portées de décision en un seul appel sendEvent, votre réponse peut être légèrement différente.
json
{
"id": "abrxgl843d913",
"scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
"items":
[
{
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"etag": "1",
"schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
"data": {
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"format": "application/json",
"language": [
"en-us"
],
"content": "{\"name\":\"ABC Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
}
}
]
}
]
}
json
{
"propositions":
[
{
"renderAttempted": false,
"id": "e15ecb09-993e-4b66-93d8-0a4c77e3d913",
"scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
"items":
[
{
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"etag": "1",
"schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
"data": {
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"format": "application/json",
"language": [
"en-us"
],
"content": "{\"name\":\"Claire Hubacek Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
}
}
]
}
]
}
Dans cet exemple, le chemin d’accès nécessaire pour traiter et utiliser les détails spécifiques à l’offre dans la page web était : result['decisions'][0]['items'][0]['data']['content']
Pour définir les variables JS, spécifiez ceci :
javascript
const offer = JSON.parse(result['decisions'][0]['items'][0]['data']['content']);
let offerURL = offer['link'];
let offerDescription = offer['description'];
let offerImageURL = offer['image'];
document.getElementById("offerDescription").innerHTML = offerDescription;
document.getElementById('offerImage').src = offerImageURL;