Integration
Integrate AEM Sites and Adobe Analytics with Platform Web SDK
- Applies to:
- Experience Manager as a Cloud Service
- Topics:
- Integrations
CREATED FOR:
- Beginner
- Intermediate
- Admin
- Developer
AEM Sites as a Cloud Service, AEM Sites 6.5
Learn the modern approach on how to integrate Adobe Experience Manager (AEM) and Adobe Analytics using the Platform Web SDK. This comprehensive tutorial guides you through the process of seamlessly collecting WKND pageview and CTA click data. Gain valuable insights by visualizing the collected data in Adobe Analysis Workspace, where you can explore various metrics and dimensions. Also, explore the Platform Dataset to verify and analyze the data. Join us on this journey to harness the power of AEM and Adobe Analytics for data-driven decision-making.
Overview
Gaining insights into user behavior is a crucial objective for every marketing team. By understanding how users interact with their content, teams can make informed decisions, optimize strategies, and drive better results. The WKND marketing team, a fictional entity, has set its sights on implementing Adobe Analytics on their website to achieve this goal. The primary objective is to collect data on two key metrics: pageviews and homepage call-to-action (CTA) clicks.
By tracking pageviews, the team is able to analyze which pages are receiving the most attention from users. Also, tracking homepage CTA clicks provides valuable insights into the effectiveness of the team’s call-to-action elements. This data may reveal which CTAs are resonating with users, which ones need adjustment, and potentially uncover new opportunities to enhance user engagement and drive conversions.
Prerequisites
The following are required when integrating Adobe Analytics using Platform Web SDK.
You have completed the setup steps from the Integrate Experience Platform Web SDK tutorial.
In AEM as Cloud Service:
- AEM Administrator access to AEM as a Cloud Service environment
- Deployment Manager access to Cloud Manager
- Clone and deploy the WKND - sample Adobe Experience Manager project to your AEM as a Cloud Service environment.
In Adobe Analytics:
- Access to create Report Suite
- Access to create Analysis Workspace
In Experience Platform:
- Access to the default production, Prod sandbox.
- Access to Schemas under Data Management
- Access to Datasets under Data Management
- Access to Datastreams under Data Collection
- Access to Tags under Data Collection
In case you do not have necessary permissions, your system administrator using Adobe Admin Console can grant necessary permissions.
Before delving into the integration process of AEM and Analytics using Platform Web SDK, let’s recap the essential components and key elements that were established in the Integrate Experience Platform Web SDK tutorial. It provides a solid foundation for the integration.
After the recap of the XDM Schema, Datastream, Dataset, Tag property and, AEM and tag property connection, let’s embark on the integration journey.
Define Analytics Solution Design Reference (SDR) document
As part of the implementation process, it is recommended to create a Solution Design Reference (SDR) document. This document plays a crucial role as a blueprint for defining business requirements and designing effective data collection strategies.
The SDR document provides a comprehensive overview of the implementation plan, ensuring that all stakeholders are aligned and understand the objectives and scope of the project.
For more information on concepts and various elements that should be included in the SDR document visit the Create and maintain a Solution Design Reference (SDR) Document. You can also download a sample Excel template, however WKND-specific version is also available here.
Set up Analytics - report suite, Analysis Workspace
The first step is to set up Adobe Analytics, specifically report suite with conversion variables (or eVar) and success events. The conversion variables are used to measure cause and effect. The success events are used to track actions.
In this tutorial, eVar5, eVar6, and eVar7 track WKND Page Name, WKND CTA ID, and WKND CTA Name respectively, and event7 is used to track WKND CTA Click Event.
To analyze, gather insights and share those insights with others from the collected data, a project in Analysis Workspace is created.
To learn more about Analytics setup and concepts, the following resources are highly recommended:
Update Datastream - Add Analytics Service
A Datastream instructs the Platform Edge Network where to send the collected data. In the previous tutorial, a Datastream is configured to send the data to the Experience Platform. This Datastream is updated to send the data to the Analytics report suite that was configured in the above step.
Create XDM Schema
The Experience Data Model (XDM) Schema helps you to standardize the collected data. In the previous tutorial, an XDM schema with AEP Web SDK ExperienceEvent a field group is created. Also, using this XDM schema a Dataset is created to store the collected data in the Experience Platform.
However, that XDM Schema does not have Adobe Analytics-specific field groups to send the eVar, event data. A new XDM schema is created instead of updating the existing schema to avoid storing the eVar, event data in the platform.
The newly created XDM schema has AEP Web SDK ExperienceEvent and Adobe Analytics ExperienceEvent Full Extension field groups.
Update Tag property
In the previous tutorial, a tag property is created, it has Data Elements and a Rule to gather, map, and send the pageview data. It must be enhanced for:
- Mapping the page name to
eVar5 - Triggering the pageview Analytics call ( or send beacon)
- Gathering CTA data using the Adobe Client Data Layer
- Mapping the CTA ID and Name to
eVar6andeVar7respectively. Also, the CTA click count toevent7 - Triggering the link click Analytics call ( or send beacon)
TIP-
The
Component IDData Element code.if(event && event.path && event.path.includes('.')) { // split on the `.` to return just the component ID for e.g. button-06bc532b85, tabs-bb27f4f426-item-cc9c2e6718 return event.path.split('.')[1]; }else { //return dummy ID return "WKND-CTA-ID"; } -
The
Component NameData Element code.if(event && event.component && event.component.hasOwnProperty('dc:title')) { // Return the Button, Link, Image, Tab name, for e.g. View Trips, Full Article, See Trips return event.component['dc:title']; }else { //return dummy ID return "WKND-CTA-Name"; } -
The
all pages - on loadRule-Condition codeif(event && event.component && event.component.hasOwnProperty('@type') && event.component.hasOwnProperty('xdm:template')) { return true; }else{ return false; } -
The
home page - cta clickRule-Event codevar componentClickedHandler = function(evt) { // defensive coding to avoid a null pointer exception if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) { //trigger Tag Rule and pass event console.log("cmp:click event: " + evt.eventInfo.path); var event = { //include the path of the component that triggered the event path: evt.eventInfo.path, //get the state of the component that triggered the event component: window.adobeDataLayer.getState(evt.eventInfo.path) }; //Trigger the Tag Rule, passing in the new `event` object // the `event` obj can now be referenced by the reserved name `event` by other Tag Property data elements // i.e `event.component['someKey']` trigger(event); } } //set the namespace to avoid a potential race condition window.adobeDataLayer = window.adobeDataLayer || []; //push the event listener for cmp:click into the data layer window.adobeDataLayer.push(function (dl) { //add event listener for `cmp:click` and callback to the `componentClickedHandler` function dl.addEventListener("cmp:click", componentClickedHandler); }); -
The
home page - cta clickRule-Condition codeif(event && event.component && event.component.hasOwnProperty('@type')) { //Check for Button Type OR Teaser CTA type if(event.component['@type'] === 'wknd/components/button' || event.component['@type'] === 'wknd/components/teaser/cta') { return true; } } // none of the conditions are met, return false return false;
For additional information on integrating AEM Core Components with Adobe Client Data Layer, refer to the Using the Adobe Client Data Layer with AEM Core Components guide.
INFOVerify updated Tag property on WKND
To ensure that the updated tag property is built, published, and working correctly on the WKND site pages. Use the Google Chrome web browser’s Adobe Experience Platform Debugger extension:
-
To ensure that the tag property is the latest version, check the build date.
-
To verify the XDM event data for both PageView and HomePage CTA Click, use the Experience Platform Web SDK menu option within the extension.
Simulate web traffic - Selenium automation
To generate a meaningful amount of traffic for testing purposes, a Selenium automation script is developed. This custom script simulates user interactions with the WKND website like page view and clicking CTAs.
Dataset verification - WKND pageview, CTA data
The dataset is a storage and management construct for a collection of data like a database table that follows a schema. The Dataset created in the previous tutorial is reused to verify that the pageview and CTA click data is ingested into the Experience Platform Dataset. Within the Dataset UI, various details such as total records, size, and ingested batches are displayed along with a visually appealing bar graph.
Analytics - WKND pageview, CTA data visualization
Analysis Workspace is a powerful tool within Adobe Analytics that allows to explore and visualize data in a flexible and interactive manner. It provides a drag-and-drop interface to create custom reports, perform advanced segmentation, and apply various data visualizations.
Let’s reopen the Analysis Workspace project created in the Setup Analytics step. In the Top Pages section, examine various metrics such as visits, unique visitors, entries, bounce rate, and more. To assess the performance of WKND pages and home page CTAs, drag-and-drop the WKND-specific dimensions (WKND Page Name, WKND CTA Name) and metrics (WKND CTA Click Event). These insights are valuable for marketers to understand which CTAs are more effective and make data-driven decisions, aligned with their business objectives.
To visualize user journeys, use the Flow visualization, starting with the WKND Page Name and expanding into various paths.
Summary
Great job! You have completed the setup of AEM and Adobe Analytics using Platform Web SDK to collect, analyze the pageview and CTA click data.
Implementing Adobe Analytics is crucial for marketing teams to gain insights into user behavior, make informed decisions, enabling them to optimize their content and make data-driven decisions.
By implementing the recommended steps and using the provided resources, such as the Solution Design Reference (SDR) document and understanding key Analytics concepts, marketers can effectively collect and analyze data.
AVAILABILITY