Custom JavaScript Variable in Google Tag Manager

Let us explore how to use the Custom JavaScript Variable in Google Tag Manager accurately. This Variable is often used to extend the functionality of GTM beyond the provided methods of creating Variables. If you know JavaScript, you can easily input an anonymous function which will be executed when the Variable is checked. This allows for a far bigger range of Variables than before.

helpful Links:

http://www.simoahava.com/analytics/macro-magic-google-tag-manager/
http://www.codecademy.com/tracks/javascript
Variable JS Template: http://pastebin.com/CAfeE48Y

Course: https://measureschool.com/youtube
more Resources: https://measureschool.com

RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books

GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear

Hello and welcome to another video of GTM training.com with me Julian. And today we want to talk about the custom JS variable within Google Tag Manager. Before we get started, these little videos are brought to you by my Google Tag Manager course, where you learn the essentials of this awesome tool and how to use Google Tag Manager effectively. If you’re interested, head over to GTM training.com slash YouTube. Now let’s dive right into our demo account here and talk about custom JavaScript variables within Google Tag Manager. And as you might know, you can find variables under the variables tab. And you have all these built in variables available to you. And if you want to extend the functionality, down here you have user defined variables, where you can basically create your own variable and there’s different functionality to create a variable one that is really powerful, and really extends the capabilities of Google Tag Manager is the custom JavaScript variable. Once we click on it, we basically just get this little screen here, where you can input your configurations for this new JavaScript variable.

Now let’s run away, do our first test here, and input something in this JavaScript variable field. Obviously, you’re better off knowing a little bit about JavaScript. But there are also examples out there on the internet. And I will show you some later where you can copy paste some custom code that you can input here. For the first example, we’ll just go with the example that we have here in this little pop up of the help section. And this is a anonymous function that we’ll just copy and paste in here. And let’s see what it does. Let’s give this appropriate name and let’s create this variable.

And in order to check a variable, we can of course go into our preview in debug mode, then go over to our page. And our debug console opens here. And we can click on one of these events, and go on to variables, and then see what value our variable got. So here we have our new variable. And this variable returns the time since the first of January 1970 in milliseconds. And this is a classic example of the time functionality in JavaScript. But we can also do some more useful stuff. Now let’s look back into our Google Tag Manager account and especially this variable and dissect that a little bit. So first of all, here we have a anonymous function, which we actually need for a custom JavaScript variable to execute correctly. And we have a return value. And this is also very important. Otherwise, Google Tag Manager wouldn’t let us save it correctly. So just remember you need an anonymous function and a return value. And we could put anything in here and return it to our variable. So for example, a string.Let’s test that save this variable, refresh our debug mode, go back in our page, reload that and view our value of this variable. is a string called test. But there are also more useful stuff we can do with these custom variables. Let’s go back into our variable. And let’s put in some JavaScript here, for example, document title, which we can get through any other variable that we have right now in all our variables menu. Let’s save that and check the value again.

And as we see here, the document title variable is now mirroring whatever we have as a title of this document. And this is also something you can already use. So for example, if your title entails 404 if there’s a 404 error appearing on your site, you could, for example, fire an event based on this JavaScript variable, which of course, you can use within triggers. And then also to customize your tag configurations, for example, a Google Analytics event tag. And let’s look at other examples here. Another example that I use often is to pull the client ID, which is the ID that identifies the user of Google Analytics into a custom JavaScript variable. And I prepared some code here and this will simply get the track of from Google Analytics, and pull out the client ID, and return this as the value of this variable. Let’s name this. Save it, refresh. And check our demo shop.

Now, in order for this to work, you need to have Google Analytics deployed, which we have. And when we look into the page, you will see now that the client ID wasn’t correctly filled. It has a value not available, which can happen when the variable gets checked too early before the tracker has completely initiated. Let’s check the other events here. Dom is not ready yet. But on page load, we have here a client ID, which we could use any custom variable or custom dimensions As it is known in the new Universal Analytics to tag our customer, and this can be hugely valuable once you want to identify a customer or user on Google Analytics through his client ID. Now let’s look into this variable again.

And see why we have these na arrows. Well, it’s because we built in a condition here to try first if the client ID is available, and if there’s an error, we want to log it to the console that there’s an error and return the value. If you don’t do this, this will result in the famous undefined, which we see here a lot. And to prevent that we can build in such a functionality and I use this all the time. To prevent Google Tag Manager from spitting out an undefined, and I will provide you this code in the description of this video, if you choose. So now if you want to try more custom JavaScript variables out, there is actually a great blog post by Simo Ahava on macro magic. And macros are old names for variables in the old version of Google Tag Manager. But the examples that he has here, hold up really nicely in the new JavaScript in the new custom JavaScript variables. So I’ll link that up in the description for you to check out. And that’s already it with this week’s video on Google Tag Manager. I hope you enjoyed it. JavaScript variables are really useful to extend the functionality of Google Tag Manager if you’re not very familiar with JavaScript, I would recommend to take a class at Code Academy which is free, which will get you started on using JavaScript correctly.

If you have enjoyed this video, please give us a thumbs up or subscribe to this channel. So you’ll be updated once a new video comes out, which is almost every week now. I’m Julian til next time. 

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
0 Comments
Inline Feedbacks
View all comments