Adobe Client Data Layer just works
Interested in using the Venia web property I created? Use the npm aep-tag-tool to quickly install it into your own Adobe Organization. The property and installation details can be found in the venia-tag-property repo.
As an experienced Adobe Experience Manager developer, I have primarily focused on presentation, java bundles, and devops for an AEM website. Until recently, I did not really focus on the data science part of website interactions. The Adobe Client Data Layer (ACDL) [0] [1] was introduced as Adobe’s solution to an event driven data layer that could be used as a standard for any website that required a data layer. Along with ADCL, Adobe created a companion extension for Adobe Experience Platform (AEP) Tag properties to make accessing the datalayer easier. Shortly after, the WCM Core Components project for AEM was updated to incorporate the ACDL natively. This was extremely interesting to me, because it meant I didn’t need to build my own data layer from scratch and I had a foundation to start with. This gave me the opportunity to use an AEM website with an AEP Tag property to learn more about a website datalayer.
AEP Tag properties, formerly Adobe Launch, and it’s predecessor Dynamic Tag Manager (DTM) are solutions that allow you to add a single line of javascript (also called a web property) to your website and then fully interact with the datalayer, html, DOM, and anything else in the browser window in a User Friendly interface. This allows companies to decouple website development from website tracking. A property can ‘see’ the datalayer on your website and then map and send those values to Adobe (or 3rd party) solutions.
In my job role, my coworkers work with analytics and personalization and their use cases typically require some type of shopping experience. This forced me to research a bit more beyond the typical WKND reference implementation (no commerce) and I found the Adobe eCommerce reference implementation, Venia.
Venia is an interesting project because it combines 3 separate open source projects to build the ACDL with data and events. All of the events triggered in the ACDL can be easily accessed by Tag Rules with the ACDL extension.
The WCM core components project handles events concerning the Page and typical WCM components. This includes:
- cmp:show — first event on the page and contains the page component
- cmp:loaded — fired when all components are loaded into the data layer
- cmp:show — fired again when a container component is revealed (tags, accordians, etc)
- cmp:hide — fired when a container component is hidden (tags, accordians, etc)
- cmp:click — fired when a component element is clicked and contains the component
The CIF core components project handles some events for shopping cart interactions and product related components. This includes:
- cif:addToCart
- cif:addToWishList
- cif:userSignIn
- cif:userSignOut
- cif:placeOrder
- cif:removeFromCart
The last project, Magento events SDK, is used for the purchasing experience which includes a multitude of events that can be implemented. The ones implemented in Venia are:
- product-page-view
- add-to-cart
- referrer-url
- custom-url
As I started to develop the Venia data elements, I quickly realized that all core component events had the same pattern:
In order to access the WCM/CIF component that triggered the event, I needed a special function to get them from the ACDL. This function encompasses 3 different use cases to make it a bit more flexible if the event doesn’t give the all the information I want.
Using this function as a data element, I can quickly create data elements for the desired core components and their data:
The code above gets the currencyCode from the the Core CIF Product that triggered a CIF event, such as cif:addToCart or cif:addToWishList.
To see more example data elements I created for Venia see: data-elements.md Any elements that didn’t use CIF or Magento can also be re-used for the WKND site and other WCM Core component enabled websites…. convenient. Because of this, I consider all the data element defined in the Venia Tag property project to work for any CIF/WCM core component websites.
When exploring the CIF Core components, I found documentation lacking, so the links below go into detail of available events, data objects available, and which open source project each item is from.
- Learn more about the Data Elements
- Learn more about the starter Rules
- Learn how to import this property into your own Adobe Organization
The WKND project has a great tutorial that helped me write my unique getCoreCmpJson data element to extract core component data need. Although the WKND tutorial is useful for learning, it was built before the AEP Tag extension for the ACDL was created, which means this tutorial can still be simplified by using ACDL event triggers for rules and even some data elements.
