In my last post I talked about a few dif­fer­ent ways to val­i­date DTM rules and scripts in real time using the brows­er con­sole. In addi­tion for the need to under­stand gen­er­al val­i­da­tion, many clients will deploy a data lay­er direct­ly on each page as part of their imple­men­ta­tion strat­e­gy and want to see exact­ly what data is avail­able at run time with­out hav­ing to “view the page source” all the time. 

While I won’t spend much time in this post talk­ing about data lay­er archi­tec­ture or best prac­tices, I want­ed to share a quick script that can be deployed via DTM to help you see your data lay­er struc­ture direct­ly in the console.

Accessing your data layer in the browser console

A com­mon method for cre­at­ing a data lay­er is to use JavaScript Object Nota­tion or JSON (pro­nounced ‘JAYS-ON’). We’ll save this broad­er top­ic for anoth­er day, but in short, JSON is col­lec­tion of name/value pairs used to define actions or con­tent on a page. This syn­tax is usu­al­ly writ­ten as a defined object on the page.

My JSON data lay­er on my home­page exam­ple 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 lay­er object “DDO” (Dig­i­tal Data Object) just to cre­ate an easy short hand object ref­er­ence for validation

Once my data lay­er object is on the page (and for­mat­ted cor­rect­ly) I can access it direct­ly by typ­ing “DDO” in the brows­er console.

This is a great option in most cas­es but you will still need to click through each data object lev­el to check your data. When you have a more com­plex data lay­er object that requires you to “break down” sev­er­al lev­els, this can become a pret­ty tedious val­i­da­tion process.

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

Anoth­er val­i­da­tion option is to “flat­ten” the data lay­er and push the con­tents to the con­sole in a JSON string for­mat by using the JSON.stringify() func­tion. We can do this by run­ning a small asyn­chro­nous script as part of a glob­al page load rule with­in 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 lay­er object (DDO) is defined on the page before I do any­thing else. This helps avoid errors as the code loads. 

How­ev­er, if my data lay­er object is defined on the page, I then pass the entire object as a para­me­ter to the JSON.stringify() func­tion to con­vert it to a string.

I then use my dtm_notify() wrap­per func­tion (see my pre­vi­ous post) to push the con­tent to the page.

Here’s an exam­ple of the code as an asyn­chro­nous javaScript in DTM

And the out­put in the brows­er con­sole looks like this: 

Conclusion:

As I men­tioned above, there are sev­er­al ways to val­i­date the con­tents of your data lay­er. I use the JSON.stringify() approach often because it pro­vides a sim­ple way for you to see and val­i­date your data lay­er objects in real time.

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