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.
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.