Pushing DataLayer Values in Adobe Sitecatalyst variables via DTM

Quick post this week on Adobe DTM and dataLayer values.

Once your SDR is setup and your dataLayer implemented on your web site, the first steps you need to make is push all the dataLayer values into the relevant Props and eVars so you can start populating your Sitecatalyst and Workspace reports with data.

The first step you need to take is create your data elements in Adobe.

What are the Data Elements in Adobe DTM

Data Elements  are there to pull data from the page whether these values are hardcoded in the dataLayer or set dynamically server side. You will need help from your developers in order to populate these data elements with values if you are about to create a page load or a direct call rule tag.

Adobe DTM gives you five different Element types you can use in order to capture this data. These are:

JS Object: This can be a JSON structure or any JavaScript variable that is in the DOM such as document.title. Most of the times you will be using this!
CSS Selector: Indicates a location on your page and to me this is the easiest way to capture your values. You can then pull the value either from the text or dynamically with Javascript Variables.
Cookie: DTM can read any of your cookie values
URL Parameter: Just like it sounds, DTM can grab any query string variable. Useful for various digital campaigns with tagged URLs.
Custom Script: If you need to perform some extra data manipulation to a data point or you want to use this custom area to access any system with a Web services or API, you are able to perform that function here.

Since this post is about dataLayer values we will be working with the JS object element type.

Pushing Data Element values to Sitecatalyst variables (prop/Evar)

First you need to create your Data Element. Go to your DTM interface and click on Data Elements, then click “create new”.

From the drop down options pick “JS Objects”

 

Then let’s say you want to push the “internal_search_input” value from your dataLayer.

You need to add the following text to the Path field dataLayer.<<name of value here>>. In our example dataLayer.internal_search_input:

Now exit the data element area, click on page load tags (in most cases with internal search variables it will be pageload) and click “New”.

Create your “search tracking” tag (you can name it however you like), go to the prop field and type %.

This will open the list with all the data elements avaliable as a drop down list.

Start typing the  %name of Data Element% and your newly created data element should appear as shown below:

Save it, then duplicate it in an eVar (in our example below we duplicate prop14 with eVar13):

Do this for all your data elements that are related to the variable type (in this case the Search variables) so you can control everything from one tag. Bear in mind that this structure is exclusively up to you and how you like to design your tags, i personally like having everything at one place.

How to pick up an Array member from the dataLayer with DTM

Now, let’s assume that you want to pick up an array member – say product name – from your data Layer that lives within the [1] container.

Based on the methodology above, you would go with something like this: dataLayer.ecommerce.products[1].product_name assuming your array looks like this:

However I have been into multiple cases that JS objects do not work with Array’s for some weird reason (or at least I am not in a position to explain why), so you need to make a custom script and create a path as per the property you want to capture path like this:

So from this:
dataLayer.ecommerce.products[1].product_name

You need to click on “Custom Script” (instead of JS object) and hardcode the path as shown below:

 Debugging your Custom Script

In your console log type the following:

console.log(“name of your Array OBJECT here = “+_satellite.getVar(‘Enter here the name of your Data Element here‘));

You should now be able to see your product value:

This is also a good way to QA tags that populate values directly from your data Layer.

Update: 

Update on the JS Object and Array issue:
Once again Alex Brown to the rescue. It seems that one of the reasons the JS object do not work with Array’s is because of timing issue between when the variable is available Vs when the DTM rule gets fired. The timing issue normally happens in those cases where the values for the data layer elements are fetched dynamically. So by the time the DTM rules fire the value is still not fetched from the server.

Having said that the condition that is currently setup in the custom code is not really something that will always definitely capture the value.  It depends on the internet speed among other network related dependencies. A better option is to setup a time delay condition to ensure the rule waits for a few milliseconds to ensure the value gets captured almost always.

You could use something like the below in your custom code: