Google Tag Manager dataLayer variables are undefined

Question

When my page is displayed, I push some data to Google Tag Manager (GTM) dataLayer:

dataLayer.push({
    event: "MY_EXPERIMENT", 
    variant: "A",
    result: "FORM_DISPLAYED"
});

When the form is submitted, I push some new data:

dataLayer.push({
    event: "MY_EXPERIMENT", 
    variant: "A",
    result: "FORM_SUBMITTED"
});

I've created dataLayer variables in GTM, and I've inserted those in the category/action/label fields of my tag in GTM. One of the variables is setup like this:

The tag is triggered by URL path, and in preview mode it works.

However, when I look the event up in the live dashboard of Google Analytics, only "undefined" is displayed in the category/label/event columns. It seems to me the variables are not set up correctly, but I've looked through everything and it seems just fine.

What am I doing wrong?

Answer 1

It's hard to tell without any screenshots or further details but what's most likely happening is that your tags are firing too early. You said that the GA event tag is triggered based on a URL path. This most likely means that you're using the All Pages trigger in GTM with an optional filter to only fire on specific pages. However, you're most likely only executing those dataLayer pushes after the GTM container code. This means that at the time of tag firing, those dataLayer pushes haven't executed yet and that's why you're getting undefined in the values of the variables.

To fix this you should change the trigger of your GA event tag from All Pages to a Custom Event. In your case, the custom event name would be MY_EXPERIMENT.

Answer 2

I figured this out. I hadn't checked the "Use Datalayer" checkbox under More settings -> E-commerce in my event tag in GTM. Hard to find the checkbox, and I haven't seen it documented in any tutorials. But that solved my problem!

Sorry for no screenshots.