Cross-Platform-Advertising

This solution identifies cart abandonment activity (even for anonymous users) and subsequently targets the user with advertisements on different websites.

These instructions describe how to to implement cross-platform advertising with Adobe Experience Cloud and Adobe I/O products. The solution uses the following Adobe products:

1. Introduction

2. Set Up Products

3. Watch the Solution Work

Introduction

Solution Use Case

An anonymous user visits a retail website. The user visits the product page, selects a color and size of the product and adds the product into the cart. The user proceeds to checkout but before completing the transaction, leaves the website, and abandons the cart. The cart abandonment activity is captured in the Adobe Audience Manager segment and the user profile is served on multiple platforms to provide relevant advertisements on different websites.

This solution features the unique value of identifying cart abandonment activity and subsequent advertising even with anonymous users. Though the solution works for authenticated users as well, this solution focuses on the anonymous user.

Solution Architecture

The following diagram shows the architecture for this solution:

What's Needed

To complete this solution, you will need authorization to use the following services:

• Adobe Launch
• Adobe Analytics/Triggers
• Adobe I/O Events
• Adobe I/O Runtime
• Adobe Audience Manager APIs
• Adobe Audience Manager
• Third-party website for demonstrating solution

Set Up Products

To set up Adobe products for this solution:

1. Set Up Adobe Launch

2. Set Up Analytics Triggers

3. Set Up Adobe I/O Runtime

4. Set Up Adobe I/O Events

5. Set Up Adobe Audience Manager

6. Third-Party Website

To set up Launch:

1. On www.launch.adobe.com, click New Property.

   

2. On the Create Property box, provide the details for the new property and click Save.

   

3. Click the Extensions tab and install the Analytics extension. Add the Report Suite for Development, Staging, and Production. The full Report Suite ID is available at Analytics > Admin > Report Suites.

   

4. Add the Experience Cloud ID Service and Adobe ContextHub extensions with default settings and Click Save.

   

5. Click the Rules tab and create a Analytics rule with the following specifications:

   

6. For the Adobe Analytics - Set Variables action, click the </> Open Editor button at the bottom of the page and add the following custom script:

var cart=ContextHub.getItem("cart");
 
var price=[];
var items=[];
 
for(i=0;i<cart.entries.length;i++)
{
     price[i]=cart.entries[i].price;
     items[i]=cart.entries[i].title;
}
 
s.eVar4=price.join("|");
s.eVar5=items.join("|");
 
s.eVar8=_satellite.getVisitorId().getAudienceManagerLocationHint();

7. Click the Environments tab and create the following environments:

   • Dev

   • Stage

   • Production

     

8. Save the rule and then click the Publishing tab.

9. Click Add New Library button.

   

10. On the Create New Library form, specify a Name for the build and then select Dev (development) from the Environment drop down.

11. Click the Add All Changed Resources button.

    

12. Under Development, select Build for Development in the library drop down.

    

13. Approve and publish the library by selecting the appropriate option under the drop down arrow for each phase of the build workflow (Submitted and Approved).

    

14. Repeat this process for the Stage and Production environments as well.

15. The last step in the workflow is to select Build and Publish to Production on the drop down arrow under Approved.

    

Set Up Analytics Triggers

Triggers is a Marketing Cloud Activation core service that enables marketers to identify, define, and monitor key consumer behaviors, and then generate cross-solution communication to re-engage visitors. You can use triggers in real-time decisions and personalization.

For instructions on setting up Analytics Triggers, see Specifying a New Trigger.

To set up Triggers for this solution:

1. Create a cart abandonment Triggers rule.

   

2. Add the following dimensions:

   • Custom eVar 3
   • Custom eVar 4
   • Custom eVar 5
   • Custom eVar 6
   • Custom eVar 7
   • Custom eVar 8
   • Page URL

3. To enable these dimensions in your report suite:

   On Analytics Admin screen, click Report Suites.

   1. Select a report suite and then select Edit Settings > Conversion > Conversion Variables.

      

   2. Click Add New and then select the Status checkbox. Select Enabled from the drop-down menu and then click Save.

      

   3. Add as many conversion variables as you need. It may take some time for them to appear on the Trigger dimensions screen.

Set Up Adobe I/O Runtime

In this solution, you can deploy the following script to handle Triggers I/O Events and to provide updates to the visitor profile in Customer Attributes via Target Profile APIs.

webhook.js

var request = require('request');
 
function main(args) {
 
  var method = args.__ow_method;
 
  if (method == "get") {
    var res = args.__ow_query.split("challenge=");
    var challenge = res[1];
    if (challenge)
    console.log("got challenge: " + challenge);
    else
    console.log("no challenge");
 
    return {
      body: challenge
    }
  }
 
    if (method == "post") {
      try{
        var body = new Buffer(args.__ow_body, 'base64');
        console.log("Message Body:"+body);
        var jSon = JSON.parse(body);
        var mcId = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].mcId;
        var index = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar5.data.length - 1;
        var trPrices = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar4.data[index];
        var trProducts = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar5.data[index];
        var dcs_region = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar8.data[index];
 
 
        var url = 'http://adobeiosolutionsdemo.demdex.net/event?trProducts='+trProducts+'&trPrices='+trPrices+'&d_mid='+mcId+'&d_orgid=C74F69D7594880280A495D09@AdobeOrg&d_rtbd=json&d_jsonv=1&dcs_region='+dcs_region;
        console.log("Calling AAM API with:"+url);
        return new Promise(function(resolve, reject) {
            request.get(url, function(error, response, body) {
                if (error) {
                    reject(error);
                }
                else {
                    resolve({body: response});
                }
            });
        });
      }catch(e){
        console.log("Error occured while calling the API",e);
      }
 
    }
 
}

To deploy the webhook.js and create a web action, enter the following commands:

wsk action create aam webhook.js

wsk action update aam --web raw

After entering the commands, the web action is accessible at the following location:

https://runtime-preview.adobe.io/api/v1/web/<your_openwhisk_namespace>/default/aam

Set Up Adobe I/O Events

To set up Adobe I/O Events:

1. After signing in to the Adobe I/O Console, click New Integration.

   

2. Select Receive real-time events and click Continue.

   

3. Select Analytics Triggers as an event provider and click Continue.

   

4. Click Continue to move on to the next page without making any changes.

5. Provide the Name and Description for your integration.

   

6. Generate a public certificate. To do this:

   1. Open a terminal and execute the following command:

      openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out certificate_pub.crt
      

   2. Upload the public certificate by clicking the Select a File link and then by selecting the certificate from your computer:

      

7. On the Webhook Details form, add details, including your web action URL for I/O Events integration webhook. This is where Triggers messages will be delivered by I/O Events. Click Save.

   

   For more information on creating and registering webhooks, see Introduction to Webhooks.

Set Up Adobe Audience Manager

Adobe Audience Manager is a data management platform (DMP) that helps you build unique audience profiles so you can identify your most valuable segments and use them across any digital channel.

To set up Audience Manager:

1. In Audience Manager, click Manage Data.

   

2. Click Traits.

   

3. Create a new Trait with the Expression Builder, as shown:

   

   

4. Click Segments and create a new Segment as shown below. Make sure you choose the correct report suite. Select the trait that you created in the previous step.

   

5. Click Destinations and create a new destination as shown below.

   

6. Choose the Browser platform.

7. Add the segment created in the previous step in segment mapping.

8. Save the changes.

Third-party Website

In this solution, we deploy a sample website on different a domain to collect data for the user's audience segment and then deliver a relevant advertisement for the visitor.

To deploy the site:

1. Create an ad banner targeted to a specific audience segment. In this example, we will show the following advertisement to an audience segment that added coats or jackets into the cart but later abandoned the cart. This audience segment includes high-potential customers who might eventually make a purchase (because we know that they abandoned the cart with coat or jackets as opposed to those who just visited the product page) so retailers would be ready to pay more money for serving the ad to this audience segment.

   

2. Add the following script in the HTML <head> section of the webpage where you want to display the ad.

webpage

<head>
<script>
var demdex_seg="", jacketsCampaign=false;
function aam_cb() {
    if (typeof (arguments[0].stuff) != "undefined" && arguments[0].stuff != "") {
        demdex_seg = arguments[0].stuff;
        for(var i=0;i<demdex_seg.length;i++)
        {
            if(demdex_seg[i].cn=="trigger-aam")
            {
                jacketsCampaign=true;
            }
        }
    }
}
</script>
<script type="text/JavaScript" src="https://adobeiosolutionsdemo.demdex.net/event?d_stuff=1&d_dst=1&d_rtbd=json&d_cts=1&d_cb=aam_cb"></script>
</head>

3. Put the following script at page-bottom (just before </body> tag) to load the custom ad banner if the visitor is part of the "trigger-aam" audience segment.

   Ad placehoder in a webpage for reference:

<div class="ad_banner"><a id="ad_dest" href="#"><img id="aam_ad" src="images/addbanner_728x90_V1.jpg" alt=""></a></div>

changeAd

<script>
      if(jacketsCampaign)
           {
               document.getElementById("aam_ad").src="images/ad.jpg";  
               document.getElementById("ad_dest").href="http://localhost:4502/content/we-retail/us/en/products/men.html";
           }
    </script>
</body>

Watch the Solution Work

To watch the solution work, you can test the cart abandonment and advertisement scenario:

1. Visit the website https://aam-demo2.herokuapp.com to see the page has "No ads to show."

   

2. At the sample retail website, http://localhost:4502/content/we-retail/us/en/products/men.html, and click on a coat or jacket you want to test.

3. Select a Color and Size, then click the ADD TO CART button and Checkout.

4. Enter details on the ORDER form and then click CONTINUE.

   

5. Close the browser tab to simulate the cart abandonment scenario.

6. On the Triggers UI page, watch for your specified trigger event to appear.

   

7. On the Command Line Interface (CLI) enter the following commands:

   wsk activation list aam
   

   

8. Select and copy the first activation listed and paste it into the following command:

   wsk activation get f6f5ae1dcb3d4292991d63f22283fb94
   

9. View the other web site again to see the custom ad banner displayed for the visitor!

   

Authors

• Hiren Shah @hirenshah111.
• John Wight @johnwight.

Feedback?

Please help make this solution as useful as possible. If you find a problem in the documentation or have a suggestion, click the Issues tab on this GiHhub repository and then click the New issue button. Provide a title and description for your comment and then click the Submit new issue button.