Show Menu
TOPICS×

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

This document details how to set up an end-to-end configuration based on AEM, the Adobe Client Data Layer, Adobe Launch and Adobe Analytics to track:
  • The page ID stored in the Adobe Client Data Layer when a page is loaded
  • The image path stored in the Adobe Client Data Layer when an image is clicked
This uses the core components as an example but can be used for your own custom components.
## Step 1 - Create the Report Suite in Adobe Analytics
To aggregate and analyze your data, a report suite first must be created.
  1. Go to
    https://analytics.adobe.com
    .
  2. Sign in using your Adobe ID.
  3. Click the
    Analytics
    icon.
  4. Go to
    Admin -> Report Suites
    .
  5. Click
    Create New -> Report Suite
    .
  6. Fill the form:
    1. Report Suite ID
      :
      yourSuiteID
    2. Site Title
      :
      Your suite description
    3. Time Zone
      : As appropriate
    4. Go Live Date
      : today's date or as appropriate
    5. Estimated Page Views Per Day
      : 100 or as appropriate
  7. Click
    Create Report Suite
    .
If successful you will receive the following message in green:
Report Suite <yourReportSuite> has been successfully created.

Step 2 - Make the Report Suite Visible

To use the new report suite, it has to be visible.
  1. Go to
    https://adminconsole.adobe.com
    .
  2. Sign in using your Adobe ID.
  3. Click the
    Adobe Analytics - <yourSite>
    card
  4. Click the
    Adobe Analytics - <yourSite>
    link
  5. Select the
    Permissions
    tab
  6. Click the
    Edit
    button of the
    Report Suites
    row
  7. Click the
    +
    button of the report suite you created in step 1 to add it to the
    Included Permission Items
    category.
  8. Click
    Save
    .

Step 3 - Integrate Your AEM Site with Adobe Launch

Launch must be integrated with your AEM site to generate data.

Step 4 - Install and Configure the Adobe Analytics Extension in Adobe Launch

The Adobe Analytics Extension enables the integration of Analytics with Launch.
  1. In Adobe Launch select the newly added property that you created in step 3.
  2. Navigate to the
    Extensions
    tab and select
    Catalog
    .
  3. Search for
    Adobe Analytics
    .
  4. Click
    Install
    .
  5. Configure the extension.
    1. Enter the
      Analytics Report Suite ID
      created in step 1 for the appropriate environments
    2. Set
      Character Set
      to UTF-8
  6. Click Save

Step 5 - Create a Data Element in Adobe Launch for the Page ID

A data element is required in Launch to be able to track the page ID.
  1. In Adobe Launch select the property created in step 3.
  2. Select the
    Data Elements
    tab and click
    Add Data Element
    :
    1. Name
      :
      dl-page-id
    2. Extension
      :
      Core
    3. Data Element Type
      :
      Custom Code
  3. Click
    Open Editor
  4. In the editor, enter the code:
    return adobeDataLayer.getState().page.id;
  5. Click
    Save
    .
  6. Click
    Save
    to create the data element.

Step 6 - Create a Rule in Adobe Launch to Track the Page ID in Analytics

Rules allow tracking of browsing attributes like page ID in Analytics.
Repeat the steps in Part 5b of the Using Adobe Client Data Layer to Integrate Core Components and Adobe Launch document to add the following rule in Adobe Launch:
  • Name
    :
    track-dl-page-id
  • EVENTS:
    • Extension
      :
      Core
    • Event Type
      :
      Page Bottom
  • ACTION 1:
    • Extension
      :
      Adobe Analytics
    • Action Type
      :
      Set Variables
    • prop1
      :
      %dl-page-id%
  • ACTION 2:
    • Extension
      :
      Adobe Analytics
    • Action Type
      :
      Send Beacon
    • Check
      s.t(): Send Data to Adobe Analytics and treat it as a page view

Step 7 - Create a Rule in Adobe Launch to Register the Image Click Event

Rules allow tracking of browsing attributes like click events in Analytics.
Repeat the steps in Part 5b of the Using Adobe Client Data Layer to Integrate Core Components and Adobe Launch document to add the following rule in Adobe Launch:
  • Name
    :
    register-dl-image-click
  • EVENTS:
    • Extension
      :
      Core
    • Event Type
      :
      Page Bottom
  • ACTION 1:
    • Extension
      :
      Core
    • Action Type
      :
      Custom Code
    • Editor: Enter the following code
      var myListener = function(event) { _satellite.track('dlImageClicked', event.info.path); }; adobeDataLayer.addEventListener('image clicked', myListener());

Step 8 - Create a Rule in Adobe Launch to Track the Image Click Event in Analytics

Rules allow tracking of browsing attributes like click events in Analytics.
Repeat the steps in Part 5b of the Using Adobe Client Data Layer to Integrate Core Components and Adobe Launch document to add the following rule in Adobe Launch:
  • Name
    :
    track-dl-image-click
  • EVENTS:
    • Extension
      :
      Core
    • Event Type
      :
      Direct Call
    • Identifier
      :
      dlImageClicked
  • ACTION 1:
    • Extension
      :
      Adobe Analytics
    • Action Type
      :
      Set Variables
    • prop2
      : Set as
      %event.detail%
  • ACTION 2:
    • Extension
      :
      Adobe Analytics
    • Action Type
      :
      Send Beacon
    • Check
      s.t(): Send Data to Adobe Analytics and treat it as a page view

Step 9 - Publish the Launch Code to Your Website

To enable the tracking of these rules and properties in Launch, the code must be published.
  1. In the
    Adobe Launch
    tab, select the
    Publishing
    tab.
  2. Click
    Add New Library
    .
  3. As
    Name
    enter:
    data-layer-analytics-1
    .
  4. As
    Environment
    select
    Development (development)
    .
  5. Click
    Add All Changed Resources
    .
  6. For each of the three rules (
    track-dl-page-id
    ,
    register-dl-image-click
    and
    track-dl-image-click
    ):
  7. Select
    Rules -> rule -> Latest
    and click
    Select & Create a New Revision
    .
  8. Click
    Save & Build for Development
    .

Step 10 - Trigger Your Page to Send Information to Adobe Analytics

In this step you will install the Chrome extension
Launch and DTM Switch
. With this extension you only need to build and deploy the Launch code to the Development environment. There is no need to deploy the the Staging and Production environments.
  1. Install the Chrome extension
    Launch and DTM Switch
    from Discovery.
  2. Click the
    Launch Switch
    icon and set the Debug to
    ON
    .
  3. Reload the page
    http://<host>:<port>/content/core-components-examples/library/image.html
    .
  4. Open the browser console and you should see something similar to the following.
You can also install the
Experience Cloud Debugger
extension for Chrome to view Adobe Launch and Analytics specific information about the page.

Step 11 - View the Tracked Information in Adobe Analytics

Now you can view the events you triggered in Adobe Analytics.
  1. Go to
    https://analytics.adobe.com
    .
  2. Sign in using your Adobe ID.
  3. Click the
    Analytics
    icon.
  4. Select the
    Reports
    tab.
  5. In the dropdown on the top right, select the report suite you created in step 1.
  6. In the first column select
    Custom Traffic -> Custom Traffic 1-10 -> Custom Insight 1
    to view the tracked page IDs (paths) stored in the Data Layer. It should appear similar to the following.
  7. Access the
    Custom Insight 2
    to view the tracked image paths stored in the Data Layer. It should appear similar to the following.