14.3 Prepare your Launch and Web SDK setup for Offer Decisioning

14.3.1 Update your Edge Config ID

In Exercise 0.2, you created your own Edge Configuration ID. You then used the name ldap - Edge Configuration and replaced ldap with your ldap.

In this exercise, you need to configure that Edge Configuration ID to work with Offer Decisioning.

To do that, go to https://launch.adobe.com/. You’ll then see this. Click Edge Configurations.

WebSDK

Search for your Edge Configuration. Click your Edge Configuration 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 Edge Configuration ID is now ready to work with Offer Decisioning.

14.3.2 Configure your Launch property to request Personalized Offers

Go to https://launch.adobe.com/, to Properties. Search for your Launch properties, which are named ldap - AEP Demo (DD/MM/YYYY). Open your Launch 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:

  • Offer Activity ID
  • Offer Placement ID

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

14.3.2.1 Retrieve your Offer Placement ID

The Offer 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 Offer Placement ID for Web - Image.

WebSDK

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

Next, go to Offers 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 Offer Placement ID is xcore:offer-placement:127075c49bb0df30. Write down the Offer Placement ID for your placement for Web - Image as you’ll need it in the next exercise.

14.3.2.2 Retrieve your Offer Activity ID

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

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

Next, go to Activities and click to select your Offer Activity, which is named ldap - Luma Offer Activity.

WebSDK

As you can see in the above image, in this example the Offer Activity ID is xcore:offer-activity:1272b0c7aee6156b. Write down the Offer Activity ID for your activity ldap - Luma Offer Activity 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 Offer Placement ID and the Offer Activity ID, as you can see below.

{
  "activityId":"xcore:offer-activity:1272b0c7aee6156b",
  "placementId":"xcore:offer-placement:127075c49bb0df30"
}

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 Activities and click to open your Offer Activity, which is named ldap - Luma Offer Activity.

    WebSDK

    After opening your ldap - Luma Offer Activity, you’ll see this. Locate the placement Web - Image and click the Copy button. Next, click Decision scope as base 64. 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 Launch, 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 Launch property to receive and apply Personalized Offers

Go to https://launch.adobe.com/, to Properties. Search for your Launch properties, which are named ldap - AEP Demo (DD/MM/YYYY). Open your Launch 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 Launch, 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 Launch 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 Offer Activity using the demo website

Go Back to Module 14

Go Back to All Modules

On this page