Extending the Functionality of Google Tag Manager Variables

/

blog-gtm-variable2

When you create a Custom JavaScript Variable, Google Tag Manager forces you to use an interesting pattern:

function() {
  // return something
}

In your Variable, you can add whatever JavaScript you wish, but you must return something. Typically this is a string or number, or sometimes an array or object.

However, Custom JS Variables can return anything, even functions, and you can pass arguments into those functions to get different results.

Why Would I Want To Do This?

Variables that return a function are good for reusing smaller snippets of code that you use over and over. You might be doing this right now by defining functions on the page or inside of a Custom HTML Tag and then calling them in other Variables or Custom HTML tags.

Defining functions in this manner does work, but it pollutes the global scope with variables that can cause collisions with other code on the page. If you are an agency or consultant adding code in this manner, this can have annoying or even catastrophic results, now or at some point in the future.

This is also a simple way to reuse the same code across many Custom HTML Tags or Custom JavaScript Variables. For larger implementations, this can free up valuable space in your container, which has a limit of 200kb.

Why Wouldn’t I Want To Do This?

Variables are evaluated anew each time they are referenced in a tag. Behind the scenes, Google Tag Manager stores your variables as strings, then passes them into eval() wherever they are required. Although this isn’t the worst thing in the world, your scripts may execute a little more slowly as a result, since there will now be an additional eval() for the Custom JavaScript Variable that you are passing your arguments to.

It’s important to note that this approach also will only work in Custom HTML Tags or Custom JavaScript Variables. Inside of a pre-built tag, like the Action field of a Google Analytics event tag, the Variable will return as the function itself, turned into a string – in other words, not good!

Using Functions with GTM Variables

It’s pretty easy to use a function inside of a variable, you just need to keep a close watch on your syntax. Simply return a function with your Variable, just like this:

function() {
  return function( arg ) {
    // do something with you argument
    // return something
  }
}

For a purely hypothetical example, let’s try creating a function inside of a Custom JavaScript Variable. A function is something we’ll want to use over and over again, and that will take some sort of argument that we pass to it.

This example below will count the number of images on the page that match a certain filename:

Use this concept whenever you’ve got N of the same thing you need for a particular tag or event. For example, this is a great fit for counting all of the images on a page that contain an array of words. But there are more advanced use cases, too.

An Even Better Example

Here’s one of my personal favorites. Sometimes, tracking particular behaviors or metrics for clients requires utilizing JavaScript, either in a Custom HTML Tag or a Custom JavaScript Variable. I wrote this function to wrap all of my custom code inside of a try/catch block that fires a Google Analytics event whenever my code fails. I’ve got a variable that looks like this:

Then, when I want to add a Custom JavaScript Variable or a Custom HTML Tag, I wrap all the scripts I use in that Variable, like below. In these examples, I’ve used a script that I know will fail in Internet Explorer 8.

Here’s why it fails: Normally, a split that removes an entire chunk returns “” in that chunks place, so the above would evaluate to [“”, “String”]. However, on IE8, the empty string is thrown out of the array, so we’re left with just [“String”]. This code would then fail, since it expects a value at [1], which there would not be. Without this helper Variable, the function would simply fail and possibly cause other issues for the browser.

With our custom variable, the function still fails, but this time it sends a dataLayer push with the name of the function and the error message. This is information that the built-in JavaScript error listener doesn’t get, because of the way the variables are executed. Our script also prevents an error from being logged to the browser console, since the error is caught.

I then use a different tag/trigger to listen for this dataLayer push, and then to send a Google Analytics event to a property that I keep for QA purposes, though you could certainly see other use cases. If my container is in debug mode, I log this info to the console instead of firing an alert.

Since I use a standard Google Analytics Event, I also get the browser, operating system, page URL, and more, which makes diagnosing the problem easier. Since it fires an Event every time, I can also quickly determine which problems are more or less important, depending on their scale.

These are just a few examples of where you might benefit from returning a function with your variables. I’d be really interested to hear any suggestions you’ve got for how you can apply this pattern.

Dan Wilkerson is a Software Engineer at LunaMetrics. He is passionate about web technology, measurement, and analysis. Dan is the winner of the 1999 Forge Road Elementary School Science Fair for his groundbreaking report on how magnets work. (ICP, take note.) Dan has worked at LunaMetrics in social media, as our marketing manager, and now in our analytics department.

  • http://www.upmize.com.br AndrĂ© Mafei

    Nice trick, thanks for sharing Dan.

  • Mila Witjes

    Thanks for this excellent article. One question: In the Custom Error Catch script, the name variable is used to store the function name (first argument). But this value can be overwritten by err.Filename or err.Name. Is this done on purpose?

    • Dan Wilkerson

      Hey Mila,

      Good catch! No, that was a slip on my part; I was adding some logic recently to make it more compatible with older browsers. Updated to fix!

      Thanks Mila.

      Dan

  • Roman Kaye

    Thank you for the article. I came here from Google looking for “tag manager custom javascript return array”: I wonder if there is a way to do something like {{My custom JS array}}[0] in GTM?

    • Dan Wilkerson

      Hi Roman,

      If you had a Custom JS Variable named ‘Foo Array’ that looked like this:

      You could then do this inside of another Custom HTML Tag, or a Custom JS Variable:

      You could even construct an array in a more complicated function and return that, something like:

      • Roman Kaye

        Excellent, thank you. It’s always so obvious when somebody has done the explaining.

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.