One of the most common things I get asked to track are specific links on the website. Typically to do that I would use a custom link tracking function. This typically involves adding a large chunk of JavaScript code to each link, or adding a function to your s_code file and then calling that function using an onClick function added directly to the link. That methodology works fine, and I’ve been doing it forever. But that means working with IT to add more code to your pages, something I want to try to avoid as much as possible. So how can we make the implementation of our link tracking quicker and use less code? If you haven’t figured it out by now, we’re going to use some jQuery.

The reason I like to use jQuery for link tracking is that it allows me to take advantage of the current code I already have on the page, and let’s me track links often without having to add any additional code to the page at all. It lets me take advantage of the attributes that are, or at least should, already be in place.

Lets say we have some links we need to track in the navigation of our page that look like something like this:

<a href="http://www.mysite.com/contact.php" title="contact" >Contact Us</a>
<a href="http://www.mysite.com/about.php" title="about" >About Us</a>

We want to be able to track which link in the nav gets clicked, and how many times it gets clicked. Using jQuery we can do that without adding any code to the links at all. We just need to add a jQuery function to the s_code file and we are all set. Here is what it would look like:

$(document).ready(function() {
$('.navLink').click(function(){
var s = s_gi(s_account);
s.trackExternalLinks=false;
s.linkTrackVars='eVar1,events';
s.linkTrackEvents=s.events='event1';
s.eVar1 = $(this).attr("title");
s.tl(this, 'o', 'Nav Link Click');
});
});

What the code does is it will look for any click on an element with the class of navLink. Next it will grab the value of the link attribute “title”, stick that in an eVar and submits that along with event1 in a s.tl() call.

We are not always fortunate enough to have any unique information in a link to identify it in that way. Typically the links will be wrapped up all in a div that applies styling to all of them, and won’t have any title, or alt, or name attributes. Something like this is more what I usually come across:

<div >
<a href="http://www.mysite.com/contact.php">Contact Us</a>
<a href="http://www.mysite.com/about.php">About Us</a>
</div>

We can work with this too. Here we will just tell our code to look at every link (anchor tag) that appears in the in the navLink class. Then since we don’t have any other attributes in the links we can just take the display text in the link and capture that. That code would then look something like this:

$(document).ready(function() {
$('.navLink a').click(function(){
var s = s_gi(s_account);
s.trackExternalLinks=false;
s.linkTrackVars='eVar1,events';
s.linkTrackEvents=s.events='event1';
s.eVar1 = $(this).html();
s.tl(this, 'o', 'Nav Link Click');
});
});

We also have the opportunity to capture any attribute of the link. Check out this example:

<a href="http://www.mysite.com/" name="my site name" title="my link name" >Home</a>

Using jQuery we can capture all of the link attributes like this:

s.eVar1 = $(this).attr("name");  //returns the value of the name attribute
s.eVar2 = $(this).attr("title");  //returns the value of the title attribute
s.eVar3 = $(this).attr("href");  //returns the URL of the link
s.eVar4 = $(this).html();  //returns the display text of the link

If you have all of these variables used and would really like to add your own custom attribute, then that will work as well.

<a href="http://www.mysite.com/" sc="my custom attribute" >Home</a>

s.eVar5 = $(this).attr("sc");  //returns the value of the sc attribute

I probably shouldn’t have to tell you this but your site needs jQuery for this link tracking to work. You can get jQuery from here. Google even will host it for you so no need to worry about adding another file to your server, or worrying about the speed of delivering the file.