Remove UTM Parameters from URLs

By  on  

If you've ever worked on a social media campaign, you're probably familiar with the UTM tracking pieces of a URL which allow you to tie visits and pageviews with a given campaign.  They're a marketing person's dream but ugly for end users to look at.  And if you don't want your statistics being muddle up with users bookmarking or sharing the link, you're out of luck.  That is, unless you use the History API to prevent that problem:

(function() {
    var win = window;
    var removeUtms = function(){
        var location = win.location;
        if (location.search.indexOf('utm_') != -1 && history.replaceState) {
            history.replaceState({}, '', window.location.toString().replace(/(\&|\?)utm([_a-z0-9=]+)/g, ""));
        }
    };
    ga('send', 'pageview', { 'hitCallback': removeUtms });
})();

First track the event, then remove the ugly UTM parameters and you're golden.  It's a tiny bit of code for a tiny bit of gloss.  Just remember to track the pageview before removing the UTM parameters!

Thank you to Luke Crouch for pointing out this technique!

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.

  • By
    Implement jQuery&#8217;s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

Discussion

  1. That example is a little aggressive and possibly inaccurate. If you have params like utm_campaign it won’t work, and if you have other query-string params they’ll get lost.

    • Good call. I cut off the = but it could be more specific — I’ll look at that.

      BTW nice blog post today…

  2. This solution is good for users perspective but not for search engines perspective. Search engines can still see then UTM parameter. For search engines http://domain.com/?utm=xxx and http://domain.com/ are two different URLs. Therefore they will have different PR.

    The best solution would be use 301 permanent redirect to redirect users from http://domain.com/?utm=xxx to http://domain.com/. This will remove the UTM parameters and will have no negative impact on SEO. I rely on Google URL shortener for this.

    If you want to remove UTM parameters only for users perspective then this would be a good solution.

    • As far as I can tell, Google knows that their own utm_* parameters don’t count as a unique URL. I’ve never seen a duplicate result in Google from using them.

      I can’t find any duplicate results from utm_* params in Bing, either.

      I have to imagine that all the major search engines know how to deduplicate or ignore parameters from the major metrics platforms, especially Google Analytics.

    • You don’t see duplicate becz Google uses hash on source code to filter duplicate webpages. But PR is obviously distributed which is very negative SEO impact.

  3. If you use a regex you can remove all utm words in an url and you can do it in one line, look this code:

    var url = "http://domain.com?lala=lala&utm=test&utm_source=teszt&utm_lala=lala&bibi=bibi";
    url.replace(/(\&)utm([_a-z0-9=]+)/g, "")
    
    • I’ve updated my post to use this instead — great job Caio!

  4. Before of analytics tools using the utm_ parameters in URL to send data back, such as Mixpanel. If you are going to remove the params, make sure Mixpanel is loaded first (its callback executed, as in the “loaded” function of the Mixpanel object config). Also other tools such as KISSMetrics use this technique I believe.

    My two cents.

  5. Chris

    How does this snippet work when I’m using Google Analytics by Yoast, plugin for wordpress?

    Will this cause issues?

  6. You should use a case-insensitive match for the parameter, otherwise uppercase campaign names etc. would not be removed. I’ve also improved the regex to remove “utm_” parameter if it’s the first item in the query string (no leading & but ?). It will retain the ampersand for each query item but that should still work from a browser’s perspective.

    url.replace(/([&?])utm([_a-z0-9=]+)/ig, "$1")
  7. Used a slightly updated version of the regex :

    /(\&|\?)utm([_a-z0-9=]+)/
    

    to take into account the case where the first query parameter is a utm parameter.

  8. Franco

    Hello!

    Unfortunately none of regex helps in case of a few words in utm_keywords=Keyword1+word2+word3 parameter. It would be nice it somebody could offer a solution.
    Thanks!

  9. Franco

    It seems that I figured it our by myself how to be in case of utm_keywords=Keyword1+word2+word3:

    url.replace(/(\&|\?)utm([_a-z0-9=+]+)/ig, "")
    
  10. I found the article (an alternative way) that shows how to hide Google Analytics UTM parameters using Google Tag Manager: https://holini.com/hide-utm-parameters/

    Is seems a good solution.

  11. there are sometimes dashes in the utm content you should add \-
    Also when the first argument is an utm_ the ? sign is removed and url is not valid anymore
    with this two replacements it works ok

    url = url.replace(/(\&|\?)utm([_a-z0-9=+\-]+)/igm, "$1");
            url = url.replace(/(\?)\&+/igm, "$1");
    
  12. Yves

    Unfortunately, the comments don’t have timestamps, so I have to consider them all outdated.

    Your code is for the older tracking library. How would it look in the current version of the tracking library that is used for new projects today (Feb 2019)?

  13. Thomas

    Using a perfect regex is hard, but there are native solution to manage the “SearchParams” object of the “URL”.

    Otherwise you can use a library like:
    https://github.com/sneko/utm-synapse

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!