What is URL variable in Google Tag Manager?

Updated: October 17th, 2022

Have you ever been in a situation where you need to extract a part of the URL and turn it into a variable in Google Tag Manager? I have. The most common demand is to transfer so-called query string parameters to GTM.

For example, I have a web address https://www.example.com/?product_id=123&category=shoes. Believe it or not, but there’s a very easy way to turn product_id and category data into variables. I’ll show you how.

The magic lies within a user-defined variable called URL. In the Google Tag Manager interface, go to Variables > User-defined Variables > New and choose URL.

 

Video tutorial

Do you prefer video content to text? If yes, then take a look at the video below. But keep in mind that the blog post is more in-depth.

P.S. this tutorial was recorded some time ago (when GTM preview mode looked different). But if you get used to that difference, the remaining parts of the video are still valid.

 

What does the URL variable do?

The URL Variable can be used to access components of the current page URL. This is a very versatile Variable type and is especially useful for picking query parameters and hash fragments in your URLs. Note: There are Built-In Google Tag Manager Variables for some situations (i.e. Page URL, Page Hostname, Page Path).

Let’s say the address of the web page that I am currently on is https://www.example.com/welcome:8080?gclid=aabbcc123#home.

Now, I will describe every component type that is available in the URL variable:

• Full URL – returns the full URL without the hash fragment, e.g. https://www.example.com/welcome?gclid=aabbcc123.
• Protocol – returns the protocol of the URL, e.g. https.
• Host Name – returns the hostname of the URL without the port number, e.g. www.example.com. You can choose to Strip ‘www.’ to strip the ‘www’ subdomain from the hostname.
• Port – returns the port number used in the URL. In my example, the variable will return the 8080 value. Or 80 for HTTP / 443 for HTTPS, if the URL had no port number.
• Path – returns only the pathname in the URL (in other words – everything after the hostname, except port, fragment, and query). In my example, I would get /welcome/ value. You can also specify Default Pages to strip pages with names like ‘index.html’ or ‘index.php’ from the return string.
• Filename extension – if a URL looks like this https://www.yourwebsite.com/download/filename.pdf, the Filename extension will return the value “pdf”. This might be useful if you want to get the filename extension of a clicked link.
• Query – returns the entire query parameter string (without leading ‘?’), if you don’t specify a query key. In my case, I could specify the query key to gclid. Thus URL variable’s value would be aabbcc123. If you do specify a query key, but that key is absent, the variable’s value would be undefined.
• Fragment – returns the value of the URL’s fragment without the leading ‘#’, in my case value would be home.
• You can expand the More Settings tab to find a source selector. In this selector, you can choose the Variable whose return value the URL Variable will access.

URL variable in action

Here’s a quick example I came up with.

If you’re using an email marketing tool, you’ve probably already noticed that after a recipient clicks a link in your email, he/she is redirected to your website. The link contains a lot of parameters after a question mark, e.g. https://www.mybusiness.com/?utm_campaign=awesomecampaign&utm_source=campaignid&utm_medium=email.

These 3 query keys are called UTM parameters. They are especially useful when it comes to tracking campaigns in Google Analytics.

You can easily turn utm_campaign, utm_source, and utm_medium into GTM variables and then utilize them in triggers or tags. Just create three variables with the following settings:

After you have created these three variables, enable Preview and Debug mode in GTM and head to the website where you’re working on. At the end of URL add ?utm_medium=test1&utm_source=test2&utm_campaign=test3. If the URL you’re working on already has some query (it starts with a question mark), then just add &utm_medium=test1&utm_source=test2&utm_campaign=test3 to the end of the link and hit enter.

The page will refresh, GTM Preview and Debug console will load. Click on any event (e.g. Container Loaded) and open the Variables tab. The result should look like this:

That’s it!

If you want to take a look at some use cases where this variable is useful, take a look at these guides:

• Extract part of the URL
• Transfer UTM parameters from one domain to another

 

Want to extract part of the URL path?

Even though the URL Variable in Google Tag Manager is awesome, it still lacks some features. For example, you cannot extract the part of the URL path.

Let me illustrate: the URL of the page is www.example.com/category/shoes/nike-lorem-ipsum. What if you wanted to use the value of the category (in this case, it’s “shoes”) in your tags?

While this is currently not possible with the URL variable, you can do this with a Custom JavaScript variable.

 

Conclusion

In this blog post, I have described a pretty easy way how to extract a section of URL and turn it into a variable that can be reused in other tags and variables. Do not hesitate and start utilizing the URL variable in your web analytics today.