William Duffy

Glasgow Based C# ASP.NET Web Developer

Tracking Google Goals With No URL Using jQuery

Google Goals make it extremely easy to track successful interaction with your website by setting a goal based on the serving of a URL to the client. However, what if a goal is a user clicking on a mailto email link, or clicking download to receive a pdf of your brochure? Neither of these resources can run JavaScript to call Google Analytics and track the goal.

The solutions is to create a Google Goal with a fake url and manually call this on the user’s interaction with the element leading them to the resource. For example, if I wanted to track a user clicking the link <a href=”mailto:your@email.com”>Contact Me</a> to engage in dialogue, I would create a goal whose url is /G1/Email-Enquiry. If I also wanted to track a user clicking <a href=”/downloads/my-brochure.pdf”>Download My Brochure</a> to get more details, I would create a goal whose url is /G2/Brochure-Download. Neither of these urls exist.

To set up a goal go to your Google Analytics account > click Edit next to the profile you wish to add the Google Goal to > click Add Goal in the goals area.

Adding a Google Goal

IMPORTANT: Remember to include your Google Analytics tracking code on your page before continuing if you have not already done so! It must be placed at the top of your page above all manual calls to the Google API for everything to work.

Once your goals are setup you simply need to request your fake url when the user interacts with your goal. Fortunately _gaq.push() is already setup to easily handle this. _gaq.push() is the Google API method used to send tracking information to Google Analytics, it will normally look like the following.

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2305701-34']);
_gaq.push(['_trackPageview']);

With this method available we can easily track user interaction on an element by passing our custom goal urls in an onclick event handler. See the following demonstration as an example.

 
   <a href="mailto:your@email.com" onclick="_gaq.push(['_trackPageview', '/G1/Email-Enquiry']);">Contact Me</a>
 
   <a href="/downloads/my-brochure.pdf" onclick="_gaq.push(['_trackPageview', '/G2/Brochure-Download']);">Download My Brochure</a>

Everything should be working great at this point. However, this implementation can become difficult to maintain/scale when multiple interactions are regarded as the same goal. For example, if you have tens, hundreds, even thousands of those links scattered throughout your site you will need to manually attach the Google Goal to every one of them.

To work around this manual process we can use jQuery selectors to assess the dom when the page is ready, attaching the call to Google Analytics on each element’s click event. The selectors below find all a elements whose href attribute contains the specified value.

<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script> // Download your copy at jQuery.com
<script type="text/javascript">
    $(function() { // Set Google Goals
        $("a[href*=your@email.com]").click(function(){_gaq.push(['_trackPageview', '/G1/Email-Enquiry']);});
        $("a[href*=my-brochure.pdf]").click(function(){_gaq.push(['_trackPageview', '/G2/Brochure-Download']);});
    });
</script>

If you have different requirements for your selectors or for more information on jQuery selectors check out the jQuery documentation.


Tagged as , , , , , + Categorized as jQuery

2 Comments

  1. As always coming up trumps with a good example. I help maintain a large blog and yes I had to do something similar by manually putting in each event. But doing that above I could script it across ALL links dead easy.

    Sufficed to say…this is getting “borrowed”.

  2. Really useful, thanks. I’m now tracking all my affiliate clicks with your code.

Leave a Reply