Talks about how to Integrate AEM with Adobe Launch Via Adobe I/O

Article summary

Summary

Discusses how to integrate AEM with Adobe Launch Via Adobe I/O

Its the great community members that help the overall AEM community and drives the success of AEM Developers using Adobe Experience Manager.

Digital Marketing Solution(s) Adobe Experience Manager 6.4
Audience Developer, Administrator
Required Skills AEM Authoring, Adobe Launch Authoring, Adobe IO console
Version 6.4

Introduction

This article will help you integrate AEM with Adobe Launch (successor of DTM). Interestingly, the integration would happen via launch API in Adobe I/O.

In order to integrate software such as Adobe Analytics, Adobe Target, or a variety of other third-party software across digital properties that are run on AEM, our customers (and their AEM administrators) want to use Adobe's latest version of a tag management system, Adobe Launch, to easily deploy corresponding tracking codes for software such as Adobe Analytics, Adobe Target, or any other third-party.

AEM 6.4 offers an out of the box integration between AEM 6.4 and Adobe Launch, which allows AEM administrators to easily configure AEM 6.4 and Adobe Launch via an easy to use interface, which reduces the level of effort and the number of errors when configuring these two tools.

See Integrate AEM with Adobe Target Via Adobe Launch

Prerequisites

  • AEM 6.4
  • Customer needs to be properly provisioned with Adobe Launch and Adobe I/O from Adobe support

Note:

For AEM 6.3 and Adobe Launch integration, refere to this article:- Integrate AEM 6.3 with Adobe Launch

General Steps

  1. Create IMS integration in AEM using credentials from Adobe I/O
  2. In Adobe Launch, create a property
  3. In AEM, create an Adobe Launch integration leveraging an IMS integration created in step 1, so that a property from Adobe Launch can be mapped to an "Adobe Launch" integration in AEM, which can then be attached to a site.
  4. In AEM, map an Adobe Launch integration to a site 
  5. Validate integration manually

Create IMS integration in AEM using credentials from Adobe I/O

Configure Adobe IMS in AEM

  1. Open Tools > Security > Adobe IMS Configurations
  2. Create a new Adobe IMS Configuration
  3. Select the Cloud Solution Adobe Launch 
  4. Select Create a new certificate and enter an alias name (certificates are added to the user dtm-reactor-imsconfig-service)
  5. Download Public Key to your machine (as required in Configure Adobe I/O)

Jump to Next Step

Adobe I/O Configuration

  1. Open Adobe I/O Console at https://console.adobe.io/integrations
  2. Create Integration
  3. Select Access an API 
  4. Select Experience Cloud > Launch, by Adobe in the next step
  5. Select New Integration
  6. Enter a Name and Description, select the public key file from Configure Adobe IMS in AEM (we have already created this file in the previous step of "Configure Adobe IMS in AEM")
  7. Select Role (Admin)
  8. Create Integration

Note:

Customer needs to be properly provisioned with Adobe Launch and Adobe I/O from Adobe support

For any Integration with Adobe I/O, Adobe support needs to provision IMS before cloud solution API can be used.

New Integration
Adobe I/O Configuration

Configure Adobe IMS in AEM continued

IMS Certificate

Come back to AEM tab.

This is where we have left and Click Next Button.

Now Configuration would ask for Account information that we need to fetch from Adobe I/O Configuration created in the previous block.

 

 

IMSAccount

Copy all the information from the configuration created in Adobe I/O to the AEM IMS config

  1. API Key (Client ID) [in Adobe I/O] -> API Key [in AEM IMS Config]
  2. Title [in AEM IMS Config] -> Any Test String
  3. JWT code [in Adobe I/O] -> Payload [in AEM IMS Config]
  4. Client Secret [in AEM IMS Config] -> Client Secret [in AEM IMS Config]

Click Save 

 

To check if the IMS Configuration is correct or not

  1. Go to http://localhost:<post>/libs/cq/adobeims-configuration/content/configurations.html
  2. Select the configuration
  3. Click the Check Health from the header and click Check
  4. If successful, you will get Token retrieved successfully! message.

Note:

The certificate created from the AEM via IMS Configuration can also be created manually from OpenSSL or similar tool and can be added to dtm-reactor-imsconfig-service. New article to share this process (Creation of certificate + Adding Key from Keystore file) would be shared soon.

Configurations & Capabilities

  1. Open Tools > General > Configuration Browser
  2. Create a new configuration container structure for your site (Title My-Site) or select an existing one
  3. Click the Cloud Configurations capability

And Click Create

Adobe Launch Configuration

  1. Open Tools > Cloud Services > Adobe Launch Configurations
  2. Select My-Site
  3. Create a new Adobe Launch Configuration

Now wait till we create a property in Adobe Launch

Adobe Launch, Create a property

  1. Log in to the Adobe Launch
  2. Click New Property
  3. Give Name: AEM64Launch and Domain: localhost.local
  4. Click Save

Documentation:  Adobe Launch Property

Create a Rule

  1. Click on Rule Tab and Click on Add Rule
  2. Add the Name: PageLoad
  3. Add the Events -> Extension: Core -> Event Type: Page Bottom -> Name: Core - Page Bottom
  4. Click Save
  5. Leave Condition and Exceptions as it is.
  6. Add Actions -> Extension: Core -> Action Type: Custom Code -> Name: Core-Custom Code
  7. Check the JavaScript and Click Open Editor -> Add the alert Js code "alert("Testing Alert");" 
  8. Click Save

Documentation:- Adobe Launch Rule

Adobe Launch Rule

Create Adapters

  1. Click on Add Adapter
  2. Name: AEM6418April and Type: Akamai

Documentation: Adobe Launch Adapter

Adapter

Create Environments

  1. Click on Environments Tab and Click on Add Environment
  2. Select Dev environment and provide name: AEM64DEV18April
  3. Select Adapter: AEM6418April (created this in the previous step)
  4. Click Save

Do this for Stage and Production Environment as well.

Documentation: Adobe Launch Environments

Environments

Publish the Libraries

Now that we have created the Rule, Adapter, and the environments. We would need to build and deploy the property to the respective environments.

  1. Click on Publishing tabs and click on Add New Library
  2. Provide any name and select the Environment as DEV
  3. Click on Add All Changes Resources 
  4. Click Save

Now we can see the Library under the All Libraries section.

  1. Click on the drop-down icon of the new library created and click Build for development 
  2. Once build is successful, Click on the drop-down icon of the new library created and click Submit for Approval

Do this "build and submit" process for both Stage and Prod until the library reaches the Published section.

Documentation: Adobe Launch Publishing

 

Now, we will Go back to the AEM instance again.

 

 

Publishing

Adobe Launch integration leveraging an IMS integration in AEM

Adobe Launch Configuration

Come Back to the AEM instance
  1. Open Tools > Cloud Services > Adobe Launch Configurations
  2. Select My-Site
  3. Create a new Adobe Launch Configuration

And 

  1. Title: LaunchConfig18april
  2. IMS Configuration: AEMLaunch16April2018 (This is the IMS configuration created in the earlier step)
  3. Company: Select your Adobe Launch Company
  4. Property: Select the property created in Adobe Launch: AEM64Launch
  5. Include Production Code on Author: Forces inclusion of the production tag on the authoring instance: Keep is closed

Move to Stage and click Next (Library URI will automatically get populated) and then move to Production and save.

Adobe Launch Config
Stage
Production

Note:

For Publishing, You need to Publish the Adobe Launch Configuration.

  • Select Configuration -> Press Publish from top
  • Make sure, dtm-reactor will be selected
  • Press Publish

 

Best way to use Launch is by self-hosting the libraries. For the demonestration perpose of this article we have used Adobe’s CDN to host the libraries.

Publish Configuration

Map an Adobe Launch integration to a site in AEM

Now we will Map the Adobe Launch configuration created in the previous step to the desired web page

Assuming, we need to map this to We.Retail->United States-> English page, 

  1. Go to http://localhost:<port>/editor.html/content/we-retail/us/en.html
  2. Select the Open Properties
  3. Move to Advance Tab
  4. Scroll down to Configuration and click on cancel inheritance
  5. Select the Config Path (this must be the same as the configuration container created under the Configurations & Capabilities section above), in our case it is My-Site
  6. Click Save

Note:

The following resource includes are required in the page component for the integration to work.

headlibs.html

<sly data-sly-resource="${'cloudconfig-header' @ resourceType='cq/cloudconfig/components/scripttags/header'}"></sly>

footer.html

<sly data-sly-resource="${'cloudconfig-footer' @ resourceType='cq/cloudconfig/components/scripttags/footer'}"></sly>

These resource includes are part of the WCM Core Page component, so if a customer does inherit and not overlay the mentioned files the integration works but if not the tags will not be included in the page.

Mapping AEM Adobe Launch Config

Validate integration manually

To validate AEM-Launch integration, we need to go the web page where we have mapped the Adobe Launch configuration.

  1. Go to: http://localhost:<post>/editor.html/content/we-retail/us/en.html
  2. The alert message will pop up (this is the same alert message that we have specified in the PageLoad rule of Adobe Launch)

Now use your creativity to extend this integration.

 

Validation

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy