How to extract part of the URL path with Google Tag Manager

Updated: May 6th, 2025

This blog post might sound similar to the one that I’ve recently published, How to extract a query parameter of the URL, but this time a bit different issue is solved. In that blog post, I was working with query parameters. For example, I was able to fetch the value of productId if the Page URL was https://www.example.com?productId=123.

But in today’s blog post, let’s imagine that we have a URL of the following structure: https://www.example.com/products/category_name/id, and we want to turn the category_name into a GTM variable (knowing that the category name is always in the 2nd subdirectory of the Page Path.

How can we achieve that? Let’s find out.

If you’re not sure what the subdirectory in the URL is, the scheme in this blog post shows it clearly.

Back to our example. In order to access the 2nd subdirectory of the URL, we would need to write a little Custom JavaScript. We’ll try to do that step-by-step so that it would be easier to understand for those who are just starting with JavaScript (disclaimer: I also belong to the group of people who are still starting with JS).

Youtube tutorial

If you prefer video content, here’s a tutorial from my Youtube channel.

Why would you need this?

Before we dive into the ‘how,’ let’s explore why you might need to isolate specific parts of a URL path using Google Tag Manager. Here are some common scenarios:

• Content Grouping in GA4: You might want to group content based on a directory in your URL (e.g., /blog/, /products/, /support/). Extracting this part of the path allows you to send it as a custom parameter to GA4 for more meaningful content analysis.
• Lookup Table Input: The extracted URL part can serve as an input for a Lookup Table variable in GTM, allowing you to map URL segments to more user-friendly names (e.g., /p/123/ becomes ‘Product Category A’).

Anonymous JavaScript Function

To extract part of the URL path, we’ll need to use a Custom JS variable. This versatile variable must include a script that meets two criteria:

• It must be an anonymous function, e.g.  function() { … }
• It must return some value

Without any hesitation, let’s open a text or code editor (or just the Custom JS editor in the GTM interface) and paste the following code:

function() {
  
}

It will not do anything (but this is just the start of our Custom JS variable).

Now, let’s create a JavaScript variable and name it pageUrl. Then, let’s assign a value to it, window.location.href:

function() {
  var pageUrl = window.location.href;
}

window.location.href is a way to access the current URL of the page where the user/visitor is. In the next step, let’s return that pageUrl but only a part of it. We can do that with the split() method, which splits a string (in this case, URL) into an array of substrings. If you’re new to this, we’ll take a closer look.

Add a return statement to the script (because every Custom JS variable in GTM must return something), then the name of the variable you want to return (pageUrl), and, finally, let’s add a split method.

function() {
  var pageUrl = window.location.href;
  return pageUrl.split();
}

But that’s not all. We need to tell the split() method how exactly we want to split the Page URL. If we go back to our example, we’re working with the https://www.example.com/products/category_name/id (p.s. if you’re trying to follow this along, you can work on some other page where the URL contains some subdirectories).

From that URL, we want to access the category_name. Since it is surrounded by slashes ( / ), which could be used as a delimiter (separator) in our split method, let’s add that slash (surrounded by quotation marks).

function() {
  var pageUrl = window.location.href;
  return pageUrl.split("/");
}

As a result, this will return an array (simply put, a list) of all the parts that are in the URL. Here’s a more visual explanation. Before using the split() method, the Page URL looked like this:

https://www.example.com/products/category_name/id

After using the method, the result visually would look like this:

As you can see above, the URL was split into a list of 6 items, starting with https and ending with the id. The second item in the list is empty (“”) because there was nothing between two slashes in https://.

We’re almost there. category_name has been separated from the URL, all we need to do now is to pick it from this array. This can be done by defining the index of that array member. In our case, that number is 4. If you wanted to fetch the 3rd level of the Page Path (the id), then you should have entered number 5.

Add it right after the split method (surrounded by square brackets):

function() {
  var pageUrl = window.location.href;
  return pageUrl.split("/")[4];
}

Done! By the way, if you want to learn much more about JavaScript for GTM (and how to write your own code), then take a look at this course.

Custom JavaScript variable

Now, let’s paste this code into a Custom JavaScript variable (in the GTM interface). You can name it whatever fits the naming convention of your container, e.g. cjs – 2nd subdirectory of the URL

Save the variable, enable the preview and debug mode and go to the page where you want to test this variable (make sure that the URL contains something in the Page Path (at least 2 levels, a.k.a. folders, a.k.a. subdirectories).

The expected result should look like this (of course, the value will be different in your case).

This can be applied to other URLs as well

Don’t limit yourself just to the Page URL. You can apply this to other addresses as well, for example, Click URL, Video URL, etc. You just need to assign another value to the pageUrl variable (in that Custom JavaScript). Here’s an example of how it would look if you wanted to access a certain part of the Clicked URL.

function() {
  var clickUrl= {{Click URL}};
  return clickUrl.split("/")[4];
}

Instead of the window.location.href, we used the Click URL variable of GTM container (just make sure that this built-in variable is enabled in your container). Then the script will take the Click URL, split it (with “/”) and then pick the item of which index if 4.

Keep in mind that the index in JavaScript starts with 0 (zero). Therefore, the 4th element is actually the 5th one.

Don’t limit yourself

There are countless use cases where the split() method is really valuable. Imagine that you have a Data Layer variable called {{dlv – productId}} that returns the product id of the following structure — productId-variantId (e.g. 123456-887766) and you want to use only the productId (without a variantId).

In that case, the Custom JS code would look like this:

function() {
  var productId = {{dlv - productId}};
  return productId.split("-")[0];
}

Explanation:

• I named the var (variable) in the code productId
• I assigned that var the value of the Data Layer variable {{dlv – productId}}
• I set the dash ( – ) as a delimiter (separator) because I want to split the product id right where that dash is (reminder: the initial id looks like this 123456-887766)
• When split() method created an array of two items (123456 and 887766). I chose the first one. In JavaScript, the index number of the first item is 0 (zero), not 1, hence I entered 0.

This variable will return the value of 123456 if the dlv – productId variable’s value is 123456-887766).

Extract part of the URL path with Google Tag Manager: Final words

So that’s about it for this fairly short blog post. The split() method is definitely really useful in such tasks when I need to parse a string (usually URL) and fetch a part of it (if the input value always follows the same structure).

If you have any edge cases you’d like to find a solution to, drop me a comment below. Such cases help me learn as well (since I’m still at the very beginning of my JS journey).