Validating your Adobe DTM Data Layer with this simple script


In my last post I talked about a few different ways to validate DTM rules and scripts in real time using the browser console. In addition for the need to understand general validation, many clients will deploy a data layer directly on each page as part of their implementation strategy and want to see exactly what data is available 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 architecture or best practices, I wanted to share a quick script that can be deployed via DTM to help you see your data layer structure directly in the console.

Accessing your data layer in the browser console

A common method for creating a data layer is to use JavaScript Object Notation or JSON (pronounced 'JAYS-ON'). We'll save this broader topic for another day, but in short, JSON is collection 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 homepage example above might look something 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 reference for validation

Once my data layer object is on the page (and formatted 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 validation process.

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

Another validation option is to "flatten" the data layer and push the contents to the console in a JSON string format by using the JSON.stringify() function. We can do this by running a small asynchronous 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 parameter to the JSON.stringify() function to convert it to a string.

I then use my dtm_notify() wrapper function (see my previous post) to push the content to the page.

Here’s an example of the code as an asynchronous javaScript in DTM:

And the output in the browser console looks like this:

Conclusion:

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

For more information on JSON or the JSON.stringify method please visit www.json.org


About Search Discovery

Search Discovery is a digital intelligence company that empowers organizations to make better, dynamic and transformative business decisions. We're focused on delivering results for our clients through digital analytics, SEO, digital media, and technology.


Comments

Let's Talk.

You're excited. We're excited. Give us a shout so we can get this party started.

!
!
!