If you logged into Adobe DTM over the weekend, like I did, you may have noticed two new features that became available.
[box type=”shadow”]AEM ContextHub Tool: The AEM ContextHub tool is used to integrate DTM with the Adobe Experience Manager (AEM) ContextHub.
dataelementchanged event: This new event lets you select a specific data element to use as a trigger.[/box]
Now, these two new features may not seem all that exciting, especially if you are not an Adobe AEM customer, but trust me not only are these features very exciting, even if you aren’t an AEM customer, they will prove to be extremely powerful. Let me explain…
Most websites stopped being static a long time ago but as pages became more and more interactive, analytics struggled to keep up with how to measure all these little micro conversion events. With the addition of the data layer, it became even more complex. How do we tell our analytics solution that our data layer dynamically updated when the visitor selected a value from that dropdown box? Do we have our developers call a function? Do we write something in our tag manager that runs every 5 seconds to evaluate the entire data layer? You can see why this can quickly become very complex.
As I logged into DTM late Friday night and saw the ContextHub Tool and dataelementchanged event got my mind quickly started spinning with the thought that this could be the solution I’ve been looking for. An elegant way to monitor my data layer for changes so that DTM could then react accordingly.
This post is intended to be an end-to-end solution showcasing the two new features introduced to Adobe DTM, with a bonus thrown in showing how to dynamically update your data layer using jQuery.
While I strongly recommend reading this post from beginning to end, if you are specifically interested in one of the sections, I have provided the following links that will allow you to jump directly to the topic you are interested in.
> Dynamically updating data layer values with jQuery
> Using ContextHub to automatically import your data layer into DTM
> Using dataelementchanged to monitor changes in your data layer
To help walk through how these new features can be used for a website that has a data layer deployed but doesn’t use Adobe AEM, I created a simple webpage that a services agency might use to qualify leads.
The analytics for this page is setup as follows:
› Adobe Analytics deployed using Adobe DTM
› A structured data layer that captures information about the page being viewed as well as information about actions that are taken on the page
› A jQuery function that dynamically updates the data layer based on user interactions on the page
Dynamically updating a data layer with jQuery
Let’s begin by looking at how the data layer works.
When the page first loads, there are some basic identifiers about that page and environment that are collected. You will also notice a couple placeholders to capture site actions, those will come into use shortly as we look to capture information about how visitors are interacting with the elements on the page.
This part of the data layer is helpful to capture information we know about the page when it loads but we need to be able to add information to our data layer about things that happen on the page after it loads as well. Specifically, we want to know what elements on the page are interacted with and what values correspond to those actions.
Dynamically updating the data layer.
To add details about on page interactions to our data layer, we need to dynamically update it when a site visitor interacts with one of the elements on the page.
For example, when a visitor changes the purpose of their site from the default value of ‘Commerce’ we want to know that the purpose element was interacted with and we want to know the value that the visitor selected. To do this, we can use some jQuery to handle those interactions:
//Handle site purpose radio buttons
$("input[name='sitetype']").on("change", function () {
//Update the data layer
$.extend(true, digitalData, {
actions : { widgetName : "Site Purpose" } });
$.extend(true, digitalData, {
actions : { widgetValue : this.value } });
});
Here is what the data flow looks like as the page loads and how it is dynamically updated, using the code above, as the user interacts with the page.
Adding AEM ContextHub Tool to DTM
Now let’s jump over to Adobe DTM. We will start with deploying the new AEM ContextHub Tool.
NOTE: This step is not required, you can simply jump ahead to using dataelementchanged to create an event rule to monitor for changes in your data layer but by completing this step, you will have your entire data layer available to DTM, saving you time and translation errors in future as you go back and forth between DTM and your data layer documentation to grab each item mapping.
Step 1: From the DTM Overview screen for your property, click the ‘Add a Tool’ button and select ‘AEM ContextHub’ as the Tool Type. Click ‘Create Tool’.
Step 2: Configure the Hub by selecting the ‘Customize ContextHub Data Layer’ radio button and supplying the name of your data layer in the ‘Data Layer Root’ text field.
Step 3: Prepare your data layer so that it can be ingested by the ContextHub tool by first using the developer console in your browser to stringify your data layer using JSON.stringify
Step 4: Once you have a stringified version of your data layer, you can use that to create a data layer schemea, which is how we are going to tell the ContextHub tool about how our data layer works. You can use an online service, such as jsonschema.net to help with this.
Copy & Paste your stringified data layer into the service and it will generate the appropriate schema for you.
Step 5: Click the ‘Open Editor’ button, copy the schema generated in Step 4, and paste it into the Edit Code box. Be sure to remove the existing schema that is there before you paste your schema in. Click ‘Save and Close’.
Great, now you have successfully added the ContextHub Tool to DTM and have instructed it how to ingest your data layer.
Using dataelementchanged to monitor your data layer
Now, let’s wire our data layer into DTM using Data Elements.
Create a new Data Element and select ‘AEM ContextHub’ as the element type. You will now notice in the Object dropdown, your entire data layer is available to choose from. Select the appropriate data layer item for your new Data Element and click ‘Save’.
Once you get your data layer wired into DTM, we can tie it all together with an Event Based Rule that we will use to monitor for updates to our data layer.
Let’s create a new Event Based Rule using the new ‘dataelementchanged‘ event type to monitor for changes to the value of the ‘Widget Value‘ Data Element that we just created. This will fire any time the Widget Value Data Element changes, however, you can further target the rule to look for specific values within the data layer, as well, if needed.
In order to inform analytics of the interactions that happened on the page, we will use a Custom Link call to send the Widget Name and Widget Value to Adobe Analytics.
Save your changes, test, and publish.
You should notice that each time an element on the page is interacted with, a call is sent to Adobe Analytics identifying the action and resulting value selected.
If you are still with me, THANK YOU, that was a lot to cover in a single post but I wanted to provide you an end-to-end example of how you can leverage these great new features that are now available in Adobe DTM to monitor, and react, to dynamic changes to your data layer.
A full working example of this solution can be found on the 33 Sticks website if you want to examine how the code is working.
I hope you found this helpful. If you have any questions or comments, please feel free to email me directly at jason@33sticks.com
[author] Jason Thompson [author_image timthumb=’on’]http://i2.wp.com/33sticks.com/wp-content/uploads/2015/02/jason_250x250.jpg?zoom=2&w=1080[/author_image] [author_info]Jason is the co-founder of 33 Sticks. In addition to being an amateur chef and bass player, he can also eat large amounts of sushi. As an analytics and optimization expert, he brings over 12 years of experience, going back to being part of the original team at Omniture. [/author_info] [/author]
Comments are closed.