by Doug

23/09/2016

Google Tag Manager

Reduce repetition of GTM variables (UPDATED)

Advanced GTM Post

#MondayMotivation Here’s a quick advanced post on a useful GTM technique that will reduce the number of Custom JavaScript variables in your GTM container.

Repeating variable functionality

You may have encountered a situation where you need to apply the same operation to multiple different GTM variables and end up repeating yourself for each dataLayer variable that needs the operation.

I’ve seen this scenario a bunch of times and it makes me sick. I hate wasteful repetition. In “normal” software development, you’d write a utility function that expresses the operation once and you call it multiple times. Can’t do this in GTM. No parameter passing in variables. So you end up with multiple variables doing the same thing. These all need debugging, maintaining and they continue to grow.

We can do this better.

Say we have an app handles hotel room bookings. We have a booking start date and an end date on the dataLayer – “bookingStart” and “bookingEnd”.

We need to extract the day and month names from each date variable. The hateful solution requires a bunch of custom JavaScript variables like these:

  • bookingStartDay
  • bookingStartMonth
  • bookingEndDay
  • bookingEndMonth

They all do the same thing!
This list is only going to get longer and need more maintenance attention as time goes on.

Let’s look at how we can extract the day and month names of each booking date with far less repetition.

Solution

You still need the two source date variables “bookingStart” and “bookingEnd”. We’ll assume they’re typical date values, say 2016-09-28 and 2016-10-1. For this demo, I’ll set them up as constants:

Next we’ll set up two custom HTML tags. These tags each make one JavaScript method globally available – one to return a day of week name and one for the month name.

We expect to be able to record our day and month variables as custom dimensions in a pageview like this:

For each of the CD values, we still use individual variables but they all make use of the same lookup methods exposed by the custom HTML tags. Here’s the booking start day variable:

This scales. Once we’ve got our lookup methods available from the custom HTML tags, they can be fed the relevant day or month index to lookup and return. We can reuse the lookup methods as many times as we like to populate a tag with the right values.

Here’s the booking start month tag – very similar:

The booking end day and booking end month variables are just the same but we’re running getDay and getMonth on the booking end date variable.

It’s important to make sure the day_lookup and month_lookup methods exposed by the custom HTML tags are available for use like this. There’s a few things you can do to help here. You could use tag sequencing to make sure the custom HTML tags fire before they’re needed. You can adjust the custom JavaScript variables to check for the existence of the methods. You could use tag priorities. I’ve used priorities. Sequencing is probably the strongest method but needs careful configuration.

Time to test

Proof here that the right values are visible in the variables tab in preview mode:

See, when I look at the CDs for the pageview tag in the event summary, they’re all set:

And we can see the CD values set in the pageview tag sent to GA:

But a mildly alarming moment when we look at the tag payload in preview mode on the Page View event…What the…!?!?!?:

Remember that variables associated with a tag are evaluated on the event that fires the tag. As the tag details are rendered, the variables have not yet executed.

This is a frequent gotcha with variables and the plot gets even thicker when you consider that you can’t control the order of variable execution.

Thinking aloud

If only…

If only we could pass our date values to a variable that would take an input parameter, evaluate it when we call it and return the right value. Well, we can. We can just spin our own custom JavaScript variable that computes all the required values and sets the values of a bunch of dataLayer variables within the gtm event using google_tag_manager[{{Container ID}}].dataLayer.set(‘my variable’, ‘my value’);

That’s all well and good but there’s still a bunch of repetition, it’s inelegant and I’d much rather use a lookup table or similar to do the computation for me. Reality check – the engineers at Google write better JavaScript than 99% of us – me included. Let’s use their super brains to write and maintain great software rather than fumble around with our own.

Be nice, wouldn’t it?

That’s just me thinking aloud though. For now, we can use custom HTML tags with some JavaScript to be “good enough”….for now 😉

Update

If you’ve read the comments, you’ll have seen the fantastic generosity and smartness of my friend Simo. Here’s Simo’s suggested solution in action:

The day_month variable:

That’s a Custom JavaScript variable. As we know, they’re functions that always return a value and have no other side effects. What Simo does here is very clever. This function returns another function. (We’re not in Kansas anymore Toto)

That function returns an object that is comprised of two functions getDOW and getMonthName. The date parse and array lookup functionality is pretty self explanatory.

The fact that day_month returns a function is worth noting. Look what GTM says day_month returns in Preview Mode:

Knowing this, the booking start day CD field value can’t be:

{{day_month}}({{bookingStart}}).getDOW()

No, this will just render the string value of the function we saw above. We actually want the function with the parameters to be evaluated so we wrap the line above in a Custom JavaScript variable like so:

Rinse and repeat for the other variables and our CD config now looks like this:

And when we spin this up in Preview Mode we see that is works like a charm:

Success! Thanks Simo. I’ll certainly put this technique in the list of “powerful advanced JavaScript things that I now know” for reuse at the right time.

That’s a key piece of meta knowledge that fully understanding JavaScript and a wealth of experience gives you. You can have the technical minerals but you need to know what you know and you need to know the right time to use them.

Comments

Leave a comment

Your email address will not be published. Required fields are marked *