Author's note: This article was originally written by me for the Adobe Digital Marketing Blog on May 9, 2015.
One of the primary challenges all tag management systems must address is how to extract data from webpages. One of the ingenious ways Adobe Dynamic Tag Management gathers and maps data is through its Data Elements function. Data Elements is not a new function to DTM. Marketing Cloud Evangelist Rudi Shumpert gave an initial overview of Data Elements in his August 2014 blog post. A fresh look at Data Elements is warranted though, because some recent updates have given it even more power. In this post we will retake a look at Data Elements along with the enhancements that have made this feature exponentially better.
The Mission
To examine the use and the power of Data Elements, let’s look at the tool through a “real world” task. Senior leadership at our demo company, JJ Esquire, has asked us to compare the behavior of visitors who are logged into our site to that of those who are not, and to implement a new “VIP” third-party tool when a visitor is logged in. To handle these tasks, we will create two DTM rules:
- Store the visitor’s log-in state in prop3 and eVar3 on every page view.
- Launch our third-party VIP pixel on every page view for visitors that are logged in.
The Plan
Now that we know what we need to do, we have to decide how we are going to do it. Specifically, we need to figure out where we are going to get our visitor’s login state to pass into DTM. Fortunately, our webpages contain a JavaScript object called “user.” There are several properties for user, and lucky for us one of them just happens to be “login.” The value of login will either be “guest” or “authenticated.” Our plan then is to grab the value of user.login from our webpages and store it in DTM for use in our rules.
Pro Tip: JavaScript objects can be used to create a data layer, which is a best practices method for making data available on webpages. Read more about Data Layers at Marketing Cloud Evangelist Jeff Chasin’s blog post.
The Implementation
With our blueprint in hand, let’s build our Data Element and name it login_state. Data Elements are located in the DTM Rules area. Follow these construction tips when you are creating your Data Elements:
- Always adhere to a naming standard. Many organizations use all lowercase letters and underscores for spacing.
- The “path” textbox will change depending on the Data Element type you are creating. When you are creating a Data Element for a JS Object, make sure the letter case you enter in the path matches your webpages’ object.
Add the name, path, and default value to your data element according to your naming standards. For our example, our setup looks like this:
Pro Tip: Every technical consultant at Adobe is a staunch advocate for standards and governance, and you will find that Data Elements has features to help us maintain our data standards. The “Force lowercase value” and “Scrub whitespace…” checkboxes are synonymous to .toLowerCase() and .trim() JavaScript functions.
These new functions also help you maintain high cardinality (or uniqueness) in your data. Rather than saving “ new visitor,, “ New Visitor” and “New visitor “ as three separate values, they will all convert to “new user”.
After we configure and save our new Data Element, we can put it into action. Our first task was to store the visitor’s log in state in prop3 and eVar3 on every page view. So let’s create a new Page Load Rule called Login, and let’s populate our variables in the Adobe Analytics section using our login_state Data Element.
Remember that Data Elements available for use within the DTM UI will begin and end with a “%” and typing a % will open a dropdown with a searchable list of all of your Data Elements. After we set our props and eVars, we can save this rule.
Our second task was to launch our third party VIP pixel only when a visitor is logged in. This task allows you to create a new Page Load Rule called VIP and base theConditions of our rule on a Data Element value. Choose “Data Element Value” from the Conditions Criteria, choose “login_state” as the Data Element, and enter “authenticated” as the Value:
Add the custom VIP code to the JavaScript/Third Party Tags section of this rule and click save.
Pro Tip: If you want to access data elements in any of the custom scripts sections of DTM, use:
_satellite.getVar(“your_data_element”);
The Outcome
No implementation is complete until you validate it—so we need to make sure our setup works. Every analytics developer has a debugging weapon of choice and my preference is the DTM Bowser Plugin for Chrome along with Charles Debugger or the Adobe Marketing Cloud Debugger. Setting my DTM Switch to “Debug” and “Staging” allows me to see that our Login and VIP rules are both firing:
and the Marketing Cloud Debugger shows us that our prop3 is being set and we are copying the value from prop3 into eVar3:
New Feature!
If you want to use a Data Element you created in another Web property within your account, you no longer have to recreate from it scratch. Check the Data Element you would like to copy, select “Actions” and copy the Data Element to your new Web property.
Mission Accomplished: The Debrief
Data Elements serve as the bridges between your webpages and dynamic tag management. There are several ways you can gather data with Data Elements, but in any method you choose, it is very important to adhere to your data governance and standards. Some of the new Data Elements functions include the ability to use Data Element values as a rule condition, the trim formatting function, and the ability to copy Data Elements from one Web property to another. Use the DTM Switch to experiment with different ways you can use Data Elements and happy coding!
Additional Resources