In my last post I talked about a few differ­ent ways to vali­date DTM rules and scripts in real time using the browser console. In addi­tion for the need to under­stand general vali­da­tion, many clients will deploy a data layer directly on each page as part of their imple­men­ta­tion strat­egy and want to see exactly what data is avail­able at run time without having to “view the page source” all the time.

While I won’t spend much time in this post talking about data layer archi­tec­ture or best prac­tices, I wanted to share a quick script that can be deployed via DTM to help you see your data layer struc­ture directly in the console.

Accessing your data layer in the browser console

A common method for creat­ing a data layer is to use JavaScript Object Nota­tion or JSON (pronounced ‘JAYS-ON’). We’ll save this broader topic for another day, but in short, JSON is collec­tion of name/value pairs used to define actions or content on a page. This syntax is usually written as a defined object on the page.

My JSON data layer on my home­page example above might look some­thing like this:

<script type="text/javascript">
 DDO = {} // Data Layer Object Created
 DDO.specVersion = "1.0";
 DDO.pageData = {
    "pageName":"DTM Demo|Café Home Page",
    "pageURL": getURL,        // Dynamically Populated with Global Functions
    "pageRef": getRef,        // Dynamically Populated with Global Functions
    "pageSiteSection":"Home",
    "pageType":"Section Front",
    "pageHier":"DTM Test|Home|Section Front"
   },
  DDO.siteData = {
     "siteDomain": getDomain,  // Dynamically Populated with Global Functions
     "siteCountry":"us",
     "siteRegion":"unknown",
     "siteLanguage":"en",
     "siteFormat":"Desktop"
    }
</script>
Notice I call my data layer object “DDO” (Digital Data Object) just to create an easy short hand object refer­ence for vali­da­tion

Once my data layer object is on the page (and format­ted correctly) I can access it directly by typing “DDO” in the browser console.

This is a great option in most cases but you will still need to click through each data object level to check your data. When you have a more complex data layer object that requires you to “break down” several levels, this can become a pretty tedious vali­da­tion process.

Convert your data layer object to a string with the JSON.stringify() method

Another vali­da­tion option is to “flatten” the data layer and push the contents to the console in a JSON string format by using the JSON.stringify() func­tion. We can do this by running a small asyn­chro­nous script as part of a global page load rule within DTM.

Here’s my script:

if (typeof DDO!=='undefined'){

  var ddoString = JSON.stringify(DDO);
  dtm_notify('DTM:DDO:'+ddoString);

}else{

   dtm_notify('DTM:DDO not defined');

}

Notice that I first check to see if the data layer object (DDO) is defined on the page before I do anything else. This helps avoid errors as the code loads.

However, if my data layer object is defined on the page, I then pass the entire object as a para­me­ter to the JSON.stringify() func­tion to convert it to a string.

I then use my dtm_notify() wrapper func­tion (see my previ­ous post) to push the content to the page.

Here’s an example of the code as an asyn­chro­nous javaScript in DTM:

And the output in the browser console looks like this:

Conclusion:

As I mentioned above, there are several ways to vali­date the contents of your data layer. I use the JSON.stringify() approach often because it provides a simple way for you to see and vali­date your data layer objects in real time.

For more infor­ma­tion on JSON or the JSON.stringify method please visit www.json.org