Set up Asset Insights with AEM Assets and Adobe Experience Platform Launch

In this 5 part video series, we walk through the setup and configuration of Asset Insights for Experience Manager deployed via Adobe Launch.

Part 1: Asset Insights Overview

Asset Insights Overview. Install Core Components, Sample Image Component and other content packages to get your environment ready.

Architecture Diagram

The video uses Core Components v2.2.2 which not no longer the latest version; be sure to use the latest version before you proceed to the next section.

• Download Asset Insights Sample Image Content
• Download the latest AEM WCM Core Components

Part 2 : Enabling Asset Insights Tracking for Sample Image Component

Enhancements to Core Components and using proxy component (Sample Image Component) for Asset Insights. Editing the content page template policies to enable sample image component for reference site.

Core Image component uses data-asset-id attribute within the parent <div> of an image tag to enable/disable this feature. Proxy Component overrides the core component with the following changes.

• Removes the data-asset-id from the parent div of an <img> element within the image.html
• Adds data-aem-asset-id directly to the <img> element within the image.html
• Adds data-trackable=‘true’ value to the <img> element within the image.html
• data-aem-asset-id and data-trackable=‘true’ are kept at the same node level

Part 3: Adobe Analytics — Creating Report Suite, enabling Real-Time data collection and AEM Assets Reporting

Report suite with real-time data collection is created for asset tracking. AEM Assets Insights configuration is set up using Adobe Analytics credentials.

For AEM Assets Insights configuration you need the following credentials

• Data Center
• Analytics Company name
• Analytics Username
• Shared Secret (can be obtained from Adobe Analytics > Admin > Company Settings > Web Service).
• Report Suite (Make sure to select the right Report Suite that is used for Asset Reporting)

Part 4: Using Adobe Experience Platform Launch for adding Adobe Analytics extension

Adding Adobe Analytics Extension, Creating Page Load rules and Integrating AEM with Launch with Adobe IMS technical account.

Rule 1 : Page Tracker (pagetracker.js)

//For AEM 6.3
<script type="text/javascript" src="http://localhost:4503/etc/clientlibs/foundation/assetinsights/pagetracker.js"></script>

//For AEM 6.4
<script type="text/javascript" src="http://localhost:4503/etc.clientlibs/dam/clientlibs/assetinsights/pagetracker.js"></script>

Page tracker implements two call backs (registered in asset-embed-code)

• <code>assetAnalytics.core.assetLoaded<code> : called when ‘load’ event is dispatched for the asset-DOM-element.
• <code>assetAnalytics.core.assetClicked<code> : called when ‘click’ event is dispatched for the asset-DOM-element this is relevant only when the asset-DOM-element has an anchor tag as parent with a valid, external ‘href’ attribute

Finally, Pagetracker implements an initialization function as.

• <code>assetAnalytics.dispatcher.init()<code> : called to initialize the Pagetracker component. This MUST be invoked before any of the asset-insights-events (Impressions and/or Clicks) are generated from the webpage.
• <code>assetAnalytics.dispatcher.init()<code> : optionally accepts an AppMeasurement object — if provided, it does not attempt to create a new instance of AppMeasurement object.

Rule 2: Image Tracker — Action 1 (asset-insights.js)

/*
 * AEM Asset Insights
 */

var sObj = window.s;
_satellite.notify('in assetAnalytics customInit');
(function initializeAssetAnalytics() {
 if ((!!window.assetAnalytics) && (!!assetAnalytics.dispatcher)) {
 _satellite.notify('assetAnalytics ready');
 /** NOTE:
  Copy over the call to 'assetAnalytics.dispatcher.init()' from Assets Pagetracker
  Be mindful about changing the AppMeasurement object as retrieved above.
  */
 assetAnalytics.dispatcher.init(
                                "",  /** RSID to send tracking-call to */
                                "",  /** Tracking Server to send tracking-call to */
                                "",  /** Visitor Namespace to send tracking-call to */
                                "",  /** listVar to put comma-separated-list of Asset IDs for Asset Impression Events in tracking-call, e.g. 'listVar1' */
                                "",  /** eVar to put Asset ID for Asset Click Events in, e.g. 'eVar3' */
                                "",  /** event to include in tracking-calls for Asset Impression Events, e.g. 'event8' */
                                "",  /** event to include in tracking-calls for Asset Click Events, e.g. 'event7' */
                                sObj  /** [OPTIONAL] if the webpage already has an AppMeasurement object, please include the object here. If unspecified, Pagetracker Core shall create its own AppMeasurement object */
                                );
 sObj.usePlugins = true;
 sObj.doPlugins = assetAnalytics.core.updateContextData;
}
 else {
 _satellite.notify('assetAnalytics not available. Consider updating the Custom Page Code', 4);
 }
})();

Rule 2: Image Tracker — Action 2 (image-tracker.js)

/*
 * AEM Asset Insights
 */

document.querySelectorAll('[data-aem-asset-id]').forEach(function(element) {
    assetAnalytics.core.assetLoaded(element);
    var parent = element.parentElement;
    if (parent.nodeName == "A") {
        parent.addEventListener("click", function() {
            assetAnalytics.core.assetClicked(this)
        });
    }
});

• assetAnalytics.core.assetLoaded() : is invoked on page load complete and is triggers Asset Impressions for all trackable images
• Analytics Variable that carries the loaded asset list : contextData[‘c.a.assets.idList’]
• assetAnalytics.core.assetClicked() : is invoked when the asset DOM element has an anchor tag with valid href value. When an asset is clicked, a cookie is created with the clicked asset ID as its value.(Cookie name: a.assets.clickedid)
• Analytics Variable that carries the loaded asset list : contextData[‘c.a.assets.clickedid’]
• Source of Origin : contextData[‘c.a.assets.source’]

Console debug statements

//Launch Build Info
_satellite.buildInfo

//Enables debug messages
_satellite.setDebug(true);

//Asset Insight JS Object
assetAnalytics

//List of trackable images
document.querySelectorAll(".cmp-image__image");

Two Google Chrome browser extensions are referenced in the video as ways to debug Analytics. Similar extensions are available for other browsers as well.

• Launch Switch Chrome Extension
• Adobe Experience Cloud Debugger

It is also possible to switch DTM into debug mode with the following Chrome Extension: Launch and DTM Switch. This makes it easier to see if there are any errors related to DTM deployment. In addition, you can manually switch DTM to debug mode via any browsers developer tools -> JS Console by adding the following snippet:

Part 5 : Testing Analytic Tracking and Syncing Insight Data

Configuring AEM Asset Reporting Sync Job Scheduler and Assets Insights Report

Business.Adobe.com resources

Auto Text Summarization Content As A Service Dynamic Media Headless Cms Digital Asset Management Digital Signage