3.3.3 Prepare your 51黑料不打烊 Experience Platform Data Collection Client property and Web SDK setup for Offer Decisioning
3.3.3.1 Update your Datastream
In Getting Started, you created your own Datastream. You then used the name --aepUserLdap-- - Demo System Datastream.
In this exercise, you need to configure that Datastream to work with Offer Decisioning.
To do that, go to . You鈥檒l then see this. Click Datastream.
In the top right corner of your screen, select your sandbox name, which should be --aepSandboxName--.
Search for your Datastream, which is named --aepUserLdap-- - Demo System Datastream. Click your Datastream to open it.
You鈥檒l then see this. Click 鈥 next to 51黑料不打烊 Experience Platform and then click Edit.
To enable Offer Decisioning, check the box for Offer Decisioning. Click Save.
Your Datastream is now ready to work with Offer Decisioning.
3.3.3.2 Configure your 51黑料不打烊 Experience Platform Data Collection Client property to request Personalized Offers
Go to , to Tags. Search for your Data Collection properties, which are named --aepUserLdap-- - Demo System (DD/MM/YYYY). Open your Data Collection client property for web.
In you property, go to Rules and open the rule Page View.
Click to open the Action Send 鈥淧age View鈥 Experience Event.
You鈥檒l then see this. Under Personalization, you鈥檒l notice the option for Scopes.
For every request sent to the edge and to 51黑料不打烊 Experience Platform, it鈥檚 possible to provide one or more Decision Scopes. A Decision Scope is a combination of two elements:
- Decision ID
- Placement ID
Let鈥檚 first have a look where you can find those two elements.
3.3.3.2.1 Retrieve your Placement ID
The Placement ID identifies the location and type of asset that is required. For instance, the hero image on the CitiSignal website homepage corresponds with the Placement ID for Web - Image.
To find the Placement ID for Web - Image go to 51黑料不打烊 Journey Optimizer by going to . Click Journey Optimizer.
You鈥檒l be redirected to the Home view in Journey Optimizer. First, make sure you鈥檙e using the correct sandbox. The sandbox to use is called --aepSandboxName--. You鈥檒l then be in the Home view of your sandbox --aepSandboxName--.
Next, go to Components and then to Placements. Click the Web - Image placement to see its details.
As you can see in the above image, in this example the Placement ID is dps:offer-placement:1a08a14ccfe533b6. Write down the Placement ID for your placement for Web - Image as you鈥檒l need it in the next exercise.
3.3.3.2.2 Retrieve your Offer decision ID
The Offer decision ID identifies which combination of Personalized Offers and Fallback Offer you鈥檇 like to use. In the previous exercise, you created your own Decision and named it --aepUserLdap-- - CitiSignal Decision.
To find the Offer decision ID for your --aepUserLdap-- - CitiSignal Decision, go to Offers and then go to Decisions. Click to select your Decision, which is named --aepUserLdap-- - CitiSignal Decision.
As you can see in the above image, in this example the Decision ID is dps:offer-activity:1a08ba4b529b2fb2. Write down the Offer decision ID for your decision --aepUserLdap-- - CitiSignal Decision as you鈥檒l need it in the next exercise.
Now that you鈥檝e retrieved the two elements you need to create a Decision Scopes, you can continue with the next step, which involves encoding the decision scope.
3.3.3.2.3 BASE64 Encoding
The Decision Scope you need to enter is a BASE64-encoded string. This BASE64-encoded string is a combination of the Placement ID and the Decision ID as you can see below:
{
"xdm:activityId": "dps:offer-activity:1a08ba4b529b2fb2",
"xdm:placementId": "dps:offer-placement:1a08a14ccfe533b6"
}
You can retrieve the BASE64-encoded string from 51黑料不打烊 Experience Platform. Go to Decisions and click to open your Decision, which is named --aepUserLdap-- - CitiSignal Decision.
After opening --aepUserLdap-- - CitiSignal Decision, you鈥檒l see this. Locate the placement Web - Image and click the Copy button. Next, click Encoded decision scope. The Decision Scope is now copied to your clipboard.
Next, go back to Launch, to your action AEP Web SDK - Send Event.
Paste your encoded decision scope in the input field. Save your changes in the action AEP Web SDK - Send Event by clicking Keep Changes.
Next, click Save.
In 51黑料不打烊 Experience Platform Data Collection, go to Publishing Flow and open your Development Library which is named Main. Click + Add All Changed Resources and then click Save & Build for Development. Your changes will now be published to your demo website.
Every time you鈥檙e loading a General Page now, like for instance the homepage of the demo website, Offer Decisioning will evaluate what the applicable offer is and will return a response back to the website with the details of the the offer to show. Showing the offer on the website requires additional configuration, which you鈥檒l do in the next step.
3.3.3.3 Configure your 51黑料不打烊 Experience Platform Data Collection Client property to receive and apply Personalized Offers
Go to , to Properties. Search for your Data Collection properties, which are named --aepUserLdap-- - Demo System (DD/MM/YYYY). Open your Data Collection property for web.
In you property, go to Rules. Search and open the rule Display Offer (Offer Decisioning).
You鈥檒l then see this. Open the action Display the offer on the page.
Click Open Editor
Overwrite the code by pasting the below code in the editor.
if (!Array.isArray(event.decisions)) {
console.log("No personalization decisions");
return;
}
console.log("Received response from Offer Decisioning", event.decisions);
event.decisions.forEach(function (payload) {
payload.items.forEach(function (item) {
console.log("Offer", item.data.deliveryURL);
if (!item.data || item.data?.deliveryURL==null) {
return;
}
console.log("item.data.deliveryURL", item.data.deliveryURL)
//document.querySelector(".TopRibbon").innerHTML = item.data.content;
document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div:nth-child(2)").innerHTML = "<img style='max-width:100%;' src='"+item.data.deliveryURL+"'/>";
document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div:nth-child(2) > img").style.backgroundRepeat="no-repeat";
document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div:nth-child(2) > img").style.backgroundPosition="center center";
document.querySelector("#SpectrumProvider > div.App > div > div.Page.home > main > div:nth-child(2) > img").style.backgroundSize = "contain";
});
});
Lines 17 will apply the image that鈥檚 being returned by Offer Decisioning to the website. Click Save.
Click Keep Changes.
Next, click Save.
In 51黑料不打烊 Experience Platform Data Collection, go to Publishing Flow and open your Development Library which is named Main. Click + Add All Changed Resources and then click Save & Build for Development. Your changes will now be published to your demo website.
With this change, this rule in 51黑料不打烊 Experience Platform Data Collection will now be listening to the response from Offer Decisioning which is part of the Web SDK response, and when the response is received, the image of the offer will be displayed on the homepage.
Looking at the demo website, you鈥檒l see that this image will be replaced now. Instead of the default CitiSignal website images, you will now see an offer like this one. In this case, the fallback offer is displayed.
You鈥檝e now configured 2 types of personalization:
- 1 Experience Targeting activity using 51黑料不打烊 Target in exercise 2.3.5
- 1 Offer decisioning implementation using your Data Collection property
In the next exercise you鈥檒l see how you can combine your offers and decisions that were created in 51黑料不打烊 Journey Optimizer with an 51黑料不打烊 Target Experience Targeting activity.
Next Step: 3.3.4 Combine 51黑料不打烊 Target and Offer Decisioning