Google Tag Manager’s URL Variable lets you pull out different parts of a URL and use them in your GTM setup. Whether it’s the page URL, hostname, path, query parameters, or fragment identifiers, you can use these components to track specific data. This is super helpful for monitoring user behaviour. By setting up tags, triggers, and variables based on URLs or their parameters, you get a clearer picture of how people interact with your site, helping you make smart optimisations.
Using Google Tag Manager gets even more powerful when you start working with URL Variables. It allows you to gather important details, like page URLs, hostnames, or query parameters, and use that info to improve your tracking. You can dive deeper into user behaviour by setting up custom tags, triggers, and variables, all based on what’s happening in specific URLs. Kickstart Digital is here to help you make the most of this tool, so you can boost your website’s performance. You’ll also be able to track your marketing campaigns better and make smarter, data-based decisions for your business.
This guide from Kickstart Digital will walk you through how to use this handy feature in GTM. Here’s a look at what we’ll cover:
- How URL Variables can help your marketing
- How to set up and use the URL Variable in GTM
- How to extract specific parts of the URL path
- How to target specific subdirectories in the URL
- Other useful GTM variables for tracking
Bonus Tip: URL Source Configuration
How URL Variables can help your marketing?
The URL Variable lets you access different parts of a URL, whether they’re directly visible or provided by another variable. This is useful for getting the URL path, but it’s especially handy when you need to pull out query values like campaign parameters that are added to the URL. Let’s take a closer look at how the URL Variable works with a real-world example.
Imagine you’re running a newsletter campaign using an email marketing tool like Mailchimp or ActiveCampaign. When people click the links in your emails, UTM parameters are added to the URL to show campaign details. You want to use GTM to extract these UTM parameters.
How to set up and use the URL Variable in GTM?
The URL Variable lets you choose exactly which part of a URL you want to extract. The only requirement is that you need a full URL, including the protocol (like https) and the host name (such as kickstartdigital.co.nz). If the URL is incomplete, like www.kickstartdigital.co.nz/services/seo, GTM won’t be able to handle it because it’s missing the protocol.
Breaking Down the Components of a URL
Before diving into our example, let’s break down the parts of a URL. We’ll use the following as an example:
- https:// – This part tells the browser what protocol to use. Websites usually use either http or https. The URL Variable won’t include the “://” part.
- kickstartdigital.co.nz/services/seo – This is the host name and path. The host name can include “www.” or not. In GTM, you can decide whether you want to remove the “www.” by selecting the option to strip it.
- ?utm_source=newsletter&utm_medium=email&utm_campaign=newsletter+4-28-2020 – This section is called the query, which can include UTM parameters, search queries, or other details added to the URL during a user’s visit.
- #summary – This is the fragment, starting with a “#”. It points to a specific part of the page or resource, often called an anchor in HTML.
You can extract all these components with the URL Variable in GTM. You can also choose to pull the full URL or the port number. If the URL leads to documents like PDFs, you can even extract the file extension, such as “pdf.”
How to Extract Specific Parts of the URL Path
If you want to pull specific components from the URL using the URL Variable, here’s how to do it in GTM.
First, you’ll need to create some variables. Start by going to Variables in GTM, then click New under User-Defined Variables.
[Screenshot of Google Tag Manager showing the variable overview screen]
Next, choose URL as the Variable Type.
[Screenshot of Google Tag Manager showing the variable configuration screen]
In the Component Type dropdown menu, pick the part of the URL you want to extract. For this example, we’ll extract the Query, where the UTM parameters are located:
[Screenshot of Google Tag Manager showing the Component Type dropdown in the Variable Configuration]
The UTM parameters we’re looking for are utm_source, utm_medium, and utm_campaign, so we’ll create a variable for each one by entering their corresponding Query Keys in GTM. Here’s how to set up utm_source:
[Screenshot of Google Tag Manager showing the Query Key field with utm_source in the Variable Configuration]
And for utm_medium:
[Screenshot of Google Tag Manager showing the Query Key field with utm_medium in the Variable Configuration]
Finally, for utm_campaign:
[Screenshot of Google Tag Manager showing the Query Key field with utm_campaign in the Variable Configuration]
To make sure everything is set up correctly, turn on Preview and Debug mode in GTM. Visit your website (the one running your GTM code) and add the query part of the example URL to the end of your site URL, like this:
?utm_source=newsletter&utm_medium=email&utm_campaign=newsletter+4-28-2020#summary
(If your URL already has a query, use & instead of the leading ?).
In the GTM preview pane, click on Page View and then the Variables tab. Use the preview pane to double-check your variable configuration. You should see the UTM parameters tracked here:
[Screenshot of Google Tag Manager preview pane with UTM variables shown]
And that’s it! Now you can reuse these extracted variables in other tags and variables within your GTM setup.
How to Extract only Specific Subdirectory Levels of the URL path
You can follow the pattern above to extract other parts of your URL. However, there is one shortcoming of the URL Variable: When it comes to the URL path, you can only extract the entire path and not just a specific part of it. When you are running a blog with different categories and you want to extract just the category name of the URL, this could be an obstacle.
Fortunately, there is a solution. In order to extract just the category name of your blog’s URL (assuming the category name always appears in the same subdirectory level), you need to apply a custom JavaScript.
We won’t go into all the details of the following script, but it basically breaks down the entire URL into a list of its components, including each website directory as an individual entry. These are the steps you need to take:
Go to Variables → New, then click on Custom JavaScript and enter this code:
function() {
var pageUrl = window.location.href;
return pageUrl.split(“/”)[X];
}
In this code, X specifies the level of the subdirectory that you want to extract. You may need to test this on your website, but the 2nd level subdirectory should be extracted when you insert 3 instead of X.
Again, check the implementation by enabling the preview and loading the page with your GTM code. Then click on Page View and click on the Variables tab. In this example, we’ve called the variable “2nd URL subdirectory.” Our Custom JavaScript appears here, showing the category name as the value.
Screenshot of Google Tag Manager preview pane with a Custom JavaScript variable shown.
And that’s all you need to do. Using this method, you can extract any directory level from a full URL.
Other Useful GTM Variables
If you liked this tutorial on the URL Variable in the GTM, you may want to look at the Top 10 Variables for Google Tag Manager, which includes favorites like the DataLayer Variable, Constant Variable, and GA Settings Variable.
Bonus tip: URL Source Setting
The URL Source setting in the URL variable type allows you to parse any URL string for its components.
This is especially useful when you want to extract URL parameters from clicked link URLs or in Single Page Apps where URLs are provided through dataLayer variables and the URL in the browser window doesn’t change.
A properly formatted URL should have at least the protocol and hostname for parsing to work.
FAQ
How do I extract parts of the URL using the URL Variable in GTM?
To extract parts of the URL using the URL Variable in GTM, you need to create a new URL variable in GTM and specify the component type you want to extract, such as the query, path, or fragment. You can configure the variable to extract specific values, such as UTM parameters, by defining the corresponding query keys.
How can I test my URL Variable configuration in GTM?
To test your URL Variable configuration in GTM, you can enable the preview and debug mode in GTM, visit the website with the GTM code, and add the relevant URL components to the end of the website URL. In the GTM preview pane, you can check the extracted values in the Variables tab and verify if they match your expectations.
Can I extract specific subdirectory levels from the URL path using the URL Variable?
The URL Variable itself doesn’t provide a direct way to extract specific subdirectory levels from the URL path. However, you can achieve this by using a custom JavaScript variable in GTM. The JavaScript code splits the URL path into components and allows you to extract a specific subdirectory level based on your requirements.
Summary
The URL Variable in GTM lets you extract any component of a given URL: from the protocol to host name, the URL path and queries and fragments appended to the URL.
In order to extract only specific parts of the URL path, you need the help of a little JavaScript, but all other components can be extracted using the built-in settings in GTM. You can then reuse the extracted variables in your GTM in other tags and variables.
