If you’re a mem­ber of the ever-growing dig­i­tal mar­ket­ing com­mu­nity, then chances are you’ve come across the term “data layer.” There’s been a lot of buzz about data lay­ers through­out the indus­try recently, and with good reason.

This past Decem­ber, the World Wide Web Con­sor­tium (W3C) pub­lished its stan­dard for imple­ment­ing a dig­i­tal data layer on a web­site. This W3C stan­dard, which was the result of a col­lab­o­ra­tion among many lead­ers in the indus­try, rep­re­sents a very impor­tant (and excit­ing) moment for the dig­i­tal mar­ket­ing com­mu­nity. Given the recent rise in pop­u­lar­ity of enter­prise tag man­age­ment systems—including Adobe’s own amaz­ing and free dynamic tag man­age­ment (DTM) product—the deploy­ment of a dig­i­tal data layer on your dig­i­tal prop­er­ties makes col­lect­ing and han­dling your most cru­cial data points eas­ier (and more pow­er­ful) than ever.

Essen­tially, the W3C spec­i­fies a dig­i­tal data layer as a JavaScript object that’s placed on the pages (or on spe­cific events) through­out your web­site. At face value, that’s actu­ally not unlike the “s” object that Adobe Site­Cat­a­lyst uses for its data col­lec­tion. The main dif­fer­ence is that of struc­ture. To fur­ther explain this point, let’s look at an example.

I’ve included two code snip­pets below for an arti­cle page from a fic­tional media site “www​.adamnews​.com.” The first exam­ple fol­lows the tra­di­tional method of Site­Cat­a­lyst data cap­ture, which relies on the famil­iar props, eVars, and events. The sec­ond exam­ple shows what the same data points look like within a dig­i­tal data layer.

Example 1. SiteCatalyst coding for a www.adamnews.com article.

Exam­ple 1. Site­Cat­a­lyst cod­ing for a www​.adamnews​.com article.


Example 2. The digital data layer implementation of the same article.

Exam­ple 2. The dig­i­tal data layer imple­men­ta­tion of the same article.

As you can see, there’s a solid struc­ture to the ele­ments within Exam­ple 2’s dig­i­tal data layer. This struc­ture is known as JavaScript Object Nota­tion (JSON), and is han­dled by a Web browser in the same man­ner as the Site­Cat­a­lyst code in Exam­ple 1. JSON is a sub­set of JavaScript, so any browser (or device) that can read and inter­pret Javascript can do the same with JSON objects.

Within the dig­i­tal data layer, the typ­i­cal props/eVars/events have been replaced by con­tex­tual ele­ments that can be eas­ily under­stood by devel­op­ers and mar­keters alike. This helps reduce con­fu­sion when deter­min­ing which vari­ables are placed on which page, and fos­ters a uni­ver­sal under­stand­ing of your dig­i­tal mar­ket­ing strat­egy. It also glob­ally defines your strategy’s frame­work. That is, the data layer becomes your stan­dard for deployment—meaning that the cod­ing struc­ture will never change, unless new data ele­ments are introduced.

The dig­i­tal data layer’s real power comes when you com­bine it with an enter­prise tag man­ager, like our phe­nom­e­nal DTM. When the ele­ments of the dig­i­tal data layer are cap­tured and han­dled by an enter­prise tag man­ager, they can be sent to any dig­i­tal mar­ket­ing tool that you host within your tag man­age­ment sys­tem. So, while the above data layer ele­ments can be eas­ily mapped to the appro­pri­ate Site­Cat­a­lyst vari­ables within DTM, you can also share those com­po­nents with any other tool that DTM hosts! If you want to syn­chro­nize this data with Site­Cat­a­lyst, Test & Tar­get, Audi­ence Man­ager, or any third-party dig­i­tal mar­ket­ing tool that might ben­e­fit from the data, you can do it easily!

To sum up—deploying a dig­i­tal data layer is quickly becom­ing rec­og­nized as a best prac­tice for col­lect­ing dig­i­tal mar­ket­ing data and shar­ing it in a stan­dard method across all of the tools in your dig­i­tal mar­ket­ing arse­nal. To learn more about how you can ben­e­fit from imple­ment­ing a dig­i­tal data layer—and about the power and flex­i­bil­ity that DTM provides—reach out to your Adobe Account Rep­re­sen­ta­tive today! And, in an upcom­ing blog post, I’ll show you how the ele­ments of a dig­i­tal data layer are con­sumed by DTM and ulti­mately mapped to Site­Cat­a­lyst vari­ables. Don’t miss it!

13 comments
redaxel
redaxel

Hello Adam, when is your next blog post coming? We're looking forward to understand how to map this data layer to data elements within ADTM.

sitty
sitty

Stumbled upon this post today...wondering if it is ok to set the main data layer variable in a pageload rulein DTM, then setting the individual variables on page? We are currently trying that and for some reason the variables we are mapping are not being passed.

aneter9
aneter9

Can you please let me know that how can I capture the event using Adobe DTM and Data layer? Can you please  let me know more about framework to handle multiple evnets as well as links?

pjuska01
pjuska01

Hi Adam - Great primer.


Version 1 of the specification leaves events fairly open-ended.  The first challenge we encountered was, "How do we implement the W3C standard for *events* (ie Add To Cart, Add to Wishlist) and hook them up to Omniture events (ie scAdd) via DTM."


A Best Practice tutorial in this vein would be of great benefit to our team.


Thanks!
Paul

harshvkabra
harshvkabra

Hi Adam, Quick question, how do we map 's.products' variable in DTM. May be, I am missing something here but I could not find the products(s.products) variable in DTM UI to map.

ndrez
ndrez

Will it also work if we create the DL after the page load? Or, is it crucial to have the DL in the DOM in the moment when the JS snippet for the header is included? 

LeoGarb
LeoGarb

how would I reference such an object in data element's path?


for example, I'd need an element for pageName. What would I do in DTM?

AdamKlintworth
AdamKlintworth

@mhlassoued this is absolutely possible today using DTM.  In my followup blog post (which is coming soon), I will show exactly how to do this within the DTM interface.  It's awesome!!

mhlassoued
mhlassoued

WOW. DTM will manage and maintan the W3C DL structure? Do you think soon we will be able to just define the W3C DL and then (from the DTM UI ) just much the objects/properties to our eVars, props, and events??? This is my dream from couple of months and i think it's SO possible ;)

stevemiles
stevemiles

Nice article - this is exactly what I'm looking to achieve with our DTM implementation. Can't wait for the next part!

AdamKlintworth
AdamKlintworth

@aneter9 Thanks for the post!  If you're talking about Success Events, I typically like to use a variable within my Data Layer that is set to either an arbitrary value, or even the value of "true."  An example would be something like "event_application_start=true".  Within DTM, you would then create a Data Element to bring in this value from your Data Layer, and then build a corresponding rule based on the existence/value of that Data Element.  Remember - rules in DTM are typically built on actions taken, so success events are perfect for building rules like this.


Can you provide some more info on handling links?  The typical method to handle link (or "click") interactions is via the event-based rules in DTM.  Hope this helps out!  Thanks for reading.

AdamKlintworth
AdamKlintworth

@harshvkabra  you are correct - currently, DTM does not have a built-in way to reference the products variable.  However, it can be added by using the "Custom Page Code" feature within the rule that you're using to capture it.  Optimally, you will want to bring in the different components of the Products variable as data elements (SKU, price, quantity, etc.) and then construct the variable by using the _satellite.getVar syntax.  Here's an example:


var p_id=_satellite.getVar('Product ID'); //assumes you are setting data element "Product ID"

var p_price=_satellite.getVar('Product Price'); //assumes you are setting data element "Product Price"

var p_quantity=_satellite.getVar('Product Quantity');


window.s.products=";"+p_id+";"+p_quantity+";"+p_price;


One thing for above - make sure to use "window.s" as that will set the proper page-level scope.  Hope that helps!  Thanks for reading.

AdamKlintworth
AdamKlintworth

@LeoGarb  great question!  If you look at the data layer example that's shared in this post, the 'pageName' element would be referenced as "digitalData.page.pageInfo.pageName."  It basically follows the hierarchical structure of the data layer that you've implemented and each section is separated logically using the "." character (if using a JS object).