What is URL variable in Google Tag Manager?

Updated: March 26th, 2020. Have you ever been in a situation when 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 a 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 Google Tag Manager interface, go to Variables > User-defined Variables > New  and choose URL.

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.
• Query – returns the entire query parameter string (without leading ‘?’), if you don’t specify a query key. In my case I could specify 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. Page view) and open Variables tab. The result should look like this:

That’s it!

If you have questions related to this tutorial, feel free to ask in the comments. Who knows, maybe one day this quick tip will become a comprehensive guide thanks to your questions.

Want to extract part of the URL path?

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

Let me illustrate: the URL of page is www.example.com/products/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.