October 24, 2017

Other 5 User-defined Variables You Should Try in Google Tag Manager

In one of my previous blog posts, I shared 7 must-have user-defined variables in GTM. This time, I’ve prepared a sequel. Honestly, some of them look really obvious to me, but to my surprise, I’ve noticed that some of my students (or readers) find them new and eye-opening. Maybe you’ll make use of them too.

#1. Random number from an interval

If you have ever used a built-in random number variable in GTM, you already know how it works: you have a huge interval between 0 and 2147483647 and it might return a random value. But what if I want to get a random number from the interval between 1 to 3? In that case, the built-in variable becomes very limited.

Good news that I have this little piece of JavaScript code which can be implemented as a Custom JavaScript variable.

function ()
{
 var min = 1; //edit the minimum possible value
 var max = 5; //edit the maximum possible value
 return Math.floor(Math.random()*(max-min+1)+min);
}

function ()

{

var min = 1; //edit the minimum possible value

var max = 5; //edit the maximum possible value

return Math.floor(Math.random()*(max-min+1)+min);

}

All you need to do is set the minimum (min) and maximum (max) value of the interval and every time the page reloads this variable will return a random value. In the example below, I’ve set the minimum value of 1 and maximum of 5 but you can define anything you want.

Google Tag Manager Course for Beginners - Learn More

#2. Is the visitor organic?

If you wish to fire a tag for visitors when they land on your site from search engines, this custom JavaScript variable is what you need. It checks the referrer from which the visitor has come and if it contains any evidence of the search engine, the variable will return the value true.

Although you can achieve the same result with a built-in variable Referrer or Lookup table which uses Referrer as the input value, this custom JavaScript variable contains a list of most popular search engines (e.g. Google, Yandex, AOL, etc.) and saves you a lot of time.

Just copy the code below and paste it in a Custom JavaScript variable.

function(){
 var searchEngines = ['www.google', 'www.bing', 'www.yandex', 'search.yahoo', 'duckduckgo', 'www.ask', 'www.search', 'www.info', 'www.baidu', 'search.aol', 'www.dogpile'];
 var referrerHostname = document.referrer.split('/')[2]; 
 var shortenedHostname = referrerHostname.substr(0, referrerHostname.lastIndexOf("."));
 var indexOfSearchEngines = searchEngines.indexOf(shortenedHostname); 
 if (indexOfSearchEngines > -1){
  return true;
 } else {
  return false;
 }
}

function(){

var searchEngines = ['www.google', 'www.bing', 'www.yandex', 'search.yahoo', 'duckduckgo', 'www.ask', 'www.search', 'www.info', 'www.baidu', 'search.aol', 'www.dogpile'];

var referrerHostname = document.referrer.split('/')[2];

var shortenedHostname = referrerHostname.substr(0, referrerHostname.lastIndexOf("."));

var indexOfSearchEngines = searchEngines.indexOf(shortenedHostname);

if (indexOfSearchEngines > -1){

return true;

} else {

return false;

}

#3. Referrer hostname

By default, Google Tag Manager offers a Full Referrer variable which includes not only a hostname (domain + subdomain) but also a page path (e.g. /contacts/thank-you.html).

If you wish to extract only a Hostname, there are two ways you can achieve that.

#3.1 Custom JavaScript variable

Just copy the code below and paste it to a Custom JavaScript Variable.

function() { 
  var referrerDomain = new URL(document.referrer).hostname; 
  return referrerDomain; 
}

function() {

var referrerDomain = new URL(document.referrer).hostname;

return referrerDomain;

}

#3.2 URL variable with Full Referrer as its source

The more I work with Google Tag Manager, the more I’m in love with URL variable. It’s really amazing and lets me easily parse parts of any URL. In GTM account, go to Variables, choose a type, URL, and enter the following settings:

This user-defined variable will take the value of Referrer as URL source and then remove everything except the hostname. If you wish, you can also remove the “www” part by ticking the checkbox under the Component Type dropdown.

#4. Pretty much anything with URL variable

I adore URL variable so much that feel no guilt of dedicating two chapters to it in this blog post, instead of one. Want more ideas how you can utilize it? Here you go:

Click Hostname (a.k.a. a domain (+subdomain) of a link that was clicked). Set the {{Click URL}} variable as the source and choose Hostname as Component Type.
Click Path (subfolders of a link which was clicked). Set the {{Click URL}} variable as the source and choose Path as the Component Type.
Utm_source, utm_medium, utm_campaign. I have explained how to extract them in this blog post.
And don’t limit yourself just to these examples!

#5. Meta Description and Meta Keywords

I borrowed this one from Dan Wilkerson. You can fetch page’s meta description and keywords every time a page is loaded. One example of how this can be used is to fire an event on every pageview that stores the meta description and the URL it was fired on; this can be helpful for tracking down duplicate or blank meta descriptions.

The code to fetch the Meta Description:

function() {
 var metas = document.getElementsByTagName('meta');
 for (var i = 0; i < metas.length; i++) {
 if (metas[i].name === 'description') {
 return metas[i].content;
 }
 }
 return 'None found';
}

function() {

var metas = document.getElementsByTagName('meta');

for (var i = 0; i < metas.length; i++) {

if (metas[i].name === 'description') {

return metas[i].content;

}

return 'None found';

}

Another code for Meta Keywords. Just copy any of these two codes and paste them to GTM as Custom JavaScript Variables (each code must be a separate variable).

function() {
 var metas = document.getElementsByTagName('meta');
 for (var i = 0; i < metas.length; i++) {
 if (metas[i].name === 'keywords') {
 return metas[i].content;
 }
 }
 return 'None found';
}

function() {

var metas = document.getElementsByTagName('meta');

for (var i = 0; i < metas.length; i++) {

if (metas[i].name === 'keywords') {

return metas[i].content;

}

return 'None found';

}

#6. Build your own JavaScript variables

Is there a text or number visible on a website that you wish to use as a variable (but you don’t know how to use DOM Element variable)? I have a solution for you, GTM Variable Builder Chrome Extension.

This useful plugin enables you to easily create Custom JavaScript variables which retrieve values of particular website elements.

How does it work? Open JavaScript console in Chrome, highlight any element on a website and click extension’s icon. What you’ll get is the JavaScript function that should be used in a GTM Custom JavaScript variable. Get this extension

You can find more useful Google Tag Manager Chrome Extensions in two of my blog posts:

Bonus: the previous page of the same website

As I’ve said before, some of these variables are super obvious to me. Yet, I still see (occasionally) people asking in forums how can they fire X tag when a visitor comes from Y page (of the same website). Actually, the solution is a built-in GTM feature!

All you need to is to use {{Referrer}} variable. When asked, almost everyone will say that Referrer shows the website from which a visitor landed on our site.

As a matter of fact, Referrer variable returns a page URL from which user navigated to the current page, regardless of whether it was an external website or the current one.

Final words regarding User-Defined Variables

This was the 2nd part of my “Awesome GTM Variables” series which introduces you to use custom and built-in variables found in the Google Tag Manager. I hope that eventually, the third installment will also see the daylight. In the meantime, feel free to check the 1st blog post as well (if you haven’t already).

Do you know any really useful user-defined variables? Don’t be greedy and share with others in the comments below. Or you can send me an email to julius [at] analyticsmania.com.

Julius Fedorovicius

In Google Tag Manager Tips

4 COMMENTS

Vanessa Suarez

Oct 10 2018
Reply

Hi Julius,
Do you have a workaround when the built-in GTM variable {{Referrer}} is coming up empty? Is there a JS variable that you use for this case?

Thanks!

Julius Fedorovicius

Oct 10 2018
Reply

Hey, there is no workaround. If a Referrer returns an empty value, this means that referrer is not available. If there are no UTM parameters (or some other data), such traffic is considered as (direct) traffic in Google Analytics.

Vanessa Suarez

Oct 10 2018
Reply

Bummer... I thought there would be a javascript to capture this information.
Thank you

Agata Adamiak

May 7 2019
Reply

Regarding the Referrer variable, I’ve written a related post about using it to set up different goals in GA: https://businessahead.co.uk/unique-urls-with-gtm-for-google-analytics-destination-goals/ You could use it if you have a thank you page that is a result of multiple possible user journeys. If you want to differentiate between different goals based on Referrer, you could follow this step-by-step tutorial.