Using the Adobe Client Data Layer with AEM Core Components overview

The Adobe Client Data Layer introduces a standard method to collect and store data about a visitor’s experience on a webpage and then make it easy to access this data. The Adobe Client Data Layer is platform agnostic, but is fully integrated into the Core Components for use with AEM.

Transcript
Hello, in this video we’re going to look at the Adobe Client Data Layer and how it’s used by AEM Core Components.
Before we dive into the Adobe Client Data Layer, let’s take a step back and discuss what is a data layer? So in this context, a data layer is a JavaScript based framework that exposes data about how a visitor is interacting with a website and this can range from page impressions, to clicks, to other conversion events. Now this data can be sent off to other applications like Analytics and Target to then get a better understanding of website performance. Now a key feature of a good data layer is that it’s easy to access data and that this data can be exposed in a safe and reliable manner. And then lastly, we want the data layer to be decoupled from the presentation layer of the website.
So let’s look at the data layer in practice. So in this diagram at the bottom of our screen we’ve got Adobe Experience Manager which is our website and what we want to do is expose data about this website to our tag management solution, in this case, Adobe Experience Platform Launch, which in turn would take that data and expose it downstream to Adobe Analytics, Adobe Target, maybe some other third party data consumers. One way to expose data is to use something called DOM scraping. Now this is the process of inspecting or scraping the raw HTML of a website and then collecting that data. This is a low cost solution but it really doesn’t scale well since it’s very tightly coupled to the presentation layer of the website. Instead we introduce the data layer, which is a small, lightweight, JavaScript layer populated with much of the same data as the website. Now, since the data layer is in JavaScript and it’s already decoupled from the website, it makes it much easier for tag management solutions like Launch to then access and interact with that data.
All right, so now let’s talk about the Adobe Client Data Layer. The Adobe Client Data Layer introduces a standard method to collect and store data about a visitor’s experience on a webpage and then makes it really easy to access this data. Now, many implementations don’t use a data layer because building one from scratch takes a little bit of time and it can be expensive. However anyone can use the Adobe Client Data Layer, it’s open source and free to use for any implementation.
The Adobe Client Data Layer is event driven and uses an event queue to track different events that occur on a page and the big motivator behind an event driven data layer is you’re going to avoid race conditions. Instead, as long as your rules are being triggered by events that were properly registered in the data layer, you never have to worry about the state of an object not being ready or data getting lost. The Adobe Client Data Layer is also really simple and built to be extensible so implementations can store any kind of data that they want and it’s very easy to register and listen for custom events. Also the Adobe Client Data Layer is open-sourced so if you have additions or want to understand more about how something is working, it’s all there on GitHub. All right so we’ve got a good understanding of the Adobe Client Data Layer. Next let’s look at AEM Core Components. So AEM Core Components if you’re not familiar is a standard set of components that are free to use for building AEM sites. AEM Core Components includes an implementation of the Adobe Client Data Layer out of the box and each core component is set up to expose content via the data layer and if you generate your project using the AEM project archetype, then the data layer will be enabled by default. Out of the box there are a number of events for interacting with AME core components that you can listen to through the data layer. So this includes things like toggling a carousel slide to expanding an accordion to listening for a page load. So let’s go ahead and take a look at this in action. All right so I’ve navigated to the WKND site and the WKND site is built entirely with AEM Core Components and it also has the data layer enabled. So if I go ahead and open up my developer console, I can start to type in window.adobedatalayer, and then I’m going to run the method get state. And so you can see, hey, there is a response. So this definitely means that the data layer has been enabled and if we inspect the response you can see under components these are all the different components that are on the page and you can drill down and see different properties about each component and you can also get some high-level information about the page itself.
All right, next let’s look at how we can modify the Adobe Data Layer. So with this command, I’m going to be pushing on a new object under components within the data layer.
Now, if I run the same command .getstate, I can browse the response and look at the available components and here I can see that training data that I pushed on. So would just want to show you how easy it is to extend the data layer and add some custom objects. All right so next let’s add a new parameter to the get state method and this time we’re going to add the path to a specific component. So we’ll do component.training-data. That’s the path to our training data object.
And notice now the response has been filtered to just that components data. So this is an easy way to access just the component that you’re looking for. One of the key features of the Adobe Client Data Layer is that it is event driven and as a best practice we want to perform all of our actions based on an event. Next I’ll add some code just through the developer console. That’s going to allow me to listen to whenever a user toggles the carousel slides on the page. And if you’re following along you want to make sure not to accidentally refresh your browser as that’s going to remove all of the JavaScript entered.
First thing I’m going to do is add this helper method. Now this method is going to get the current state for the component that dispatched the event and that’s based on the components path, which can be found through the event info. The helper function also allows us to pass in a filter so that we’re only reacting to specific components.
Next, I’m going to go ahead and add a function as our event handler and inside this event handler I’m going to be reusing that get data object helper and passing in a filter for the teaser component. So we’re only going to take an action whenever this event is triggered by the teaser component and this handler isn’t going to do much but just add a few console statements. All right so at this point we actually haven’t done anything with the data layer itself. So the next thing that we need to do is add an event listener and add it to the data layer. So we can use the function, we can push this function onto the data layer. This is going to add an event listener for the CMP show event, and then it’s going to be calling our teaser shown handler or event handler. So once we’ve added that to the data layer, we can go ahead and test it out. So if I go to the carousel and I start toggling, you can see that immediately we’ve got a console statement, that we’ve got a new teaser shown, and then it returns the object of that teaser component. And as I continue to toggle through the carousel, you can see that we’ve got more of these console statements being shown.
The Adobe Client Data Layer also allows us to remove these event listeners. So with this function here, we’re going to be removing the event listener for the CMP show event. And now that we’ve executed it, notice that when we navigate through the different carousel slides, we no longer have those console statements.
Let’s take a look at one more example. So next I’m going to add a new event handler for page shown. So this event handler is really similar to the one we added for the teaser. The only difference is instead of filtering on the teaser component resource type, this time we’re filtering on the page component resource type.
Now, whenever a page is loaded, a CMP show event is triggered by the data layer. So to capture this, I’ll add an event listener, and you’ll notice that this event listener is very similar to the one we created for the teaser. It’s listening for the CMP show event, but this time it’s going to be calling our page shown handler.
Now, as soon as I hit enter you’ll notice that I get a response from the event handler letting me know that a page show event has occurred. Now you might be thinking to yourself, well, that’s strange. You’ve been on the same page for about five minutes, the page didn’t just get loaded and this is one of the more powerful features of the Adobe Client Data Layer is that when you register an event listener, you can actually listen and handle events that happened in the past as well as in the future. So why is this powerful? Well, a modern website is going to have multiple scripts that need to be loaded. It is very difficult to predict the exact sequence in which each script is loaded and ready, which can lead to race conditions and unexpected behavior. Now, a work around would be to wait until all of the scripts have been loaded, but this results in a poor user experience and a lot of dependency chaining. Now the architecture of the Adobe Client Data Layer allows us to avoid these issues ultimately making the implementation a lot simpler.
That concludes this video on the Adobe Client Data Layer and AEM Core Components. Thanks for watching. -
NOTE
Want to enable the Adobe Client Data Layer on your AEM site? See the instructions here.

Explore the Data Layer

You can get an idea of the built-in functionality of the Adobe Client Data Layer just by using the developer tools of your browser and the live WKND reference site.

NOTE
Screenshots below taken from the Chrome browser.
  1. Navigate to https://wknd.site/us/en.html

  2. Open your developer tools and enter the following command in the Console:

    code language-js
    window.adobeDataLayer.getState();
    

    To see the current state of the data layer on an AEM site inspect the response. You should see information about the page and individual components.

    Adobe Data Layer Response

  3. Push a data object on to the data layer by entering the following in the console:

    code language-js
    window.adobeDataLayer.push({
        "component": {
            "training-data": {
                "title": "Learn More",
                "link": "learn-more.html"
            }
        }
    });
    
  4. Run the command adobeDataLayer.getState() again and find the entry for training-data.

  5. Next add a path parameter to return just the specific state of a component:

    code language-js
    window.adobeDataLayer.getState('component.training-data');
    

    Return just a single component data entry

Working with Events

It is a best practice to trigger any custom code based on an event from the data layer. Next, explore registering and listening to different events.

  1. Enter the following helper method in your console:

    code language-js
    function getDataObjectHelper(event, filter) {
        if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
            var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
            if (dataObject != null) {
                for (var property in filter) {
                    if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                        return;
                    }
                    return dataObject;
                }
            }
        }
        return;
    }
    

    The above code inspects the event object and uses the adobeDataLayer.getState method to get the current state of the object that triggered the event. Then helper method inspects the filter and only if the current dataObject meets the filter criteria it is returned.

    note caution
    CAUTION
    It is important not to refresh the browser throughout this exercise, otherwise the console JavaScript is lost.
  2. Next, enter an event handler that is called when a Teaser component is shown within a Carousel.

    code language-js
    function teaserShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/carousel/item"});
        if(dataObject != null) {
            console.log("Teaser Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    The teaserShownHandler function calls the getDataObjectHelper function and passes a filter of wknd/components/carousel/item as the @type to filter out events triggered by other components.

  3. Next, push an event listener onto the data layer to listen for the cmp:show event.

    code language-js
    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", teaserShownHandler);
    });
    

    The cmp:show event is triggered by many different components, like when a new slide is shown in the Carousel, or when a new tab is selected in the Tab component.

  4. On the page, toggle the carousel slides and observe the console statements:

    Toggle Carousel and see event listener

  5. To stop listening for the cmp:show event, remove the event listener from the data layer

    code language-js
    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function(dl) {
        dl.removeEventListener("cmp:show", teaserShownHandler);
    });
    
  6. Return to the page and toggle the carousel slides. Observe that no more statements are logged and that the event is not being listened to.

  7. Next, create an event handler that is called when page shown event is triggered:

    code language-js
    function pageShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
        if(dataObject != null) {
            console.log("Page Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    Notice that the resource type wknd/components/page is used to filter the event.

  8. Next, push an event listener onto the data layer to listen for the cmp:show event, calling the pageShownHandler.

    code language-js
    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", pageShownHandler);
    });
    
  9. You should immediately see a console statement fired with the page data:

    Page show data

    The cmp:show event for the page is triggered on each page load at the top of the page. You might ask, why did the event handler get triggered, when the page has clearly already been loaded?

    One of the unique features of the Adobe Client Data Layer is you can register event listeners before or after the Data Layer has been initialized, it helps to avoid the race conditions.

    The Data Layer maintains a queue array of all events that have occurred in sequence. The Data Layer by default will trigger event callbacks for events that occurred in the past and events in the future. It is possible to filter the events from past or future. More information can be found in the documentation.

Next Steps

There are two options to keep learning, first one, check out the collect page data and send it to Adobe Analytics tutorial that demonstrates the use of Adobe Client Data layer. The second option is, to learn how to Customize the Adobe Client Data Layer with AEM Components

Additional Resources additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d