Talks about how to Integrate AEM 6.3 with Adobe Launch

Article summary

Summary

Discusses how to integrate AEM 6.3 with Adobe Launch

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.3
Audience Developer, Administrator
Required Skills AEM Authoring, Adobe Launch Authoring
Version 6.3

Introduction

This article will help you integrate AEM with Adobe Launch (successor of DTM). In AEM 6.3 we don't have OOTB Adobe Launch configuration, therefore, we will use the approach mentioned in this article to achieve the AEM 6.3 integration with Adobe launch.

In order to integrate software such as Adobe Analytics, Adobe Target, or a variety of other third-party software across digital properties that 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.

Note:

For AEM 6.4, do not use the approach mentioned in this article.

Recommended Approach for AEM 6.4 and Adobe Launch Integration:- https://helpx.adobe.com/experience-manager/using/aem_launch_adobeio_integration.html

Prerequisites

  • AEM 6.3
  • Adobe Launch

General Steps

  1. In Adobe Launch, Create a property
  2. Adding Adobe Launch's Header in AEM
  3. Validate integration manually
  4. Publishing the Changes

Adobe Launch, Create a property

  1. Log in to the Adobe Launch
  2. Click New Property
  3. Give Name: AEM63Launch 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: AEM6318April 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: AEM63DEV18April
  3. Select Adapter: AEM6318April (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

Adding Adobe Launch's Header in AEM

AEM Configuration

Come Back to the AEM instance
  1. Go to CRXDE lite > http://localhost:4502/crx/de/index.jsp (Make sure you have editing rights here)
  2. Go the the Template of the WebPage under the apps directory > Check the sling:resourceType, go to the component path mentioned there. [This Component is Page Component]
  3. And Paste the Adobe Launch Script to the top of the content.html
  4. Click Save all
Adobe Launch Config
Stage

Note:

We can also copy Adobe Launch's Header script to custom Header HTML and "<script type="text/javascript">_satellite.pageBottom();</Script>" to custom footer HTML of the page component.

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

  1. Go to http://localhost:4502/content/summit-toys.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

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:4502/content/summit-toys.html [WebPage]
  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

Publishing the Changes

All the file that we changed from CRXDE Lite, we have to publish them as well. WebPage publishing would not publish these changes. We need to explicitly publish them from the AEM's Active Tree

  • Go to http://localhost:4502/etc/replication/treeactivation.html
  • Specify the pact of the page component file that you edited in "Start Path" of Activate Tree
  • UnCheck all the option and Click Activate

Do Activate all the files that you edited.

activateTree

Now, you would see the alert popup coming up on your Publish instance as well.

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