If you are like me, you probably use UTM parameters to find your best converting traffic sources in Google Analytics. The campaign/source/medium combo tells you what marketing efforts are working.

Very useful. But we can do more.

Let’s say you have an email signup form on your blog or a landing page. Visitors come from all over the interwebs clicking on your UTM tagged URLs. Some of them signup with their email address. Google Analytics tells you how many converted (if you have goals setup), but not who converted. Your email marketing tool tells you who converted, but not where they came from. There’s a surprisingly simple way to find out where each subscriber came from.

UTM parameters? What?

If you don’t know what UTM parameters are, there are a lot of very good articles on the web about them. These experts have done an exceptional job in explaining why to use UTM parameters and how to use them. I cannot explain it any better.

Let’s get started.

1. Configure your email marketing service provider

I am going to use Mailchimp as an example, but you can do something very similar in other email marketing service providers.

Mailchimp Add UTM parameters

Add UTM Parameters to Mailchimp

  1. Go to your subscribers list. Select List fields and *|MERGE|* tags from Settings.
  2. Click Add A Field, select text. Add “UTM_SOURCE” for Field Label and “USOURCE” for Put this tag in your content. Leave the Required? checkbox unchecked.
  3. Repeat the same for each of the remaining UTM parameters. i.e. UMEDIUM, UCAMPAIGN, UCONTENT, UTERM
  4. Click Save

You might be wondering why did I use “USOURCE” instead of “UTM_SOURCE” for the tag field. It’s because Mailchimp has a 10 character limit on the tags. I’m not sure why.

Now you are done with the Mailchimp setup part. Let’s head over to your website.

2. Website setup

Since your exact website setup might be different, I am going to assume a few things.

  • There’s only one form (the email signup) on your landing page.
  • If there is more than one form, the first one will be used.

A very common approach is to have the email signup form embedded in the landing page. e.g. Terminus landing page has the following email signup code as of writing this blog post.

<div id="mc_embed_signup">
  <form action="http://terminusapp.us6.list-manage.com/subscribe/post?u=4dbf&amp;id=7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank">
  <input type="email" value="" name="EMAIL" class="email span4" id="mce-EMAIL" placeholder="Email address">
  <input type="submit" value="Get Notified" name="subscribe" id="mc-embedded-subscribe" class="btn btn-large btn-success">
   <h5><small>We will never spam you. Unsubscribe anytime.</small></h5>
  </form>
</div>

Before you proceed, make sure you have jQuery (you most likely do) on your website. If you don’t, simply add this line before the closing head tag i.e. </head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

When a visitor comes to a landing page with UTM parameters in the URL, we need to capture those and add them to the signup form. That’s where the ugly Javascript helps.

<script type="text/javascript" charset="utf-8">
  function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.search);
    if(results == null) {
      return "";
    } else {
      return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
  }

  $(document).ready(function () {
    function addFormElem(paramName, fieldName) {
      var paramValue = getParameterByName(paramName);
      var $utmEl = $("<input type='hidden' name='" + fieldName + "' value='" + paramValue + "'>");
      if (paramValue != "") {
        $("form").first().prepend($utmEl);
      }
    }

    // Note: Only change the values after ":" if they are different for you
    // They are the same one as you added in your email marketing provider
    var utmParams = {
      "utm_source"   : "USOURCE",
      "utm_medium"   : "UMEDIUM",
      "utm_campaign" : "UCAMPAIGN",
      "utm_content"  : "UCONTENT",
      "utm_term"     : "UTERM"
    };

    for (var param in utmParams) {
      addFormElem(param, utmParams[param]);
    }
  });
</script>

Copy the above code and add it before the closing body tag i.e. </body>. This script will add the UTM parameters to any form as long as it is the first form on the page. It doesn’t have to be from Mailchimp or other similar provider.

3. Now what?

So what do you really get after doing all this?

You get to see the details for each subscriber

Now when you look at the detailed view of each new subscriber, you can see the UTM parameters.

Mailchimp UTM Details

Mailchimp UTM Details

You get to segment based on the Campaign/Medium/Source

You can now send emails to people who came from a particular source e.g. Guest blog post.

Mailchimp UTM segments

Mailchimp UTM segments

Here are couple of ideas for email segments, but I am sure your mind is bubbling with new ones already:

  • Send a targeted email to people who came from Twitter asking them to follow you.
  • Offer a discount to people coming from a partner website. Maybe you have an offer for them they cannot refuse.

In short, you don’t need to pay for expensive marketing platforms to get this segmenting feature.

Thank you, giants

  • I did not come up with this idea of capturing UTM parameters. I learned this from my friend and marketing guru, Roger Kondrat (@meetroger). Hi Roger.
  • The above javascript uses some code shared by awesome developers on Stackoverflow. They complete me.

Wrap up

  • Don’t let your UTM parameters go to waste. Make them do more work for you.
  • If you have any problem with the setup, please ask me and I will do my best to help you out. Either leave a comment or email me at puru@terminusapp.com

If you want to consistently build URLs with accurate UTM parameters, signup for early access at www.terminusapp.com.

  • http://www.rogerkondrat.com/ Roger Kondrat

    That’s a great article Puru! I seriously doubt I had that much impact, but I really really appreciate your mentioning me.

  • kyuumeitai

    Thank you. This was very helpful.

    • http://term.li/1eFEesN Puru Choudhary

      You are welcome. I am glad you found it useful.

  • Sikandar Shukla

    Thanks for this, very helpful. Do you have any ideas/pointers for capturing the source/medium on pages that do not directly have the utm tags in their URL?

    I.e links that are clicked on after the user has already navigated to the URL with the UTM tags?

    • http://term.li/1eFEesN Puru Choudhary

      Hi Sikandar,

      I actually was working on a blog post to cover that part, but it went on the backburner due to other stuff. I’ll definitely try to get to it.

      If you are so inclined you can parse the cookie “__utmz” that Google Analytics drops (assuming you have Google Analytics) and add the fields to the form. It might involve a bit of trial and error, but it should not be too complicated. Then your form will see the visitors the same way Google Analytics sees it.

      Sorry that I don’t have more specific answer right now. I did write some Javascript code that replaces the one in this post. You can shoot me an email at puru@terminusapp.com and I will send it to you. You might need to test it bit to make sure it works for you.

    • http://term.li/1eFEesN Puru Choudhary

      You can find the script I mentioned earlier here: https://gist.github.com/medius/8856352

  • amir

    hi Puru, I am trying to carry forward the utm_medium to another link that leaves my site. Any idea on how to accomplish this?
    thanks

    • http://term.li/1eFEesN Puru Choudhary

      Hi Amir,

      It can definitely be done with some Javascript. If you are comfortable with it, you can capture the utm_medium in a cookie if it is present in the URL. You can then add it to the target URL when any one clicks on the link.

      Sorry, if it’s not super helpful. To be honest, I have never felt the need to do something like this and therefore don’t have a code handy.