How To Track Email Conversions in GA

Tracking Goals in Google Analytics is vital to tracking conversions and having a grasp on your performance over time. However, it’s important to remember that Goals can apply to so much more than simply a sale or page view. A client of ours measures a conversion as simply an email being sent to one of their specialists,  whose email details are displayed on relevant pages as the users browses around. Currently tracking and measuring these emails can only be carried out by cc-ing another email address each time an enquiry is sent. With the client’s service being of extremely high value, and an email being the first step to a sale, this primitive way of tracking in not sufficient.

A quick Google Analytics goal creation, followed by some Javascript reworking in your code means ten minutes work can ensure you’re tracking email conversions in a much more sophisticated way.

Step one:

Assuming Google Analytics is installed on your website, head over to the ‘Goals’ section and hit  ’Add Goal’

We’ll need a name that describes this Goal correctly for future reference and the Goal type must be set to ‘URL destination’.

In Goal Details we need to set the ‘Goal URL’. This is essentially a fake page simply in place for tracking, and can be anything you like as long as it remains the same in your JavaScript code (see below),  for now we’ll just stick with a variation on the Goal Name. Goal Value is optional and can be left blank, however if you can apply a Value to each email enquiry sent for yours or your client’s business – then stick it in here.

Step two:

With the Goal in place we need to apply some simple JavaScript to our email address html to ensure each email click is tracked. So where a typical email address might appear like this:

<a href=”mailto:johnsmith@email.com”>Email John Smith</a>

We need to apply some javascript so the code looks like this, ensuring the URL in the javascript code is exactly the same as the Goal URL set in Analytics:

<a href=”mailto:johnsmith@email.com” onClick=”javascript:pageTracker._trackPageview(’/mailto/email’);”>Email John Smith</a>

Ok, so now for the hard part – applying this code to every email address across your site. Our client literally has hundreds of different email addresses across the website and editing the html code for each of these manually would be a colossal waste of time. By putting our development hat on for a few mins and learning a little jquery, we can edit all these email addresses across the site in no time!

Sticking the following code into the header of each page ensures each anchor with a href that starts with ‘mailto:’  has the page tracking code appended to it:

$(document).ready(function() {
$(“a[href^='mailto:']“).each(function(){
pageTracker._trackPageview(’/mailto/email’);
});
});

Read more about the attributeStartsWith selector here.

Step Three:

Sit back and watch your email conversions being tracked!

 

Get blog posts via email

7 Comments!

  1. Steve Racicot

    I like this post. I have used this on several sites. However, I didn’ see mention of a few things.

    1. By using the _trackPageView it affects your Bounce Rate. This may be a good thing, depending upon what you are measuring.

    2. These PageViews also show up in the “Top Content” report. And this report shows “Unique Pageviews” and “Pageviews”. The Goal will match Unique Pageviews. So I guess it is important to note that the Goal is Unique Email Clicks, not total email clicks.

  2. It’s important to note that the jQuery code needs to be placed after the Google Analytics tracking code otherwise it throws a javascript error “pageTracker is not defined”

  3. Woops, actually, ignore that! I was testing on our localhost and had forgotten that I exclude the analytics code when there – the code will work in the header with the analytics code in the footer.

  4. Actually, there is a bug with this code. It should be:

    $(document).ready(function() { $(“a[href^='mailto:']“).each(function(){ $(this).attr(“onclick”,”pageTracker._trackPageview(‘/mailto.html’); “); }); });

    Otherwise it’s tracking thousands of pageviews in analytics on /mailto.html as your pagetracker code is loaded each time a link is parsed rather than clicked

  5. Scott Bowler

    and if you want to extend it further, you can do it do individual elements using css selectors, e.g.

    $(".sidebar a[href^='mailto:']").each(function(){
        $(this).attr("onclick","pageTracker._trackPageview('/mailto-sidebar.html');");
    });
    

    will add the onclick event to all mailto links contained within the div with the class of “sidebar”

  6. Allison

    We tested this on a page of a client’s site and it does not appear to be tracking any conversions. We just manually added the code onto the email link on the page, and confirmed that the GA Goal setup is correct and the Goal URL is identical in the setup as well as the code. Can you take a look at this page and tell me why it might not be working? http://www.destinationeuropeonline.com/

    Thanks!

  7. Gem Lee

    it doesn’t work. please help me

    i set up my goal

    and i put this between tag

          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-xxxxxxx-1']);
          _gaq.push(['_trackPageview']);
    
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
    

    $(document).ready(function() { $(“a[href^='mailto:']“).each(function(){ pageTracker._trackPageview(’/mailto/email’); }); });

    and i put the mailto link at section

    Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>