[Integration]{class="badge positive"}
Last update: Tue Sep 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
CREATED FOR:
- Beginner
- Intermediate
- Admin
- Developer
[AEM Sites as a Cloud Service]{class="badge informative"}
Learn how to integrate AEM as a Cloud Service with Experience Platform Web SDK. This foundational step is essential for integrating Adobe Experience Cloud products, such as Adobe Analytics, Target, or recent innovative products like Real-Time Customer Data Platform, Customer Journey Analytics, and Journey Optimizer.
You also learn how to collect and send WKND - sample Adobe Experience Manager project pageview data in the Experience Platform.
After completing this setup, you have implemented a solid foundation. Also, you are ready to advance the Experience Platform implementation using applications like Real-Time Customer Data Platform (Real-Time CDP), Customer Journey Analytics (CJA), and Adobe Journey Optimizer (AJO). The advanced implementation helps to drive better customer engagement by standardizing the web and customer data.
Prerequisites
The following are required when integrating Experience Platform Web SDK.
In AEM as Cloud Service:
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 the necessary permissions, your system administrator using Adobe Admin Console can grant the necessary permissions.
In this video, I will show you how to set up AEM with Adobe Experience Platform Web SDK. This foundational step is essential for integrating Adobe Experience Cloud products such as Adobe Analytics, Target or recent innovative products like Real-Time Customer Data Platform, Customer Journey Analytics and Adobe Journey Optimizer. By completing this setup, we can move forward to implement Experience Platform which will enable you to centralize and standardize the customer data and web data from any system. This will allow you to deliver rich, personalized experiences to your customers and ultimately driving an exceptional customer experience. So let’s get started and lay the foundation for a seamless integration of Experience Cloud products with AEM using Web SDK. Before we begin with the setup, let’s take a moment to understand what Experience Platform Web SDK is. It’s a client-side JavaScript library that replaces previous product-specific libraries such as AppMeasurement.js and 80.js. The goal of Web SDK library is to address challenges like ensuring the correct order of tags and events triggering and also improving compatibility between libraries. This means that we only need this single JavaScript library to integrate any Experience Cloud products. Additionally, the Experience Platform Web SDK enables interaction with various Experience Cloud services through the Adobe Experience Platform Edge network. This network is a global distributed network of servers designed for low-latency data collection and rapid data activation across all channels. By utilizing this network, you can ensure that your customer data is collected and activated quickly and effectively. Now that we have a better understanding of Experience Platform Web SDK and the Experience Platform Edge network, let’s move forward with the setup process. A quick note, we’ll be using Weaken, the sample AEM project for the purpose of demonstration. I have cloned the GitHub repository and deployed it to my AEM as a cloud service environment using Cloud Manager Full Stack Pipeline. In addition, we’ll only be collecting Weaken page view data to keep the process simple. Also, I have necessary permissions in Experience Platform to carry out the setup. If you don’t have access, you can coordinate with your system administrator to request access or alter permissions via Adobe Admin Console.
The Experience Data Model (XDM) Schema helps you to standardize the customer experience data. To collect the WKND pageview data, create an XDM Schema and use the Adobe provided field groups AEP Web SDK ExperienceEvent for web data collection.
There are generic and industries specific for example Retail, Financial Services, Healthcare, and more, suite of reference data models, see Industry data models overview for more information.
The very first step in setting up AIM with Experience Platform Web SDK is creating an XDM schema to collect website data. This data will be collected when customers visit your site and browse through the products or services you offer. To create the XDM schema, head over to the Experience Cloud homepage and log in to your organization using your Adobe ID. Once logged in, navigate to the Experience Platform application by clicking on it in the Quick Access section. From there, click on Schemas to create or access a list of existing schemas. To create a new schema, click the Create Schema button and select the XDM Experience Event option. To define the fields and field groups for the schema, click the Add button and search for Web SDK. Select the existing AEP Web SDK Experience Event field groups provided by Adobe. You can reveal the details of the field groups before adding them to your schema. Finally, name your schema using the Display Name input field. By using existing field groups, you are all set for the common data collection on the website. However, for more complex use cases, you can create a new field group from scratch. But most of the time, that’s not required. Now that we have set up the XDM schema, the Web SDK can utilize this standardized data structure to map the collected data and send it to the Experience Platform edge network.
Learn about XDM Schema and related concepts such as field groups, types, classes, and data types from the XDM System overview.
The XDM System overview is a great resource to learn about XDM Schema and related concepts such as field groups, types, classes, and data types. It provides a comprehensive understanding of the XDM data model and how to create and manage XDM Schemas to standardize data across the enterprise. Explore it to gain a deeper understanding of the XDM Schema and how it can benefit your data collection and management processes.
A Datastream instructs the Platform Edge Network where to send the collected data. For example, it can be sent to Experience Platform or Analytics, or Adobe Target.
Familiarize yourself with the concept of Datastreams and related topics such as data governance and configuration by visiting the Datastreams overview page.
Learn how to create a tag property in Experience Platform to add the Web SDK JavaScript library to the WKND website. The newly defined tag property has the following resources:
- Tag Extensions: Core and Adobe Experience Platform Web SDK
- Data Elements: The data elements of custom code type that extract page-name, site-section, and host-name using WKND site’s Adobe Client Data Layer. Also, the XDM Object type data element that complies with the newly created WKND XDM Schema build-in earlier Create XDM Schema step.
- Rule: Send data to Platform Edge Network whenever a WKND webpage is visited using the Adobe Client Data Layer triggered
cmp:show event.
While building and publishing the tag library using the Publishing Flow, you can use the Add All Changed Resources button. To select all the resources like Data Element, Rule, and Tag Extensions instead of identifying and picking an individual resource. Also, during the development phase, you can publish the library just to the Development environment, then verify and promote it to the Stage or Production environment.
Alright, the next logical step is how to add the WebSTK JavaScript library to our Weaken website to collect and send this data to the platform. As you guessed, we have to use data collection tags or formerly known as LAUNCH. So let’s create a tag property, then install the tag extension called Experience Platform WebSTK and configure it. First, click on tags in the left navigation, then click on the New Property button to create a new tag property. Give it a name and for the Domains field, as we are using AIM as a cloud service environment, we will add adobeamcloud.com. Once done, save the new property. Next, go to the Extensions menu item and install the WebSTK extension by searching for WebSTK. While configuring it, you can leave the default settings but configure the data stream section and use the data stream we created in earlier step. For real production setup, you will configure all three environments and not just production. Finally, save the changes. In order to collect the Weakened pageview data, we have to define a few data elements like page name, site section, hostname and this can be captured from the data layer of the web page. If you recall, the Weakened site is built using WCM core components and these components are integrated with Adobe Client Data Layer. The Adobe Client Data Layer is a platform-agnostic standard method to expose and access any type of web data from any JavaScript library. So before we define the data elements, let’s review the Adobe Client Data Layer on the Weakened homepage. In the browser console, type adobedataleer.getstate to review the current state of the data layer. We can see the information about the page data like page name, path and more. And when a web page is loaded, the CMP show event is triggered with the page data object. Let’s use this page data object’s properties to define the data elements using custom JavaScript code. First, click on data elements in the left navigation, then add data element. Give it a name and select custom code for the type, then open editor to add the JavaScript code. This code performs few not null checks and simply returns the DC title property value which is nothing but the web page title. Next, let’s define the site section. We will use the RepoPath property value, but replace the slash with the colon and remove the redundant content term from it. Finally, let’s define the HostName data element by using the window.location.hostname object. All right. The tag property creation is coming along well. Next, we have to map these data elements to the XTM schema we defined in very first step. Remember, the schema provides the standard structure, so this collected data has to be mapped to the fields of the XTM object. To do that, we have to create a new data element. Let’s call it XTM content and extension as a platform web SDK and type as XTM object. Then select our weekend schema. Then expand the web and web page details object, map name, server and site section with respective data elements and finally save the changes. Perfect. By creating data elements, we have provided the necessary instructions on how to extract the web page data and map it to the XTM schema. The next step is to send this data to the platform edge network. For that, we have to create a tag rule. First, click on rules in the left navigation, then add rule button. The tag rule is comprised of event, condition and action. So in our case, the event is when a weekend page is loaded which triggers the CMP show event from the data layer. So let’s handle that by creating an event configuration. Here select the custom code option from the event type. Then open the editor to add the JavaScript code. This code adds the event listener and callback function for the CMP show event, then pushes it onto the Adobe client data layer. The callback function gets the information about the element that triggered this event using get state method. Finally, it triggers this tag rule by calling the trigger method with the new event object containing the page data object. Also, remember using this event and page data object, we created the data elements like page name and site section. Next, let’s add action to this tag rule by creating an action configuration. For the extension field, select the Adobe experience platform web SDK option and for action type, select the send event. Then in the right panel, select the page views event type and select XTM content data element. Finally, save all your changes and provide a name for this tag rule. Here I’m naming it as all pages hyphen onload, meaning it gets loaded on all the pages when page is loaded. This completes the tag rule creation, it’s time to publish it by creating a library. Let’s jump to the publishing flow menu item, which has a swim lane structure to activate your changes by following the review and approval process. So by creating the tag property, we have provided the necessary details about what data to collect, when to collect it and how to map it before sending it to the platform edge network.
The Data Element and Rule-Event code shown in the video is available for your reference, expand the below accordion element. However, if you are NOT using Adobe Client Data Layer, you must modify the below code but the concept of defining the Data Elements and using them in the Rule definition still applies.
Data Element and Rule-Event Code
-
The Page Name Data Element code.
| code language-javascript |
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
// return value of 'dc:title' from the data layer Page object, which is propogated via 'cmp:show` event
return event.component['dc:title'];
}
|
-
The Site Section Data Element code.
| code language-javascript |
if(event && event.component && event.component.hasOwnProperty('repo:path')) {
let pagePath = event.component['repo:path'];
let siteSection = '';
//Check of html String in URL.
if (pagePath.indexOf('.html') > -1) {
siteSection = pagePath.substring(0, pagePath.lastIndexOf('.html'));
//replace slash with colon
siteSection = siteSection.replaceAll('/', ':');
//remove `:content`
siteSection = siteSection.replaceAll(':content:','');
}
return siteSection
}
|
-
The Host Name Data Element code.
| code language-javascript |
if(window && window.location && window.location.hostname) {
return window.location.hostname;
}
|
-
The all pages - on load Rule-Event code
| code language-javascript |
var pageShownEventHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
// trigger tags Rule and pass event
console.debug("cmp:show 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 tags Rule, passing in the new 'event' object
// the 'event' obj can now be referenced by the reserved name 'event' by other tags 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:show into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for 'cmp:show' and callback to the 'pageShownEventHandler' function
dl.addEventListener("cmp:show", pageShownEventHandler);
});
|
The Tags overview provides in-depth knowledge about important concepts such as Data Elements, Rules, and Extensions.
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.
Connect Tag property to AEM
Discover how to link the recently created tag property to AEM through Adobe IMS and tags in Adobe Experience Platform Configuration in AEM. When an AEM as a Cloud Service environment is established, several Adobe IMS Technical Account configurations are automatically generated, including tags. For step-by-step instructions, see Connect AEM Sites with Tag Property using IMS.
However, for AEM 6.5 version, you must configure one manually.
After linking the tag property, the WKND site is able to load the tag property’s JavaScript library onto the web pages using the tags in Adobe Experience Platform cloud service configuration.
Verify Tag property loading on WKND
Using the Adobe Experience Platform Debugger Chrome extension, verify if the tag property is loading on WKND pages. You can verify,
- Tag property details such as extension, version, name and more.
- Platform Web SDK library version, Datastream ID
- XDM Object as part
events attribute in Experience Platform Web SDK
Excellent. The next step as part of this overall set of processes, asking the weekend site to start loading this tags property. To do that, we have to connect AEM and tag property using Adobe IMS and Adobe Launch configuration in AEM. So let’s head over to the AEM as a cloud service environment and login into the AEM author service. To ensure that the auto-created Adobe Launch Cloud Solution technical account configuration is functioning properly, we need to go to Tools, Security and open the Adobe IMS configuration. Here we can verify the health of the Adobe Launch config. It’s important to note that although the new terminology is tags in experience platform, the AEM product UI still refers to it as launch. Next, we need to create an Adobe Launch configuration to connect our weekend site to the tag property. To do this, we can navigate to the Tools, Cloud Services, Adobe Launch configurations in AEM. Then select the weekend site and click on the create button. After providing the necessary details, we can select the tag property that we created in the earlier step in the property field. Then click next. We can keep the default values for the staging and production steps. And finally save our changes. Also publish this configuration so that it’s available on the AEM publish service. Remember, these cloud service configurations are already applied to the weekend site and we can verify them from the root weekend site page properties advanced tab. And all subsequent child pages inherit these cloud configurations. Now let’s verify if the tag property is loading on our weekend pages by using the Adobe Experience Platform Debugger Chrome extension. The Chrome extension shows the name of the tag property and its details such as extension, version and more. In addition, we can use the network request tab in the Adobe Experience Platform Web SDK to view the XTM object with web page data values we want to send to the edge network. This will allow us to confirm if the data collection is happening as expected.
The pageview data collected using Web SDK is stored in the Experience Platform data lake as datasets. The dataset is a storage and management construct for a collection of data like a database table that follows a schema. Learn how to create a Dataset and configure the earlier created Datastream to send data to the Experience Platform.
The data collected using Web SDK is stored in the Experience Platform data lake as datasets. The dataset is a storage and management construct for a collection of data like a database table that follows a schema. So let’s create a dataset to track the details of this weekend web data. For that, we have to go back to the Experience Platform UI and create a dataset using our weekend schema. Then we have to configure our previously created data stream to send data to Adobe Experience Platform. So let’s reopen the data stream for editing and click Add Service. Then select Adobe Experience Platform value from Services field and then previously created dataset value for the dataset field and save your changes. The process of setting up AEM with Adobe Experience Platform Web SDK is now complete.
The Datasets overview provides more information on concepts, configurations, and other ingestion capabilities.
WKND pageview data in Experience Platform
After the setup of the Web SDK with AEM, particularly on the WKND site, it’s time to generate traffic by navigating through the site pages. Then confirm that the pageview data is being 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.
Let’s visit the weekend website and generate some web data by navigating to the adventure and magazine sections. Please note, it may take up to 10 to 15 minutes for the weekend web data to appear in the dataset. I have paused the video and let’s confirm the weekend web data is ingested into the platform. As you can see, the dataset view provides various details like total records, size, and a bar graph, also the details of the ingested batches. Now you know the power of the Experience platform in terms of the ease, standardization, and speed of data collection. However, this is just the beginning as we have only scratched the surface by collecting the page view data. With these data collection concepts, you can easily take your implementation to the next level to gain insights and react quickly. You can also apply effective data science techniques to see what’s working and what is not. Experience platform provides you with the tools to drive your customer experiences forward.
Summary
Great job! You have completed the setup of AEM with Experience Platform Web SDK to collect and ingest data from a website. With this foundation, you can now explore further possibilities to enhance and integrate products like Analytics, Target, Customer Journey Analytics (CJA), and many others to create rich, personalized experiences for your customers. Keep learning and exploring to unleash the full potential of Adobe Experience Cloud.
This is it folks and congratulations, we learned about setting up AEM with Adobe Experience Platform Web SDK to collect and ingest data from our website, specifically the Wekin site. We went through the process of creating an XTM schema, data stream and tag property and connecting it to the AEM. Finally, we verified the data ingestion and viewed the details of the dataset in AEP UI. Overall, this setup enables organizations to collect and analyze website data to gain insights and make data-driven decisions. Thank you for watching, I hope you found it informative and helpful. Happy learning!
If you prefer the
end-to-end video that covers the entire integration process instead of individual setup step videos, you can click
here to access it.
Additional Resources
bb44cebf-d964-4e3c-b64e-ce882243fe4d