Quick tip: DTM – Data Elements & Arrays

~ Jan Exner

Suppose I have a data layer in my page. Suppose that data layer contains an array, like so:

	var dataLayer = {
		"page": {
			"pageInfo": {
				"pageName": "Photos",
				"author": "Jan Exner",
				"breadCrumbs": ["home","photos"]
			}
		}
	};

Suppose I needed a Data Element that gives me the first element of my bread crumb list.

Wrong

The naive approach would be to make a Data Element that directly accesses a JS object, like so:

[Screenshot]
Data Element Definition – Wrong
Unfortunately, that won’t work, as some of you might have encountered.

It has to do with the way DTM accesses data in the DOM — it essentially traverses the path and ultimately accesses the last bit of it using array notation.

So how do we do it, then? DTM is flexible, right? There must be a way, right?

Right

Yes, there is!

Instead of just accessing a JS object, we use custom script, like so:

[Screenshot]
Data Element Definition – Working
The custom script that does the actual work looks like this:

[Screenshot]
Data Element – Custom Code
This is probably the shortest and easiest quick tip in the history of this blog. Short and sweet. I hope it is still useful!

Published by Jan Exner

German expat living in Switzerland (formerly UK and France). Consultant and member of the Multi-Solutions Group at Adobe, working with the Digital Marketing Suite. Father of 4 girls.

9 thoughts on “Quick tip: DTM – Data Elements & Arrays”

  2. In a similar manner, in the Data Element custom code you could do “return dataLayer.page.pageInfo.breadCrumb” (which returns your array), then call it with “_satellite.getVar(‘Breadcrumb’)[0]”. That way you can easily access any of the array values using just a single Data Element by changing the number in the call. I also use the same method to store objects, then call them with “_satellite.getVar(‘Page Info’)[‘author’] to get values for specific keys. I use this method to store a few arrays and objects I use frequently but which aren’t part of the data layer supplied by the developers; kind of my own DTM supplied data layer.

    Like

    Reply

  3. I was wondering if you have tried to use a Data Element with JS Object type with the following syntax instead:
    dataLayer.page.pageInfo.breadCrumb.0
    It should work too and looks simpler 🙂

    Like

    Reply

    1. Hi Andrey,

      Don’t think that works, though. I’m getting “Uncaught SyntaxError: Unexpected number(…)” in Chrome.

      Pity, it looked nice and easy.

      Cheers,
      Jan

      Like

      Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.