Tracking mailto, anchors and external links with Google Analytics

« How to authorize Local System Account for OpenSSH

KnockoutJS Binding Handler: autosizing input fields »

Tracking mailto, anchors and external links with Google Analytics

June 2, 2012 by Lars Corneliussen

With this simple snippet, all clicks on page-internal anchors, external links (http…) and mailto-links are tracked as events in Google Analytics:

$(function(){
    $("a[href*='http']").each(function() {
                    $(this).click(function (ev) {
                        var pageView = '/outgoing/' + $(this).attr('href');
                        _gat._getTrackerByName()._trackEvent('Outbound Links', pageView);
                        var _href = $(this).attr('href');
                        setTimeout(function() {
                            location.href = _href;
                        }, 100);
                        ev.preventDefault();
                        return false;
                    });
        });
      $("a[href*='mailto']").each(function() {
                    $(this).click(function (ev) {
                        var pageView = '/mailto/' + $(this).attr('href').substring(7);
                        _gat._getTrackerByName()._trackEvent('Mailto', pageView);
                    });
        });
      $("a[href*='#']").each(function() {
                    $(this).click(function (ev) {
                        var pageView = '/anchor/' + $(this).attr('href').substring(1);
                        _gat._getTrackerByName()._trackEvent('Anchors', pageView);
                    });
        });
});

About these ads

Posted in Code | Tagged googleanalytics, javascript, jQuery, tracking | 23 Comments

23 Responses

on June 27, 2012 at 5:16 | Reply miqcie

This is great! Thanks for putting this snippet together. I’ve been searching forever for something. May I copy/paste or will I need to customize it before dropping it in?
- on June 27, 2012 at 9:12 | Reply Lars Corneliussen
  
  Just copy-paste it!
on July 12, 2012 at 4:54 | Reply Sean Wigglesworth

To clairify, I would paste this below the already established (function({ code before the script end code? Or am I replacing the (function({ code entirely? I’m new to the world of analytics and don’t want to break my tracker (even though it isn’t currently tracking all those things you’ve listed yet)
- on July 12, 2012 at 6:08 | Reply Lars Corneliussen
  
  paste it to the end of the script tag. do not replace any code.
on August 8, 2012 at 15:55 | Reply Hubert

Dear Lars,

I placed it in the section, at the bottom of the GA Asynchonous tag, just before the .
However it does not seem to work.
What am I doing wrong?

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-123456-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);
})();

$(function(){
$(“a[href*='http']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/outgoing/’ + $(this).attr(‘href’);
_gat._getTrackerByName()._trackEvent(‘Outbound Links’, pageView);
var _href = $(this).attr(‘href’);
setTimeout(function() {
location.href = _href;
}, 100);
ev.preventDefault();
return false;
});
});
$(“a[href*='mailto']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/mailto/’ + $(this).attr(‘href’).substring(7);
_gat._getTrackerByName()._trackEvent(‘Mailto’, pageView);
});
});
$(“a[href*='#']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/anchor/’ + $(this).attr(‘href’).substring(1);
_gat._getTrackerByName()._trackEvent(‘Anchors’, pageView);
});
});
});
- on August 27, 2012 at 7:37 | Reply Lars Corneliussen
  
  How does it not work? Error? Just not showing up anything in GA?
  - on August 27, 2012 at 17:38 Hubert
    
    It’s not showup up anything in GA
  - on August 28, 2012 at 15:59 Lars Corneliussen
    
    It usually takes some hours til a day. Have you tracked the requests with firebird? It should issue requests against ga..
on August 28, 2012 at 15:24 | Reply VA

Hi Lars:

Thank you for this. I have been wanting something like this for years. I have a wordpress site and my theme has seo and integration options that add code to the body of every page. The theme developers had indicated that this is the section for analytics code, which I installed and analytics works perfectly. I just added your snippet in the following manner and was hoping that you would be able to confirm that it is done correctly?

Thanks again

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-880302-1']);
_gaq.push(['_setCustomVar', 1, 'internal', 'Yes', 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);
})();

$(function(){
$(“a[href*='http']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/outgoing/’ + $(this).attr(‘href’);
_gat._getTrackerByName()._trackEvent(‘Outbound Links’, pageView);
var _href = $(this).attr(‘href’);
setTimeout(function() {
location.href = _href;
}, 100);
ev.preventDefault();
return false;
});
});
$(“a[href*='mailto']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/mailto/’ + $(this).attr(‘href’).substring(7);
_gat._getTrackerByName()._trackEvent(‘Mailto’, pageView);
});
});
$(“a[href*='#']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/anchor/’ + $(this).attr(‘href’).substring(1);
_gat._getTrackerByName()._trackEvent(‘Anchors’, pageView);
});
});
});
on August 28, 2012 at 15:41 | Reply VA

Sorry – I forgot to ask how to set up goal details in analytics. I think I just set the goal label to “Mailto” in the goal details?

Thanks again!
on August 28, 2012 at 15:55 | Reply VA

Correction – I think that I just set up the goal “category” as “Mailto” for the mailto event, etc..?

Sorry – I don’t mean to ask a million questions…
- on August 28, 2012 at 15:59 | Reply Lars Corneliussen
  
  In order to see stuff in GA you do not have to set up goals. Things will be under Content/Events…
on August 28, 2012 at 16:04 | Reply VA

Got it! – Thanks!
on October 28, 2012 at 8:42 | Reply Volodymyr Orlenko

Thank you Lars, for a simple and effective solution. You’re the man! If you’re ever in Vancouver, BC, I’ll buy you a beer.
on December 12, 2012 at 16:10 | Reply Stephen

I have added your code like this, but i don’t know why it is not working in my website. Can you please look in to it and please suggest me if anything wrong with the code.

My Code
—————-

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34831893-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);
})();

Added your code from here…
—————————————
$(function(){
$(“a[href*='http']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/outgoing/’ + $(this).attr(‘href’);
_gat._getTrackerByName()._trackEvent(‘Outbound Links’, pageView);
var _href = $(this).attr(‘href’);
setTimeout(function() {
location.href = _href;
}, 100);
ev.preventDefault();
return false;
});
});
$(“a[href*='mailto']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/mailto/’ + $(this).attr(‘href’).substring(7);
_gat._getTrackerByName()._trackEvent(‘Mailto’, pageView);
});
});
$(“a[href*='#']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/anchor/’ + $(this).attr(‘href’).substring(1);
_gat._getTrackerByName()._trackEvent(‘Anchors’, pageView);
});
});
});

Complete code
——————–

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34831893-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);
})();
$(function(){
$(“a[href*='http']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/outgoing/’ + $(this).attr(‘href’);
_gat._getTrackerByName()._trackEvent(‘Outbound Links’, pageView);
var _href = $(this).attr(‘href’);
setTimeout(function() {
location.href = _href;
}, 100);
ev.preventDefault();
return false;
});
});
$(“a[href*='mailto']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/mailto/’ + $(this).attr(‘href’).substring(7);
_gat._getTrackerByName()._trackEvent(‘Mailto’, pageView);
});
});
$(“a[href*='#']“).each(function() {
$(this).click(function (ev) {
var pageView = ‘/anchor/’ + $(this).attr(‘href’).substring(1);
_gat._getTrackerByName()._trackEvent(‘Anchors’, pageView);
});
});
});

Please suggest me..
- on December 27, 2012 at 11:50 | Reply Lars Corneliussen
  
  What error do you get?
on January 8, 2013 at 19:17 | Reply libbylegal

Hi Lars

I just wanted to confirm that your ‘function’ declaration at the start of the script requires the leading ‘$’ symbol. I am not any means used to javascript but noticed that the function declaration in the script supplied by Google analytics does not include a leading ‘$’ symbol. I am not a programmer but I know enough that code has a grammar attached to it and also noticed that others have included the code with a leading ‘$’ symbol and then reported that there are problems so thought I would ask. Sorry if my question is a stupid one.
- on February 14, 2013 at 12:42 | Reply Lars Corneliussen
  
  The $ is a jquery function – you need to embed jquery.
  
  I’ll update the post accordingly.
on January 23, 2013 at 3:46 | Reply Ben Santiago Dajao

Hello,

Where can you find the report for this?
on January 23, 2013 at 3:48 | Reply Ben Santiago Dajao

Hello,

Where can you find the report in GA for this?
on February 14, 2013 at 12:31 | Reply aaron

I think I have been able to answer my own question but other people may find this useful as well. Your script requires jquery and so the following code should already have been executed. If it hasn’t simply add it to the code snippet above the google analytics code and the tracking will start almost immediately.
on June 5, 2013 at 15:41 | Reply Kosal Soth

I am very new to muse and coding. Please help!!
When I place this (Google Analytics coding that you provided above) in the page/page property/metadata/HTML for : it shows up at the top of the website in preview. How or where do I need to place this code so it is properly placed and and not showing on live view?
- on June 10, 2013 at 8:37 | Reply Lars Corneliussen
  
  You must put it in a script-tag. my code here
  Also you must have jQuery included.