Show Menu
TOPICS×

Using Adobe Client Data Layer to Integrate Core Components and Adobe Launch

The Core Components can be integrated with Adobe Launch by using the Adobe Client Data Layer. This document describes how to configure Adobe Launch to track click events for image components as an example.
When configured, Launch will produce the following output in the browser console when a Core Image component is clicked.

Launch Integration with AEM

First Adobe Launch must be integrated with your AEM site.

Step 1 - Create an Integration in Adobe I/O

First sign in to Adobe I/O to start configuring an integration.
  1. Go to
    https://console.adobe.io
    .
  2. Sign in using your Adobe ID.
  3. In the Quick Start section click
    Create integration
    .
  4. Select
    Access an API
    and click
    Continue
    .
  5. Select
    Experience Platform Launch API
    below Adobe Experience Platform and click
    Continue
    .

Step 2 - Create an IMS Configuration in AEM

In AEM you need to define the integration that you began configuring in Adobe I/O.
  1. Go to the AEM home page, click
    Tools -> Security -> Adobe IMS Configurations
    .
  2. Click
    Create
    .
  3. As
    Cloud Solution
    , select
    Adobe Launch
    .
  4. Check
    Create new certificate
    .
  5. Enter an alias for the certificate such as
    aem-launch-certificate
    .
  6. Click
    Create certificate
    and in the pop-up click
    OK
    to create the certificate.
  7. Click
    Download Public Key
    and in the pop-up click
    Download
    .

Step 3 - Finish Adobe I/O Configuration

With the certificate and key created in AEM IMS configuration, you can finish your Adobe I/O configuration.
  1. Go back to the Adobe I/O console as in step 1.
  2. In the
    Create a new integration
    window, enter a name and a description such as
    AEM Launch data layer
    .
  3. Under
    Public keys certificates
    , upload the certificate that you created in step 2.
  4. Select the
    Launch - Prod profile
    .
  5. Click
    Create integration
    .
  6. Click
    Continue to integration details
    . You will need these details later to finish the IMS configuration in your AEM instance.

Step 4 - Finish IMS Configuration

With the Adobe I/O integration details, you can finish the AEM IMS configuration.
  1. In the AEM tab, in the
    Adobe IMS Technical Account Configuration
    tab from step 2, click
    Next
    .
  2. Enter a title such as
    IMS configuration for Adobe Launch
    .
  3. In the Adobe I/O tab, copy the
    API Key (Client ID)
    .
  4. In the AEM tab, paste the former copied key in the
    API Key field
    .
  5. In Adobe I/O, click
    Retrieve Client Secret
    and copy it.
  6. In the AEM tab paste it into the
    Client Secret
    field.
  7. In the Adobe I/O tab, select the
    JWT
    tab and copy the URL such as
    https://ims-na1.adobelogin.com
    .
  8. In the AEM tab, paste the URL into the
    Authorization Server
    field.
  9. In the Adobe I/O tab, copy the JWT payload (the code between the braces).
  10. In the AEM tab, paste it into the
    Payload
    field.
  11. Click
    Create
    to create the IMS configuration in AEM.

Step 5a - Create a Property in Adobe Launch

A property defines features that Launch can inject to your site.
  1. Go to Adobe Launch at
    https://launch.adobe.com
    .
  2. Sign in using your Adobe ID.
  3. Click
    New Property
    .
  4. Enter a name such as
    Launch AEM Data Layer
    .
  5. Enter your domain.
  6. Click
    Save
    .

Step 5b - Create a Rule in Launch

Using the property you created, you can define a rule, which specifies what should happen when an action occurs.
  1. Click the newly added property from step 5
    Launch AEM Data Layer
    .
  2. Select the
    Rules
    tab and click
    Create New Rule
    .
  3. Enter a name such as
    image-click
    .
  4. Click the
    +
    button below
    Events
    .
  5. Select
    Core
    as
    Extension
    ,
    Click
    as
    Event Type
    and enter
    .cmp-image
    as
    CSS selector
    .
  6. Click
    Keep Changes
    .
  7. Click the
    +
    button below
    Actions
    .
  8. Select
    Core
    as
    Extension
    ,
    Custom Code
    as
    Action Type
    and click
    Open Editor
    .
  9. In the editor, enter the following code:
    console.log("DOM click event tracked by Launch for image: ", event.target.src);
  10. Click
    Save
    .
  11. Click
    Keep Changes
    .
  12. Click
    Save
    to create the new rule.

Step 6 - Publish the Launch Rule

To make the new rule available for your AEM site, you need to publish it.
  1. In the
    Adobe Launch
    tab, select the
    Publishing
    tab.
  2. Click
    Add New Library
    .
  3. Enter a
    Name
    as appropriate such as
    demo-1
    .
  4. For
    Environment
    select as appropriate, such as
    Development (development)
    .
  5. Click
    Add a Resource
    .
  6. Select
    Rules -> image-click -> Latest
    and click
    Select & Create a New Revision
    .
  7. Click
    Save & Build for Development
    .
  8. In the popup, click
    Apply Updates and Continue
    .
  9. When the library is built, click the ellipsis icon and select
    Submit for Approval
    .
  10. In the popup click
    Submit
    .
  11. Click the ellipsis icon and select
    Build for Staging
    .
  12. When the build is finished, click the ellipsis icon and select
    Approve for Publishing
    .
  13. In the popup click
    Approve
    .
  14. Click the ellipsis icon and select
    Build & Publish to Production
    .
  15. In the popup click
    Publish
    .

Step 7 - Enable Cloud Configurations for Your Site

To use the integration, it needs to be assigned in AEM as a cloud configuration.
  1. In the AEM console, click
    Tools -> General -> Configuration Browser
    .
  2. Check the
    Core Components Examples
    and click
    Properties
    .
  3. Check the
    Cloud Configurations
    and click
    Save & Close
    .

Step 8 - Create a Launch Integration with Your Site in AEM

A Launch integration is necessary for AEM to work with Launch
  1. In the AEM console, click
    Tools -> Cloud Services -> Adobe Launch Configurations
    .
  2. Select
    Core Component Examples
    and click
    Create
    .
  3. Enter a
    Title
    such as
    Launch configuration
    .
  4. Select the IMS configuration that you created in step 4.
  5. As
    Company
    select as appropriate.
  6. As
    Property
    select the newly added Launch property created in step 5.
  7. Move the
    Include Production Code on Author
    slider to the right and click
    Next
    .
  8. Click
    Next
    .
  9. Click
    Next
    .
  10. Click
    Create
    .

Step 9 - Connect Your AEM Site to the Launch Integration

For AEM to use the Launch integration it needs to be assigned as a cloud configuration.
  1. In the AEM console, click
    Sites
    and check the
    Core Component
    s site.
  2. Click
    Properties
    .
  3. Select the
    Advanced
    tab.
  4. As
    Cloud Configuration
    , select the
    Core Components Examples
    and click
    Select
    .
  5. Click
    Save & Close
    .

Step 10 - Verify That the Launch Logic is Applied to the Page

Test that the steps so far have been successful.
  1. Open the Image page of the Core Components Library in preview mode:
    http://<lhost&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Click an image and verify that the message
    A Core Image was clicked
    is displayed in the browser console.

Launch Integration with AEM and the Data Layer

Now that the Integration between AEM and Launch is set up, we can integrate with the Data Layer.

Step 1 - Create a rule in Adobe Launch

Repeat the steps in step 5 to add a new rule in Adobe Launch using the following values.
  • Name:
    image-click-data-layer
  • EVENTS:
    • Extension: Core
    • Event Type: DOM Ready
  • ACTIONS:
    • Extension: Core
    • Action Type: Custom Code
    • Code:
      function onImageClick(event) { console.log("Data layer click event tracked by Launch for image: " + event.info.path); console.log("dataLayer.getState(): ", adobeDataLayer.getState()); } adobeDataLayer.addEventListener('image clicked', onImageClick);

Step 2 - Publish the Launch Rule to Make It Available to Your AEM Site

Repeat the steps in step 6 to publish the new rule.

Step 3 - Verify That the Launch Logic is Applied to the Page

  1. Open the Image page of the Core Components Library in preview mode:
    http://<host&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Click an image and verify that the following message is displayed in the browser console: