Which Variables Are Supported by Custom Image Tag When JavaScript is Off? [Cheat-Sheet]

Last week, I’ve published a blog post on how to work with Variables in Google Tag Manager. One of the tips I’ve explained was that the majority of variables do not properly function when JavaScript was off (even when those variables were inserted into a Custom Image Tag).

After the post was published, I received a couple of questions regarding other variables which were not mentioned in the article. Will they work properly when JS is off?

Those questions got me thinking that probably more of my readers might have the same questions. As a result, I have created a cheat-sheet with all variables (both built-in and user-defined) which should answer the question: Which Variables are supported by custom image tag when JavaScript is off?

 

 

So Which Variables Are Supported by Custom Image Tag when JS is OFF?

First, I’d like to point something out one more time. If Javascript is disabled in the browser, your very last chance of tracking something on a web page is to use a Custom Image Tag. Though you will be very limited, some data points (related to page-viewing behavior) can be sent to other analytics tools.

Also, keep in mind, all JavaScript related interactions (e.g. video plays, scroll depth, history changes, etc.) cannot be tracked if JavaScript is disabled in the browser. Period.

Built-in Variables	Works without JS?	Comment
Click Element	No
Click ID	No
Click Target	No
Click Text	No
Click URL	No
Container ID	Yes
Container Version	Yes
Debug Mode	Yes
Environment Name	Yes
Error Line	No
Error Message	No
Error URL	No
Event	Partially	Returns values of pageview-related events only
Form Classes	No
Form Element	No
Form ID	No
Form Target	No
Form Text	No
Form URL	No
History Source	No
HTML ID	No
New History Fragment	No
New History State	No
Old History Fragment	No
Old History State	No
On-Screen Duration	No
Page Hostname	Yes
Page Path	Yes
Page URL	Yes
Percent Visible	No
Random Number	Yes
Referrer	No
Scroll Depth Threshold	No
Scroll Depth Units	No
Scroll Direction	No
Video Current Time	No
Video Percent	No
Video Provider	No
Video Status	No
Video Title	No
Video URL	No
Video Visible	No
User-defined Variables
HTTP Referrer	No
URL	Yes
1st Party Cookie	No
Custom JavaScript	No
Data Layer Variable	Partially	Data Layer Variables can function without JS only under one condition: if a developer decorates the iFrame link within the <noscript> with query parameters. Read more.
JavaScript Variable	No
Auto-Event Variable	No
DOM Element	No
Element Visibility	No
Constant	Yes
Custom Event	Partially	Returns values of pageview-related events only
Environment Name	Yes
Google Analytics Settings	No
Lookup Table	Partially	Works only with those variables which do not depend on JS
Random Number	Yes
RegEx Table	No
Container ID	Yes
Container Version Number	Yes
Debug Mode	Yes

 

Check for Yourself

If you have doubts regarding the cheat-sheet I’ve published above, you can check everything by yourself. First, create a Custom Image tag by entering any fake domain, for instance, https://www.exxxxxxxample.com/ and then insert a variable (as a query parameter) you wish to check, e.g. ?pageurl={{Page URL}}.

The final value of the field could look something like this: https://www.exxxxxxxample.com/?pageurl={{Page URL}}

Set the tag to fire on All Pages.

Now, with Preview and Debug mode, check whether the tag fires correctly and does not break your website (actually, it shouldn’t do anything wrong). If yes, then Publish the Container. Why? Because Preview and Debug mode will not work once you disable JavaScript.

The next step is to disable a JavaScript in your browser. I won’t go into details because every browser is different. Go google it.

Now, open developer tools of your browser (in Chrome on Windows, you can do that by pressing F12), go to the Network tab and enter “xxx” (which is a fraction of our fake domain, https://www.exxxxxxxample.com)

This is a request made by the Custom Image Tag. It’s marked red because there was no receiving server located under the https://www.exxxxxxxample.com address but that’s not an issue. What you need to do is click that red text to dig a bit deeper and look for the Request URL.

As you can see in the screenshot above, {{Page URL}} variable was replaced with https%3A%2F%2Fwww.analyticsmania.com%2F which is an encoded version of https://www.analyticsmania.com/ (and that’s exactly what we needed). If the variable is replaced with some value (when JS is disabled), then the variable does not depend on JavaScript.

In other cases, variables will return undefined (which is bad news) and that means that the variable will not work with JS disabled.

 

Summary

If you’re planning to track visitors who have disabled JavaScript in their browsers, you might have some hard time because the majority of GTM functionality heavily relies on JS. In that case, your only hope is a Custom Image Tag which can help pass some data to 3rd party tools, like Facebook.

Unfortunately, the majority of variables will not work when JavaScript is disabled (because they also rely on it). In this blog post, I’ve shared a cheat-sheet which contains all variables that support a non-JavaScript browsing (and also those which don’t).

What’s the best way to memorize that table? Here are a few tips:

• URL related variables do not require JS.
• All JavaScript related variables (Data Layer Variables, Custom JavaScript, JavaScript Variables, etc.) will not work.
• All built-in variables related to built-in triggers, like Youtube, Scroll, Click tracking (and many more), will not work.
• Utilities (like Container ID, Container Version) will work just fine.