Experience League | Image

Leverage Adobe I/O to Handle Adobe Experience Cloud Events

Table of Contents

Lab Overview

User Story: Onsite Re-marketing using Adobe I/O

An anonymous user visits a retail website. The user is interested in buying a product. They visit the product page, select a color and size of the product, and adds the product into the cart. The user proceeds for checkout but before completing the transaction, they leave the website abandoning the cart. The next time the user visits the website, they experience a custom-tailored view based on the past interaction with the website.

Architecture

The solution uses below Adobe products:

  • Adobe Launch (The next generation dynamic tag management platform)
  • Adobe Analytics/Triggers
  • Adobe I/O Events
  • Adobe I/O Runtime
  • Adobe Target APIs
  • Adobe Target-Experience Targeting

The following illustration shows the flow of data across solutions.

1

Getting Started

Access Instruction

Marketing cloud access

Instance URL : https://adobedemoapac132.marketing.adobe.com User ID: taranguser2018@gmail.com Password: Adobe@321 IO Console: https://console.adobe.io

AEM Access

Author URL: http://locahost:4502 User ID: admin Password: admin Publish: http://localhost:4503

Key Takeaways

  • Explore Adobe I/O console
  • Set up a basic integration between AEM and Adobe I/O
  • Setup a simple JavaScript webhook on Adobe I/O console
  • Capture and respond to Experience Cloud Events.

Prerequisites

  • Login into the AEM author and publish instances
  • Access your marketing cloud instances
  • Download the Adobe IO runtime scripts

Lesson 1 Launch Integration

Objective

  1. Connect Adobe I/O and AEM via IMS
  2. Configure Launch Cloud Service in AEM

Lesson Context

In this exercise, we are going to explore the Adobe Launch integration with Adobe Experience Manager.

Integrating Adobe Experience Manager with Adobe Launch allows you to manage all of your integration in one place. Adobe Launch acts as the centerpiece of your Adobe Experience Cloud implementation, providing access to Adobe Target, Adobe Analytics, Audience Manager, etc.

Exercise 1.1 - Connect Adobe I/O and AEM

  1. Open AEM author: http://localhost:4502.

  2. Navigate to Tools, then Security, then Adobe IMS Configuration.

Adobe IMS Configuration

  1. Click on Create button to add an Adobe IMS configuration.

  2. In ‘Adobe IMS Technical Account Configuration’ screen, select the following:

  • Cloud Solution: Select Adobe Launch
  • Certificate: This should be empty, else ignore this field
  • Check the Create New Certificate checkbox
  • Enter any title in the “new alias” field
  • Click on Create Certificate button to generate a new certificate
  1. Click on Download Public Key link.

  2. Open Adobe IO console at https://console.adobe.io and click on the New Integration button.

NOTE: Please use the marketing cloud credentials provided in the Access instruction section at the start of the document.

  1. Select Access an API option and click Continue.

Adobe I/O

  1. Select Launch, by Adobe under experience cloud and click continue.

Adobe I/O

  1. Select New Integration and click Continue.

  2. Enter a name and description of your choice.

  3. Drag and drop the public key certificate which is downloaded from AEM into public keys certificates area.

Upload Certificate

  1. Select Admin as Launch by Adobe configuration and click Create Integration.

Note: You need to enter the description to enable the creation integration button.

Set Role

  1. If integration is created successfully, you should get the below screen. Click on Continue to integration details.

Continue

  1. You will find the integration details such as client API key, account ID, client secret, etc in this screen.

  2. Switch back to AEM screen and click on Next icon.

AEM IMS Config

  1. In the Adobe IMS Technical configuration screen, enter the following:
  • Title of your choice
  • API Key : Copy the API key(Client ID) from IO integration console
  • Client Secret: Copy the Client Secret from IO integration console
  • Payload: In the IO integration console, switch to JWT tab and copy the payload in JSON format
  • Authorization Server: From the payload JSON, look at the ‘aud’ key and copy the domain alone as the authorization server. For eg: https://ims-na1.adobelogin.com
NOTE: please use the copy button instead of manually copying

Your final screen should similar to below:

AEM IMS Config

  1. Click on create to create the Adobe IMS technical account.

  2. To test, select the newly created configuration and click on Check Health.

Test IMS Configuration


Exercise 1.2 - Configure Launch Cloud Service in AEM

  1. Navigate to Tools, then Cloud Services, then Adobe Launch Configurations.

Launch Configuration

  1. Select We.Retail and click on Create.

Launch Configuration

  1. In Create Adobe Launch Configuration screen, enter title for the configuration, select the ‘Adobe Launch Integration’ as the associated Adobe IMS configuration.
    Click the down arrow in the company dropdown, it should load the company name “Adobe Demo Apac 132”. Select the company name and expand the property. It should load the properties.
    Select TechTarang IO Event Configuration as the property and click next.

Launch Configuration

  1. Leave the default configuration for staging and click next.

  2. Leave the default configuration for production and click create.

  3. You should see the Launch configuration now.

  4. Select the Launch configuration and click on publish. Please click on publish again, if asked to confirm.

Publish Launch Configuration

  1. Your configuration should be available in AEM publisher now.

Exercise 1.3 - Validation

  1. Open the we retail publish site: http://localhost:4503/content/we-retail/us/en.html.
  2. Check the view source, you should see the assets include before the tag.

Verify Launch Configuration

  1. You should see the launch init script at the bottom of the page.

Verify Launch Configuration

  1. If you check the developer tools, you should see the calls to analytics/target. To check, please open developer tools (F12), goto to network. search for /ss for analytics or mbox for target.

Verify Launch Configuration

Lesson 2 Target API integration

Objective

  1. Generate public and private key using OpenSSl
  2. Create new Integration for Target on Adobe IO console
  3. Generate bearer token and run a sample Target Request

Lesson Context

In this lesson, we are going to setup a basic integration between Adobe I/O and Adobe Target. We will generate the Public and Private Key using Openssl.

Generate public and private key using Openssl

Use the openssl downloaded on your machine. Navigate to ‘C:\OpenSSL-Win64\bin’ folder and run the below command from your command prompt.

openssl req -nodes -text -x509 -newkey rsa:2048 -keyout private.pem -out public.pem -days 365

Please use the following options:

  • Country Code: US
  • State Code: NV
  • City : Las Vegas
  • Company: Adobe
  • Organization: GRES
  • Email : your email

You will see public.pem & private.pem files under the /bin directory where you ran the command

  • Public key: public.pem
  • Private key: private.pem

Exercise 2.1 - Create new Integration for Target on Adobe IO console

  1. Navigate to https://console.adobe.io/ from your browser.

  2. Login using the provided Adobe ID, if you are not logged.

  3. Select Adobe Demo Apac 132 Org from the drop down.

Adobe IO Console

  1. Once the Org is selected, Click on New Integration.

  2. On the Create a new integration page, select the Access and API radio button and click Continue.

  3. On the Select the Adobe service you wish to integrate with page, select Adobe Target under Experience Cloud and click Continue.

Adobe IO Console

  1. On the screen which says You may create a brand new integration for this service, or update an existing one, click Continue.

  2. In the Integration Details page, fill the Name and Description and under upload the public keys certificates upload your public.pem created in section 2.a) and click Create integration.

  3. You should see a message as Your integration has been created on the next screen.

  4. Click on Continue and you should see your integration details as below

Adobe IO Integration Details


Exercise 2.2 - Generate bearer token and run a sample Target Request

  1. Click on JWT tab on your Integration details page.

JWT

  1. Open private.pem file generated in the previous section using notepad and paste it under the Paste private key section and click on Generate JWT.

  2. You will see the Generated JWT below and click on copy beside Sample CURL command.

JWT

  1. Open postman which is installed on your machine.

  2. Click on Import at top left corner and paste the Sample CURL command you copied in step 3 and click Import.

Postman

  1. Navigate the header tab and unselect the Content-Type option.

Postman

  1. After you import the curl command, hit send and you should get a response with bearer token which will be used for our target request.

Postman

  1. Open a new tab in postman and use the following endpoint to get all the target activities https://mc.adobe.io/adobedemoapac132/target/activities/.

  2. Add 2 header keys:
    a. x-api-key : Client API key from IO console
    b. Authorization: Bearer <You access token generated in step 7>

In response, you should see all the target activities, as shown in this illustration.

Postman

If you are seeing 2 activities, integration is successful.

Lesson 3 Adobe Runtime and Event Configurations

Objective

  1. Configure Adobe I/O Runtime
  2. Configure Adobe I/O Events

Lesson Context

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

Exercise 3.1 : Configure Adobe I/O Runtime

  1. Configuring OpenWhisk:
  • Navigate to Desktop\OpenWhisk_CLI-mac and open Terminal Window

  • Execute the following commands:
    wsk property set --apihost runtime.adobe.io --auth 82980c63-51d8-4061-86d6-1abc4eb0aefa:QKR3TMF8FN01JxDGUuDu7m9SwrEQbBFIhDb7wpiRcIvqjmcQxhUnQgql6UWmpST2 --namespace emea-et-practice-io-roadshow

  • NOTE: please copy the command from the commands.txt provided.

  1. Copy the webhook.js file to C:/openwhisk folder.

  2. Open the webhook.js in a notepad, search for ‘headers’ and replace the Bearer token under authorization section with the access token generated in the previous step.

Webhook.js

  1. Execute the following commands to deploy the webhook.js and create a web action:
    wsk action create webhook_<seat_number> webhook.js
    wsk action update webhook_<seat_number> --web raw

  2. Test your webhook by hitting the below URL: https://runtime.adobe.io/api/v1/web/emea-et-practice-io-roadshow/default/webhook_?challenge=io-test

If the script is successfully deployed, you should get io-test back.

Exercise 3.2 : Configure Adobe I/O Events

  1. Go to https://console.adobe.io/.

  2. Click on New Integration.

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

Adobe IO

  1. Select Analytics Triggers as an event provider and click on Continue.

Adobe IO

  1. Click continue to move on to the next page without making any changes.

  2. Provide the name, description for this integration and update the public key and click on Continue.

  3. Click on add events registration.

  4. Enter the following details:

Click Save.

Adobe IO

  1. Click on create integration.

  2. Navigate to integration details to see the configurations.

  3. Click on events tab to see the event registration configuration.

  4. Click on view icon.

  5. If your configuration is successful you should see the status as Active

Adobe IO

Lesson 4 Final Validation

Objective

  1. Validate Integration
  2. Explore Analytics Triggers

Lesson Context

In this lesson, we will perform a final check and verify the integration steps performed so far. We will use AEM We Retail site and perform a simple Add to Cart Operation

Exercise 4.1

  1. Go to http://localhost:4503/content/we-retail/us/en/products/men.html.

  2. Click on any product you like.

  3. Select a Color and Size and click on ADD TO CART.

  4. Click checkout button to navigate to cart page.

Shopping Cart

  1. Go to experience cloud UI > Activation > Triggers console, wait for your trigger event to the surface for ‘MSA Adobe IO - Actions Trigger’.

Triggers

  1. Go to http://localhost:4503/content/we-retail/us/en/products/men.html again and you should see personalized message on the page.

Banner

Next Steps

Try out Adobe IO Events-AEM Assets Integration

Try out Adobe IO SlackBot Integration

Additional Resources

Adobe IO Adobe IO Documentation Adobe IO Documentation

Appendix

Adobe IO Documentation