How To Remove Extra Trailing Slashes From URL's in Google Tag Manager

A while back, a situation arose where some URL’s had an extra trailing slash at the end of URL’s and I wanted to keep these page URL’s clean in Google Analytics.

Example: www.foo.com/folder/page-url//

I posted this in the GTM forum and Simo Ahava answered this [again]. Here’s the link to the thread: https://productforums.google.com/forum/#!topic/tag-manager/W-eyZ76dBAw;context-place=forum/tag-manager

In this blog post, I’ll be recreating this and explaining how the Custom JS works here. For the purpose of this demonstration, I’ll create a dummy constant variable called Foo URL with the value: https://www.foo.com/folder/page-url// . In reality, this would actually be your page variable type.

We then create a Custom JS variable that uses the constant as the variable value to replace.

function() { 
  return {{Foo URL - Constant}}.replace(/\/\/$/, '/');
}

Switch over to preview mode and you can now see that the Custom JS variable has the extra ‘/’ removed. Cool, it works! Let’s find out how it works.

How does the Custom JS work?
The JS uses the replace method to do the job. It’s str.replace. https://www.w3schools.com/jsref/jsref_replace.asp

string.replace(searchvalue, newvalue)

searchvalue: Required. The value, or regular expression, that will be replaced by the new value

So, you can say A, B to say A should become B or use regex to replace a part of searchvalue, replace it with newvalue. The syntax for regex in this method is that it should be within ‘/ string /’.

Example: var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/, "red");

In Simo’s formula, return {{Foo URL - Constant}}.replace(/\/\/$/, '/');

The string to use is the Foo URL - Constant.

.replace is the method.

(/\/\/$/, '/'); Explaining this bit per character in trying to replace // at the end:

First, the search value:

/ <- start regex

\ <- converts the following character to text as / is also a Regex char and we want JS to read it as text, no a special Regex char

/ <- The first slash at the end of the URL

$/ <- $ sign in Regex is used to express that it ends here. In our case, it would be that the pattern to check for is // AND it ends at //, not just any // that might occur earlier. Example: https:// ..this won’t be impacted by the Custom JS. See the screenshot for GTM Preview pane.

Now, the newvalue:

‘/’ <- This is the newvalue.

So, we’re telling GTM to find // in the variable at the end and replace it with just / at the end.
And that’s it for this post. Another round of thanks to Simo for helping GTM users.