I Bet You Haven’t Used UTM Parameters Like This

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.

Though it may be very useful, we can do much more.

Let’s say you have an email signup form on your blog or a landing page. Visitors come from all over the internet 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. On the other hand, 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.

What are UTM Parameters? 

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 and how to use UTM parameters.

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. Setup Your Website

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 another 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 the details 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 a 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.

Wrapping 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

Bonus: How to Build and Manage UTM URLs?

Capturing UTM parameters in your lead forms is only one small part of your tracking.

Building and managing your UTM URLs is a whole other ball game. If you are serious about your UTM strategy, you need good tools for yourself and your team.

I’m biased, but Terminus UTM URL Builder is built for robust UTM tracking. Helping you make your UTM conventions part of your URL builder is just one such feature.

UTM Naming Conventions

If you haven’t already, signup for a free 21-day trial and see it for yourself. There are zero risks. Cancel anytime.