14.3 Prepare your Adobe Experience Platform Data Collection Client property and Web SDK setup for Offer Decisioning

NOTE

The use of Offer Decisioning in Adobe Experience Platform Web SDK is currently available in early access to select users. This functionality is not available to all IMS organizations.

14.3.1 Update your Datastream

In Exercise 0.2, you created your own Datastream. You then used the name ldap - Demo System Datastream and replaced ldap with your ldap.

In this exercise, you need to configure that Datastream to work with Offer Decisioning.

To do that, go to https://experience.adobe.com/#/data-collection/. You’ll then see this. Click Datastreams. Search for your Datastream. Click your Datastream to open it.

WebSDK

You’ll then see this. Click Development Environment.

WebSDK

In the Development Environment, you’ll see your Adobe Experience Platform configuration.

WebSDK

To enable Offer Decisioning, check the box for Offer Decisioning.

WebSDK

Click Save

WebSDK

You’ll then be back here. Click Staging Environment.

WebSDK

To enable Offer Decisioning, check the box for Offer Decisioning.

WebSDK

Click Save

WebSDK

You’ll then be back here. Click Production Environment.

WebSDK

To enable Offer Decisioning, check the box for Offer Decisioning.

WebSDK

Click Save

WebSDK

Your Datastream is now ready to work with Offer Decisioning.

14.3.2 Configure your Adobe Experience Platform Data Collection Client property to request Personalized Offers

Go to https://experience.adobe.com/#/data-collection/, to Client. Search for your Adobe Experience Platform Data Collection Client properties, which are named ldap - Demo System (DD/MM/YYYY). Open your Adobe Experience Platform Data Collection Client property for web.

WebSDK

In you property, go to Rules and open the rule All General Pages.

WebSDK

Click to open the Action AEP Web SDK - Send Event.

WebSDK

You’ll then see this. You’ll notice the menu option for Decision Scopes.

WebSDK

For every request sent to the Edge and to Adobe Experience Platform, it’s possible to provide one or more Decision Scopes. A Decision Scope is a combination of two elements:

  • Decision ID
  • Placement ID

Let’s first have a look where you can find those two elements.

14.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 Luma website homepage corresponds with the Placement ID for Web - Image.

WebSDK

To find the Placement ID for Web - Image go to https://platform.adobe.com.

Next, go to Components and then to Placements. Click the Web - Image placement to see its details.

WebSDK

As you can see in the above image, in this example the Placement ID is xcore:offer-placement:129048460001fd30. Write down the Placement ID for your placement for Web - Image as you’ll need it in the next exercise.

14.3.2.2 Retrieve your Decision ID

The Decision ID identifies which combination of Personalized Offers and Fallback Offer you’d like to use. In the previous exercise, you created your own Decision and named it ldap - Luma Decision.

To find the Decision ID for your ldap - Luma Decision, go to https://platform.adobe.com.

Next, go to Offers and then go to Decisions. Click to select your Decision, which is named ldap - Luma Decision.

WebSDK

As you can see in the above image, in this example the Decision ID is xcore:offer-activity:1290525f4441fd6e. Write down the Decision ID for your decision ldap - Luma Decision as you’ll need it in the next exercise.

Now that you’ve retrieved the two elements you need to create a Decision Scopes, you can continue with the next step, which involves encoding the decision scope.

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

{
  "activityId":"xcore:offer-activity:1290525f4441fd6e",
  "placementId":"xcore:offer-placement:129048460001fd30"
}

The Decision Scope can be generated in two ways:

  • Use a public service like https://www.base64encode.org/. Enter the JSON code as mentioned above, click Encode and you’ll get your BASE64 encoded string below.

    WebSDK

  • Retrieve the BASE64 encoded string from Adobe Experience Platform. To do so, go to https://platform.adobe.com. Next, go to Decisions and click to open your Decision, which is named ldap - Luma Decision.

    WebSDK

    After opening your ldap - Luma Decision, you’ll 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.

    WebSDK

Next, go back to Launch, to your action AEP Web SDK - Send Event.

WebSDK

Make sure to select the option Enter values and then paste your BASE64 encoded decision scope in the input field.

WebSDK

Save your changes in the action AEP Web SDK - Send Event by clicking Keep Changes.

WebSDK

Next, click Save or Save to Library

WebSDK

In Adobe Experience Platform Data Collection, go to Publishing Flow and open your Development Library which is named Content Library. Click + Add All Changed Resources and then click Save & Build for Development. Your changes will now be published to your demo website.

WebSDK

Every time you’re 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’ll do in the next step.

14.3.3 Configure your Adobe Experience Platform Data Collection Client property to receive and apply Personalized Offers

Go to https://experience.adobe.com/#/data-collection/, to Properties. Search for your Adobe Experience Platform Data Collection Client properties, which are named ldap - Demo System (DD/MM/YYYY). Open your Adobe Experience Platform Data Collection Client property for web.

WebSDK

In you property, go to Rules.

WebSDK

Click Add Rule.

WebSDK

As the name for your rule, use Homepage - Decision Received.

WebSDK

14.3.3.1 Event

Click + Add under EVENTS to add a new event.

WebSDK

For the Event Configuration, select this:

  • Extension: AEP Web SDK
  • Event Type: Decisions Received

WebSDK

Click Keep Changes.

WebSDK

14.3.3.2 Condition

You’ll now see this. Click + Add under CONDITIONS to add a new condition.

WebSDK

For the Condition Configuration, select this:

  • Logic Type: Regular
  • Extension: Core
  • Condition type: Value Comparison
  • Name: Core - Value Comparison
  • Return true if
    • %pageName%
    • Equals
    • Luma Home

WebSDK

Click Keep Changes.

WebSDK

14.3.3.3 Action

You’ll then see this. Click + Add under ACTIONS to add a new action.

WebSDK

For the Action Configuration, select this:

  • Extension: Core
  • Action Type: Custom Code
  • Language: JavaScript

Next, click Open Editor

WebSDK

Paste the below code in the editor.

event.decisions.forEach(function(payload) {
  payload.items.forEach(function(item) {
    console.log(">>>>> Offer Decisioning Web SDK Response", item);
    document.getElementById("brandhero").src = item.data.deliveryURL;
  });
});

WebSDK

Click Save.

WebSDK

Click Keep Changes.

WebSDK

Next, click Save or Save to Library

WebSDK

In Adobe Experience Platform Data Collection, go to Publishing Flow and open your Development Library which is named Content Library. Click + Add All Changed Resources and then click Save & Build for Development. Your changes will now be published to your demo website.

WebSDK

With this change, this rule in Adobe 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 Luma demo website, you’ll see that this image will be replaced now:

WebSDK

And instead of the default Luma hero image, you will now see an offer like this one:

WebSDK

In the next exercise, you’ll go through a step-by-step demo scenario.

Next Step: 14.4 Test your Decision using the demo website

Go Back to Module 14

Go Back to All Modules

On this page