Use Adobe I/O, Target, Launch, and Triggers to Customize Site Experiences for Repeat Users

These instructions describe how to use Adobe I/O Events and Runtime with Launch, Target, and Triggers to customize website experiences for anonymous users who have previously abandoned their carts.

1. Introduction

2. Set Up Products

3. Watch the Solution Work

Introduction

Solution Use Case

This solution applies to the following use case:

An anonymous user visits a retail website. The user visits the product page, selects a product color and size and then adds the product to the cart. The user proceeds to checkout, but before completing the transaction, leaves the website and abandons the cart. The next time the user visits the website, the user experiences a custom-tailored view based on past interaction with the website.

Architecture

The following diagram shows the architecture for this solution:

What's Needed

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

• Adobe Launch
• Adobe Target
• Adobe Analytics, including Triggers
• Adobe Marketing Cloud Activation Core Services

Set Up Products

To set up Adobe products for this solution:

1. Set Up Launch

2. Set Up Analytics Triggers

3. Set Up Adobe I/O Runtime

4. Set Up Adobe I/O Events

5. Set Up Target

Set Up Launch

Adobe Launch is the next-generation Dynamic Tag Management (DTM) tool. It provides a platform-based approach to building DTM extensions and a streamlined distribution system to quickly deploy client-side DTM libraries. With Launch, you can create custom resources and re-use them within DTM to simplify the distribution of client-side web applications.

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 following extensions

   • Target

   • Analytics

   • ContextHub

   • Core

   • Experience Cloud ID Service

     

4. Click the Rules tab and create a Target rule with the following specifications:

   

5. Similarly, create an 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 profile=ContextHub.getItem("profile");
   
   var price=[];
   var items=[];
   var links=[];
   var thumbs=[];
   var origin=window.location.origin;
   for(i=0;i<cart.entries.length;i++)
   {
        price[i]=cart.entries[i].price;
        items[i]=cart.entries[i].title;
        links[i]=origin+cart.entries[i].page;
        thumbs[i]=origin+cart.entries[i].thumbnail;
   }
   
   s.eVar3=document.cookie.split("PC#")[1].split("#")[0];
   s.eVar4=price.join("|");
   s.eVar5=items.join("|");
   s.eVar6=links.join("|");
   s.eVar7=thumbs.join("|");
   
   

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:

   

Set Up Target

Before setting up Target, you must first configure Adobe I/O services, as described in the following section. Once the Target profile API is set with Adobe I/O, you can continue setting up Target.

Set Up Adobe I/O Runtime

Adobe I/O Runtime is a serverless platform that allows you to quickly deploy custom code to respond to events and execute functions in the cloud, with no server set-up.

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

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") {
        var body = new Buffer(args.__ow_body, 'base64');
        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 pcId = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar3.data[index];
        var trPrices = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar4.data[index].split("|")[0];
        var trProducts = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar5.data[index].split("|")[0];
        var trLink = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar6.data[index].split("|")[0];
        var trThumb = jSon.event["com.adobe.mcloud.pipeline.pipelineMessage"]["com.adobe.mcloud.protocol.trigger"].enrichments.analyticsHitSummary.dimensions.eVar7.data[index].split("|")[0];
        var trOffer = "5";
        var trCoupon = "ADBETGT5OFF";
 
        //Additional 5% off, if product price is more than $100
        if (trPrices > 100) {
            trOffer = "10";
            trCoupon = "ADBETGT10OFF";
        }
 
        console.log("webhook invoked with: " + body);
 
        var fs = require('fs');
        var request = require('request');
        var file = pcId + ".txt";
        var content = "batch=pcId,mcId,trProducts,trPrices,trLink,trThumb,trOffer,trCoupon\n"
                       + pcId + "," + mcId + "," + trProducts + "," + trPrices + "," + trLink + "," + trThumb + "," + trOffer + "," + trCoupon;
 
        return new Promise(function(resolve, reject) {
            try {
                fs.writeFileSync(file, content);
            } catch (e) {
                console.log("Cannot write file ", e);
            }
 
            try {
                var data = fs.readFileSync(file);
                console.log("Sending:" + data);
            } catch (e) {
                console.log("Cannot read file ", e);
            }
 
            var options = {
                url: 'http://<your_client_id>.tt.omtrdc.net/m2/<your_client_id>/v2/profile/batchUpdate',
                headers: {
                    "content-type": "application/x-www-form-urlencoded",
                    "Authorization": "Bearer <target_authorization_code>"
                }
            }
            fs.createReadStream(file, {encoding: 'utf-8'}).pipe(request.post(options, function(err, message, res) {
                if (err) {
                    reject(err);
                } else {
                    resolve({body: res});
                }
            }));
 
        });
    }
}

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

wsk action create runtime webhook.js

wsk action update runtime --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/runtime

Set Up Adobe I/O Events

With Adobe I/O Events, you can code event-driven experiences, applications, and custom workflows that leverage and combine the Adobe Experience Cloud, Creative Cloud, and Document Cloud.

Use Adobe I/O by creating a new integration with the Console. To do this:

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 Target

Adobe Target is a personalization solution that makes it easy to identify your best content through tests that are easy to execute. So you can deliver the right experience to the right customer.

To set up Target:

1. Click Launch on the Target product card.

   

2. On the Audiences tab, click the Create Audience button.

   

3. On the Information form, provide a Name for the audience. Then click the Add Rule button and select Visitor Profile.

   

4. Click the Visitor Profile drop down arrow to see existing custom attributes for creating audiences.

   

5. Create a rule to check if the user has abandoned a cart during earlier visits and then click Save.

   

6. Click the Activities tab and select Experience Targeting.

   

7. On the Create Experience Targeting Activity form, provide the Target page URL.

   

8. Open the text editor to add a custom UI element for the user on the site. To do this, select an empty container and click Edit Text/HTML.

   

9. On the text editor, click the HTML button, paste the following HTML and click Save.

   <div style="border: 2px solid grey">
       <strong>
           Hi! It seems you were trying to buy &quot;${profile.trProducts}&quot;<a href="${profile.trLink}" target="_blank"><img src="${profile.trThumb}" /></a>, Here is an exclusive ${profile.trOffer}% discount coupon for you: ${profile.trCoupon}
       </strong>
   </div>
   

   

10. Click Next and then click Change Audience. Select the audience created in Step 4 (Trigger Audience).

    

11. On the Activity Settings, specify your Objective, Priority, Duration, and Primary Goal.

    

12. Click Save & Close.

Watch the Solution Work

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

1. At http://localhost:4502/content/we-retail/us/en/products/men.html, click on a product you want to test.

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

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

   

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

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

   

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

   wsk activation list runtime
   

   

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

   wsk activation get f6f5ae1dcb3d4292991d63f22283fb94
   

8. Verify that the API call to update the visitor profile has successfully executed. You can check the batch status by using the URL shown in the response > result > <batchStatus> tag:

   http://mboxedge28.tt.omtrdc.net/m2/adobeiosolutions/profile/batchStatus?batchId=adobeiosolutions-1508968014477-39630647.

   

9. View the Products site page to see the custom UI element you created.

   

10. To inspect the element, right-click on the page and select Inspect.

    

11. Click the Network tab. Reload the page and filter for target.

    

12. You can explore the element to verify and debug the target action.

    

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.