URL Variable in Google Tag Manager

Last Modified on October 20, 2023

The URL Variable in Google Tag Manager allows you to extract any component of a URL and reuse it in your GTM setup.

In this blog post, I will show you how to use this powerful feature in GTM.

🚨 Note: If you haven’t installed it already, check out our guide on how to install Google Tag Manager on WordPress.

  An overview of what we’ll cover:

• Why should you care about the URL variable in GTM?
• What does the URL variable do?
• How to extract part of the URL Path
• How to extract only specific subdirectory levels of the URL path
• Other useful GTM variables
• Bonus tip: URL Source Setting

So let’s dive in!

Why Should you Care About the URL Variable in GTM?

With the URL Variable, you can access all components of an URL that are either called up directly or returned by another variable. This can be helpful when extracting the path of a URL, but it’s also great when you need to extract query values that were added to an URL, such as campaign parameters. To demonstrate the power of the URL Variable, let’s consider the following example.

Say that you are running a newsletter campaign with an email automation tool, such as Mailchimp or ActiveCampaign. When users click on the links in your emails, UTM parameters are automatically appended to the URL, containing your campaign specifications. You want to extract those UTM parameters with the help of GTM.

🚨 Note: Check out our handy guide on ActiveCampaign tracking with GTM.

Let’s use the following URL as our example URL:

https://measureschool.com/resource/redirect-tracking-template/?utm_source=newsletter&utm_medium=email&utm_campaign=newsletter+4-28-2020#summary

What Does the URL Variable Do?

The URL Variable lets you define exactly which part of any given URL you want to extract. The only requirement is that you need a complete URL that contains both the protocol (https) and the host name (measureschool.com). To clarify, the URL Variable in GTM wouldn’t know how to handle the partial URL www.measureschool/resource because the protocol is missing.

The Components of a URL Explained

Before we dive into our example, let’s look at the individual components of a URL, using our example URL from above.

https:// – The beginning of a URL specifies the protocol that is used. On a website, this will usually be either http or https. Note that the URL Variable will exclude the “://”.

measureschool.com/ – the next part is the host name of the URL – the host name can include a leading www. or not. GTM lets you specify whether or not to extract the www. subdomain. Simply check Strip ‘www.‘ if you don’t want to extract it.

resource/redirect-tracking-template/ – The third part is the path, which describes the folders and page name that comes after the host name, but without any query or fragment that may follow.

?utm_source=newsletter&utm_medium=email&utm_campaign=newsletter+4-28-2020 – this is the query component of the URL, which can contain UTM variables (as in this example), search queries, click identifiers and other information that is passed onto a URL during the customer’s journey.

#summary – the last potential piece of a URL is called a fragment. Fragments always have a leading hash (#) symbol. They specify a location on the resource that the URL describes. You will probably know them as anchors in HTML.

All these URL components can be extracted with the URL Variable in GTM. You can additionally choose to extract the full URL or the port number used in the URL. When the URL points directly to documents, such as PDFs, you can also extract the filename extension (i.e. “pdf”).

How to Extract Part of the URL Path

If you want to extract any of the described components from the URL using the URL Variable, here’s how to do this in GTM.

First, we’ll need to create some variables. To create a new URL variable, first click on Variables in GTM, then New under User-Defined Variables.

Next, we’ll choose URL as the Variable Type in GTM.

In the Component Type dropdown menu, select which part of the URL you want to extract. In this example, we want to extract the Query, as this is where the UTM parameters are located:

The UTM parameters are called utm_source, utm_medium, and utm_campaign, so we need to create each of these Variables by entering their corresponding Query Keys in GTM. See below the configuration for utm_source:

utm_medium:

And utm_campaign:

In order to check that these are implemented correctly, simply turn on the preview and debug mode in GTM. Visit the website that is running your GTM code and add the query component of our example URL to the end of your website URL like this:

CODE: ?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 tab Variables. You can use the preview pane to double-check your variable configuration. You should see the UTM parameters tracked here:

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 2^nd 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 “2^nd URL subdirectory.” Our Custom JavaScript appears here, showing the category name as the value. 

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

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.

🚨 Note: Keep up with the changes in GTM – learn about server-side tagging in GTM and how it can be useful for your tracking deployment.

Have you been using the URL Variable already? Do you have any questions about it? Please let us know in the comments.