URL variable in Google Tag Manager
URLs may contain a lot of useful information that can be utilized in your GTM tag setup if properly extracted. Google Tag Manager has a separate URL variable type that helps you to easily extract almost any URL component and pass it as a dynamic value to other tags.
What data can you extract using the URL variable?
Let’s take a look at what we can extract using the URL variable and how it might be useful in different situations.
When you select URL variable type there will be an option to select a Component Type and URL source (under more settings).
Component types
Here you can select which part of the URL you are interested in. Let’s use a more complex hypothetical example to show all component possibilities below.
Example URL:
<strong>https://www.yourwebsite.com:8080/search?q=key&category=boots#header</strong>- Full URL
Will return full page location without fragments. So based on the example URL it will return.
https://www.yourwebsite.com/search?q=key&category=boots
I can see no specific use case for this since we can get the same value from the built-in Page URL variable.
- Protocol – Returns the protocol of the URL. In this example – https.
Could be useful if you want to monitor outbound (or internal) click URL protocols by passing those as a separate value together with a click event and changing the URL source to Click URL. - Host Name – Returns Hostname of URL, in this case, it would be www.yourwebsite.com
Optionally, you can also strip “www.” automatically by selecting the “Strip www” flag.
In this case, the variable would return yourwebsite.com
Could be useful if you want to strip “www” easily from your hostname, otherwise, for most cases, you can just use the “Page Hostname” built-in variable.
- Port – Port number that is used in the URL. In this case, it would be 8080.
If a port number is not part of the URL then it will return default values – 80 (HTTP) or 443 (HTTPS). You can read more about what is a port number if you haven’t seen that before.
Most likely you won’t use it ever as port numbers are rarely part of any production URLs.
- Path – Will return page path the same way as the “Page Path” built-in variable.
Example value will be /search
The added value of using the Path from URL variable is that you can easily remove unwanted non-directory elements from the variable. For example, you could clean the path from “index.html”, “index.aspx”, “index.php” and other useless path parts that you don’t want to pass to your tags.
- Filename extension – Extracts file extension from given link.
You could use it on link click events to determine file extension.
E.g. If you have a link yourwebsite.com/files/report.pdf it will return “pdf”.
If the link is yourwebsite.com/files/report.xls it will return “xls”.
This component will be useful only if you provide a Click URL or another URL source since GTM will not run when a visitor is on a PDF or other file URL.
- Query – Will extract provided query parameter value.
Our example URL has these query parameters – ?q=key&category=boots
E.g. If we provide “q” in the Query key and apply it to the example URL, it will return “key”.
If I add “category” as a Query string it will return “boots”.
Out of all component types, this is the most useful one since URLs often contain a couple of parameters that you might want to extract (you can fetch even UTM values there).
- Fragment – Extracts URL Fragment which is the value after “#” in your URL.
From my example URL, it would return “header”.
I have a separate post explaining how to extract URL fragment in GTM and use it in your triggers.
URL Source
When you are using the URL variable in Google Tag Manager it’s also possible to provide an alternative source for your URL. It will be useful when you want to extract URL parameters from clicked link URLs or on Single Page Apps where URLs are most likely provided through dataLayer variables and the URL in the browser window doesn’t change.
When you change the URL source, this variable will use provided value instead of the default Page URL that you see in the browser to extract any values.
Usage examples of URL variables in Google Tag Manager
Extract UTM parameters
In some cases, you might want to capture provided UTM parameters and pass them to another vendor or use them as a triggering condition for other tags.
- To extract UTM parameter values you can create a new User-defined URL variable.
- Select component type “Query”
- Enter query key “utm_campaign”
- Save the variable and repeat the process for “utm_source” and “utm_medium”. Additionally, you can add other UTM parameters if needed.
- Enable preview mode and give it a try by entering a website with UTM parameters.
E.g. yourwebsite.com?utm_source=test&utm_medium=test&utm_campaign=test - In the preview mode (Tag Assistant) you should see the values under the “Variables” section.
- And that’s it. Now all you have to do is to use this variable in another tag or a trigger.
Extract clicked URL file extension
In some cases, you might need to extract some values from clicked URL, so this example should show how easy it is.
- Create a new URL variable in GTM.
- Select component type “Filename extension”
- Since we want to extract that from clicked URL, select the “Click URL” variable from More Settings > URL Source.
- Save the variable and let’s test it out in the Preview mode
- In my example, I have this link on the website that I will click
- In Tag Assistant Preview mode find the Link click event in the events summary.
- And under variables tab, you should see the clicked file extension, which is my case was “pdf”
And that’s it! Now you can pass it to any tag or trigger that you want.
Alternatively, you can also select other component types, for example, if you are interested in clicked URL path or query parameters instead.
Summary
In this short overview, we have looked over all possibilities of URL variables in GTM and you should now have some understanding of the use cases where it might be useful. While you most likely won’t use Protocol or Port number components in your daily work, extracting URL queries might help you quite often.
