• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

October 2, 2022

JavaScript Variable in Google Tag Manager: Quick Guide

Updated: October 2nd, 2022

If you have ever tried to find more information about the JavaScript variable in Google Tag Manager, here’s what you’ve probably seen: 1 paragraph in Google’s official documentation, and a bit more in Simo Ahava’s guide. But in general, not much. So I decided to dig deeper and give you a bit broader picture of what’s behind that mystical name, JavaScript Variable.

 

This is not a Custom Javascript Variable

I noticed that some people confuse JavaScript Variable with Custom JavaScript Variable in Google Tag Manager. Those are two totally different concepts.

JavaScript Variable retrieves a value of a global variable, e.g. Page Title, Page URL, etc., while Custom JavaScript is a function that might be much more complex, e.g. return a clicked text but in lower case, or get a form field value, etc.

 

Short description

Here’s a pretty common description found online:

JavaScript variable returns the value stored in the global JavaScript variable you specify.

Admit it, if you’re new to JavaScript or have no knowledge at all, this gave you more questions than answers.

 

What is a global JavaScript Variable?

I promise I’ll try to explain this as simply as possible, so please, bear with me. Before we start digging deeper, you need to learn about the scope. In JavaScript, there are two types of scope:

  • Local scope
  • Global scope

Variables declared within a JavaScript function, become LOCAL to the function, meaning that they are not accessible (visible) from outside the function. Take a look at the example below:

// code here can not use authorName variable

function myFunction() {
 var authorName = "Julius";
 // code here can use authorName variable
}

There is a variable authorName and it only can be accessed within the function called myFunction.

Contrary to that, a variable declared outside a function becomes GLOBAL. A global variable has the global scope: all scripts and functions on a web page can access it. Let’s use the same code example but place the variable outside the function.

// code here can use authorName variable
var authorName = "Julius";
function myFunction() {
 // code here can use authorName variable
}

What does it have to do with the JavaScript Variable in Google Tag Manager? Well, it can fetch values of any global variable which is present at that moment.

Are there some useful JavaScript variable examples?

If you had some experience with Google Tag Manager before, you have probably already used the Page Title variable (which was also mentioned in this blog post). All you had to do was to enter document.title in JS variable’s settings and voilà!

JavaScript Variable - Page Title

 

But that is not the only useful example, to name a few more:

  • navigator.language (Browser language).
  • navigator.userAgent (Surprise! It’s your user agent).
  • document.referrer (The address of the previous page (or a hostname, it depends on the configuration of the previously visited site). This variable serves the same purpose as a built-in an HTTP Referrer variable).
  • document.URL (A full URL of a current page (includes ports, URL fragments, query parameters, etc.)

navigator.language

You can find a list of other standard global variables here. On that page, there is a table of various properties, feel free to explore it. Say, that you’re interested in the document object, click the See Document Object link.

document object

What you’ll find is a bunch of properties/methods that belong to the document object. document.title and document.URL are among them.

document.title and document

You should enter those property titles in the settings of the Google Tag Manager JavaScript Variable.

JavaScript Variable - Page Title

UPDATE: I’ve posted another guide on this variable that opens even more possibilities of fetching the data. That blog post is called How to get more data about the user with JavaScript variable.

 

Useful links

If you consider yourself a total JavaScript newbie, the following resources are a good start to understand what scope means in JavaScript.

  • 5-minute video tutorial about local vs global variables. Level: beginner.
  • JavaScript scope, W3schools.com. Level: beginner.
  • A list of standard global variables (it’s the same link I’ve already mentioned in this guide).

 

More Global Variables

Oh, and one more thing, if you want to see what Global Variables are available on your website, go to the developer console of your browser (here’s a tutorial on how to do that on Chrome), type window, and hit enter.

window in console

Click the black triangle near the Window and you’ll see a list of global JavaScript Variables.

Say that, for some reason, you’re interested in the value of vid which is a key in the gaGlobal object.

gaData

In that case, you’ll have to enter gaGlobal.vid as a global variable name in the JavaScript Variable’s settings.

javascript variable

That’s it. Do you know any other useful examples of this variable that were not mentioned in the blog post? I’m really interested in hearing your ideas/thoughts. The comments section is at your service.

Julius Fedorovicius
In Google Tag Manager Tips
8 COMMENTS
Neftali
  • Jul 9 2018
  • Reply

What about obtaining variable data from an event in Google Analytics? Is this possible for Google Tag Manager, as I am trying to setup Google AdWords Conversion tracking using GTM but can't seem to move the information from a purchase transaction to AdWords using an existing E-Commerce event in GA.

    Julius Fedorovicius
    • Jul 22 2018
    • Reply

    Hey, for this purpose, you should use a Custom JavaScript variable because you'll need to write more complex logic how that variable should access the Ecommerce data.

Adam
  • Aug 12 2018
  • Reply

Hi Julius,
is it possible to pull JavaScript variable from facebook pixel script?
It is builded like:

fbq('track', 'ViewContent', {
content_name: 'product name',
content_category: 'category > category2',
content_ids: ['ccc'],
content_type: 'product',
value: 1234,

currency: 'GBP'
});

Best

    Julius
    • Aug 13 2018
    • Reply

    Hi, I never tried that. Open browser's developer console, enter fbq and start drilling down to find out what you can get :)

      Adam
      • Aug 13 2018
      • Reply

      Thanks Julius, I'll try to follow this lead :)

      Best

Eduard
  • Apr 30 2019
  • Reply

Hi Julius,
could you please confirm that the vid was the clientId and is now not available anymore as global java script variable? There is only the hid, which I found in PV-Hit as AdSense Link Code again.

And, as replacement for fetching the client Id, would you agree to use

function() {
  return window.ga.getAll()[0].get('clientId')
           }

?

    Julius Fedorovicius
    • May 2 2019
    • Reply

    Hey, you should definitely use your function in order to get the cid (client id). In fact, you can also enter "window.ga.getAll()[0].get('clientId')" in the JavaScript variable and it will also work.

Ahmad
  • May 2 2020
  • Reply

Hi Julius. I sell books on my site. On the main page "add to cart" variable is different from the on the content page. So i create two custom js variable on gtm (for example 1st variable and 2st variable). And i want to send Facebook Pixel Add To Cart paramert; if 1st variable true send else send 2sd variable. What can i do?

Leave a comment Cancel reply

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

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings