[Music] [Music] [Music] all right um yeah i think we can get started so hello everybody and welcome to this talk about tracking data with the adobe client data layer so i'm jean-christophe kauzman i'm a software engineer at adobe working in the aem sites team and i will co-present on this talk with lawrenciu and then so i will let them introduce themselves hey my name is laurentii and i'm a software engineer working in the commerce team hi everyone my name is ben and i'm based in zurich switzerland i'm working for adobe as a consultant and expert in adobe experience platform adobe analytics target and launch okay thank you so uh what we would like to go through today is first talk about the adobe client data layer then discuss about the integration of the data layer with the aem core components so the core components or basic components that can be used on the page like title text teaser and so on and then we'd like to go through the integration of the data layer with the custom components and finally ben will drive through the integration of the data layer with adobe launch and adobe analytics so the adobe client data layer first yeah first question what is the data layer so the data layer is basically a store used on the client side that has two uses is first is to collect data about the page and the visitors experience and once we collect data it helps to communicate this data to digital analytics like adobe analytics or adobe target so the adobe client data area what does it do so again it's a javascript store and there is a very basic api to do four basic stuff so first you want to register data into the data layer you you can trigger events in the data layer so events happening on the page you can get the current state of the data layer and of course you want to register on listeners that can be called for specific events so we'll go now through some example and code how to do that so forth first thing you need to do is to load the script on your web page so you would use for example a script tag with uh here we use the default and asic attributes so this makes sure that the script loads after all other scripts have loaded so it doesn't get into the way of other scripts on your page you then declare the adobe data layer object as a window object so as you can see here it's an array so it's uh there is it's a out of the box javascript array once you've declared you can start pushing data into this array and actually you you use the push methods so the generic javascript push methods to push data into your array and here for example i'm pushing a page object with a few properties here only the title of the page so you can also push event objects and this happens by using the event keyword you also have the optional event info keyword where you can add some information about your events and you can push events and together when pushing events you also have the option to also modify the state of the data layer like to push more uh more data or more components into your data layer to delete data you can use either the null or the undefined object so in the first case i'm removing the map1 object and with the undefined keyword below i remove the first item of the shown items array to update an existing array you just append an item into the array like it's done here and now comes the interesting part um so we've seen that you can push data you can push events and you can also push functions so here i'm pushing an anonymous function and you can see that i get here dl argument of the function and the and this is representing my data layer objects so as soon as the script has loaded all items in the array will be processed and when the function item is processed it gets executed what's in the body of the function so and when this happens i have the data layer object augmented with a few methods so of the get state method that is added and the add event listener and the remove event list now we'll go through those three methods now into more details so first the get state this returns the merge state of the data layer so i have an example here sorry so here you can see that i have a specific structure at adobe we recommend to use the xdm schema but everybody is free to use what suits the needs of the the company so here for example i have a page object with a few properties with the title property i have the component object and below the component objective all my components added as a flat structure that's a choice we made for the core components you can also get the merge state of a specific part of the state so here i only want to know the state of the properties of the objects and defined by the dot notation the component.hero1 what i get as an output is a list of properties here the title and the link of the specific object i configured before of course you can register an event listener so this happens very similarly to the native ad event listener javascript function so you can see here i i have first the property the event name then the handler and i have the another option here you can see the path so i can define the path of the object which i would like to listen to so whenever there is a change to this specific object my listener will be triggered as you can see here i trigger the the callback when the adobe data layer change event happens and with the adobe data layer we have two out of the box events so it's the first one is this change event whenever there is a change and something added to the array then this event gets triggered there is another one it's called the adobe data layer event and this is actually an event that is triggered whenever i push an event to the data layer array here is an example of a console output because i'm listening to adobe change event i get all the change the first one is data that has been added to the data layer and the second one is this event that has been added as well to the data layer of course i can register my listeners first example and registers all the all the callbacks for this adobe data change event and my second example i can specify a handler which should be and register based on the event clicked that's it for this first section again this is an open source project we are happy to get your contributions so i will now pass the microphone to lions you for the next part of the talk thank you thank you jean-christophe now uh let's let me show you how the core components provide an out-of-the-box integration with the adobe data layer so as you've seen uh the data layer uh is a client-side utility that helps you decouple the data from applications and enable you to build data-driven client-side features um so you have scripts that generate and push data and generate and push events and you can have your own scripts that read that state or handle those events as you as you may need them so you're pretty much uh able to do whatever you want with it but the way the core components integration was designed was with components in mind so every component that will be present on a page will produce data and that data will be collected and pushed into the adobe data layer once the page is fully loaded now not every component produces data for example you have separators we don't really have any meaningful information so those are not going to produce any data and will not be present into the data layer the way the data ends up in the client side is using a json structure that is rendered in a data html attribute in the hdl that belongs to that component so we take information from the the actual model and render it into this data attribute now once the page is fully loaded we use some client libs we have a common client lib designs especially for this data layer integration that we'll just query the page for this data cmp data layer attribute will fetch that data will push everything into the data layer and then push an event cmp column loaded that is useful for uh listeners that may want to know when all the data is available so they can start uh reading the state and work on whatever was loaded in there um another important piece of information just as john christophe mentioned are events because this uh indicate how the user interacts with the page now the great majority of events and interactions with the page are done via clicks so to make this easy we just marked every clickable element in the components that are relevant with the cmp clickable data attribute now uh the same client lib that we're using to load the data is also querying for this attribute in the dom and attaches event handlers on them those that event handler is responsible for pushing the actual event into the data layer together with a payload that payload contains the component id uh to help you know which component the user interacted with so this is why it's very important to have ids on the on the hdl unique ids that identified the component um for custom events you have special events like showing or hiding certain certain items for example accordions or carousels will have animations that basically just show or hide uh certain items and for those um the core components uses the client specif the component specific client lib where that animation is actually generated it's the same place we also uh generate the events for the data layer now in order to know if the data layer integration is enabled or not and i didn't mention this here is by using another data attribute that is present on the body tag so if that data layer attribute is present on the body tag it means that it is enabled in you your scripts can can then go on and generate or consume events so it's just a flag but it's an important one the structure of the data layer information that is generated by each component has uh more or less this uh this attributes here not all of them are used in every component but i think this is a list with all of the uh attributes that you may find uh this is based on the xdm component is page schema and it was chosen because yeah we uh we have componentized pages here and it's also uh makes it also makes it easy if you are to use adobe experience platform services uh you may design your schema for your service to be based on the componentize page schema and this will make it very easy to load the data as it is into the adobe experience platform well of course you are not conditioned to do so you are free to do your own transformation before pushing the data but if you go with the default use case then it will make it very easy for you to to to push this data into ap so the way we generate that json that i talked about is by uh implementing some methods which uh come from the component interface which is the the interface that all of the components from the core components project are based on so these two important method methods is the get data and get component data the first one is a public one and it will be used in the in the htl to generate the json and the second one uh it's a protected one and it's the one that it's actually called but they get by the get data method so this one is responsible for returning an instance of the component data interface which defines all the attributes that may end up in that final json structure so in here we have a default implementation but we can use a custom implementation for for special uh components that for example containers that have elements child elements those uh can be another implementation that that can be another implementation uh that implementation here uh as you can see it relies on the component itself the component that uh generates the data and the resource associated with it now by default uh a component will generate at least two attributes the first one is the id and the second one will be the type and as you can see here is based around the resource now any other um attribute that you may want ending up in that final json structure needs to be generated by overriding some methods in your own component the component that uh generates this data so uh being uh inheriting the the component uh interface you get all these data layer specific methods all of these have default implementations returning null so if you want any um attribute ending up in the final structure you just need to override this to return a nominal value and then you'll have everything ending up in the under hdl script in that json structure now to benefit from all that integration that i just mentioned earlier you need to enable it first and as with any uh feature in aem you probably need to use and you should use a con context aware configuration now this contextual configurations has just a simple boolean property that you need to set it through i will not go into the details you can find all the information about how to enable this on the github repository page and you have all the details in there now integrating this with your custom components of course you will have custom components in your project and you can leverage the existing integration from the core components to also put the data from your custom components into the data layer and not work too much for it so you can leverage this and add your own custom logic uh you are free to use whatever approach you want as far as as long as in the hdl in the dom elements that belong to your components you have that data html attribute with the json structure as long as you mark all the elements as clickable and so on so basically you need to define the properties of your custom component that needs to be tracked so this is up to you you define whatever needs ending up in the in the data layer you should add a component id in the custom component htl as i mentioned earlier this is important for events so when a component produces an event that event usually contains the component id and this makes it easier to also identify it in the dom so this should be there add your data layer cmp data layer attribute to the custom component hdl and generate that json structure uh from your model so basically the the htl the the root element of your hdl should look something like this so you'll you'd have the id which should be unique and then you'll have that json structure that can be generated in any c anyway you see fit but uh you can also use the same approach as was used in the core components and it will definitely make things easier if your project is large uh and you will end up reusing lots of lots of code so the the minimum that you'll have to do is uh create your custom component data implementation the one that is responsible for generating that that json so you just implement the component data interface that is exposed by the core components bundle uh and add your own override your own methods that need ending up in the in the final uh json structure now the way the json is generated is by having a top level attribute which is the component id and then below that you have all the other attributes now this is the way it was preferred by the core components team but again you're free to use it wherever you like but we find this a lot easier to to work with within the data layer because it's easy to navigate the structure and identify your component by this id now once you define this component custom component data implementation uh you can just use it in your custom model if your custom model also implements the component interface that makes things a lot easier because all you have to do is just leverage those two methods that i mentioned earlier the get data and get component data and uh the second one should just return your custom model implementation an instance of this and your error pretty much ready to go uh four events is pretty straightforward so we talked about clickable elements so you just mark those with the data cmp clickable attribute and the client lab for the data layer integration will take care of adding event listeners and pushing the data when event occurs uh just make sure that the hdl has an id and for the custom events uh the ones with animations that i talked earlier you should probably use the same approach with uh generating that event from within the the client lib associated with the component because well it's probably where you also generate the the animation itself so it's the perfect spot to to do uh to generate the event as well just leverage that uh data attribute on the body tag to see if the integration is enabled or not now i will quickly show you i think we still have a few minutes left i will quickly show you a custom component that i was working on for the commerce if components so i can show you how it looks like for a product so we'll just pick a product and inspect the dom to see how that attributes ended up so yeah this is the top element for this product and you can see it has an id and unique id here and the data layer structure is also present having that same id and the rest of the attributes uh below that we can also see the state of the data layer to see how it looks like so as you can see that was picked up by the uh the client lib and everything was pushed everything was present on the page we can also find this product here together with all the uh the attributes we can also see that the loaded event was triggered by looking at the raw data from the adobe data layer uh here you can see the the order that the the components were pushed so we have the page which was pushed first and then we have uh components the last one was the product and then you have this event which is cmp loaded now if we if i had any listeners uh event handlers register for this event i will have been notified in my code and i could have gone through it and uh read all the data that's that's available so i can also quickly no i don't think we have time i'll answer any questions in the question section i'll pass around to ben thank you so now you can see me perfect thanks laurencia for this nice overview so for now we have seen how you can push data into the data layer what i'm gonna talk about now is how we can use that data in our website in order to get some nice tracking adobe launch is our tag manager and we've built an extension to interact with this adobe client data layer and what capabilities do we offer you have the ability to rename the default object from adobe data layer to whatever name you want to use if you're not running this on aem with the data layer and enabled you could still use the extension and it would inject the data layer library automatically for you then i would say the primary use case here is listening to data layer pushes right so that's what i'm gonna focus on now and we can also retrieve the computed state of the data layer in the ui of our tag manager and we can also access specific elements from there i have some slides which are gonna be shared later with you where you will find more information but now i want to show you how it actually looks like and go into the ui so here you can see i've set up a demo in our adobe launch tag manager and i've actually installed three extensions i'm gonna use the core which is there all the time i'm gonna show you how we can interact with adobe analytics and then our new brand new one it's the adobe client data layer for those wondering it is not yet released it's going to be published soon so here we can click on configure and have a look what we can do so first of all you can change the name here i would recommend you to go for the default name but if a client has already implemented it giving it a different name you can just change it here and the tag manager will pick up the right object now there is a lot of stuff provided here and we thought it would be nice if you have all the information and documentation right in the config so you can just click and see what the respective actions data elements and events can do but of course we also provide a link to our github project and this is going to be open source right so let's see what we can do i've set up two rules i'm gonna show you how i'm tracking the page load information and then i want to show you how to interact with a typical scenario like an asynchronous event let's say our stock price is updated we have a live ticker and this is going to be updated so before i show you how those rules are set up i'm going to show you how it looks like in the end for that i've set up a demo site and i want to show you what happens if i push the page load information and what happens if i push the stock price update so we can check the adobe data layer for now it is empty i can say get state and it's empty right so once i push the page load and this is usually something you would do in the head of the page of course i've just for the sake of the demo i've implemented it with a patent push so you can see how it looks like right so i'm gonna push this and you see i've pushed the page load page load event this is the information so i've the country language the title and so on and this already triggered my adobe analytics server call with all the information provided from the data layer right so it populates the page name site section and whatever else variable you define so we can have a look again in the data layer we now should have this one push with an event of the page load and the get state will of course show us what happened right so this is the one scenario for tracking and now i'm going to show you what we could do in the tag manager as well i'm going to push a stock price update and this now triggered a custom rule in this case it's a log to the console but of course you could fire another analytics call or do whatever else you want to do right so i trigger that again and it's gonna fire my rule so those rules are set up in the tag manager now let's have a look how this is designed let's start with the page load in this rule i always have three components i have the event which actually triggers the rule then i have conditions to limit the execution of the rule and then an action so obviously the action is i want to clear the analytics variables set the variables and send the beacon and my trigger is no big surprise it's a data push to the acdl and what does it look like we have here the option as you had heard already today you can listen to various things you can listen to all changes to all events or just to specific events so in our case i just wanted to listen on the page load event and you can also change what time scope you want to use and it's nicely updating here the description so you can always refer to that future means only fire after the data layer has been initialized past means you only fire for those events which have been pushed into the data layer before the data layer library has been loaded so in our case i just wanted to listen for all pushes of the page load now the question is how can i access this information the event object which will be available in the tag manager provides you with three sub elements you have the message so this is actually what you push into the data layer but you can also reference the before state so what was the state before you pushed something and the after state so that's the computed state this is handy if you want to have conditions to say only fire if in the previous state something was the case or not the case right so this is going to be our trigger triggering the rule and let's see how i can use that in analytics again that's pretty straightforward so i just populated some of my e-bars here so as you can see evar1 it's going to be event message so as i just said message the current information of the of the data layer push now i'm just saying page.country page.language user authenticated whatever i want to set here right i can also use that for the default variables and reference the values now i have seen there was the question already can i use that only with adobe analytics or can i use google analytics or other analytics solutions as well well yes of course you can use other analytics solutions you would just have to use a different extension here or write some custom code where you actually just take this information from the event and pass it to the respective tracking server right so the only thing the extension really provides you in this context is the trigger you register yourself for example for the page load and can then use that information in whatever way you could use that for personalization or for firing marketing pixels um whatever is up up to your business case now i'm gonna show you the stock price rule as well it's not very different actually here i'm also listening to an event and it's just a different name right so this will trigger once the stock price update is pushed and you can see that here in the adobe data layer you can see it was the stock price update right and the action then is just a simple console log with a bit of formatting and i'm just referencing here event message stock price you can now imagine how you would use that in google analytics or in any other analytics solution there is more of the extension the extension also provides you with with some data elements so you can reference easily the data layer size or the current state so this is all provided out of the box you could say please this is a reference to only a specific path and it allows you to reset the data layer and so on so there are many more things but for the sake of simplicity now the the main focus here in this presentation is how you can interact with it and with that i'm just showing you there are more slides we will receive them after the presentation and can check it out again the adobe client data layer is not yet officially released it's going to come soon and with that i would say let's go over to q and a yeah so the question is what is the rationale behind naming the current page key dynamically in the data layer so not sure i understand this correctly but i guess is why do we have the page id uh as a key for the within the data layer and so yeah as we've shown uh for the core components we use a specific uh structure and for each component we actually use the id html id as the as the key within the the data layer so yeah how do we generate the ids that's another question yeah so for this we have a utility and it's actually a naming convention so we use the the name of the component and we then add the hash of the path of the component so to be sure that we have unique ids for the page so it's not manually it's actually dynamic we just have we reuse a method that generates it and by leveraging the resource behind it we can dynamically generate that id so there is another question would it also work for components that are loaded asynchronously so when the page load these components are not part of the html of the page well you're free to push it manually i mean if you are asynchronously loading uh components then you're probably using javascript so you can just use uh the same piece of code to also push the the data from within the data layer now that's just in the request scope the integration that we have it does not handle uh asynchronous events those are custom anyway so you should and one more thing to consider is if you push those elements later on right you would have to make sure that in your tracking setup you consider that so either you say i'm fine with firing multiple server calls tracking right or you could say i'm waiting until i received at least those elements and then fire one consolidated and tracking call yes so there is another question maybe probably for ben how would we reference the page id in the extension i have seen that you can specify yeah you can specify a path but when it's changing every time how can we refer refer to it yeah that's a that's a good that's a good point so actually for the page id um this depends on on if you use the the default component page id or not so ideally you would have somewhere in the structure an element which stays in the same object path right like page dot title what you can do of course is you can always loop through the loop through the whole message object in a tag manager if you have components which have a variable amount of elements or or keys yeah there's a question for the schema of the product that i used well the one that i did you see you saw there is not a custom one it's actually the one from the xdm schema of adobe so all those uh attributes that you saw there are present on the product xdm schema belonging to adobe xdm uh i'll just mark this as so there is another question currently you have mentioned the data cmp clickable attribute will other events like mouse over drag also be integrated at some point will this always be considered as custom so yeah for now we have this clickable which uh is out of the box uh we haven't planned to add more out of the box but yeah why not otherwise you would have to do that in your project one more one more thing which i really want to encourage here is it really depends on the requirements of your tracking so using only the default values might not give you the full picture i've worked with many many clients in many industries usually the requirements are pretty unique so you will have to go ahead and add some custom attributes in the data layer to be able to track what is needed to answer your business questions all right do we have any questions we did not answer i think everything's answered so far all right thank you very much for your attention it was nice having this virtual conference talk here and looking forward to seeing the adobe client data layer implemented in more and more projects and the launch extension used in the field when it's published yeah all right have a nice day everybody thank you thank you for everybody for attending and have a nice day thanks see you guys bye everyone bye