Page type = External redirect, and Google Tracking

[Doublespark]

A new site I am developing needs an external link to another site in the main menu. In an ideal world I would like to get rid of it, but for the moment at least that is not an option.

The external link needs to have some Google Analytics tracking javascript code, which allows the client to track the volume of clicks this link attracts.

The Google Analytics code is in this format:

onClick="javascript: pageTracker._trackPageview('/thisLinkClicked/myDomain.co.uk');"

I also have some normal links within pages that I will also need to be able to add this code to.

What would be the best way to achieve this?

[markhurd]

Not sure if it's the best way - I'm not familiar with how TL handles injection of one-off code into a template - but it would be pretty easy with a bit of jQuery.

$(document).ready(function() {
  $("#foo a:eq(bar)").click(function() {
    pageTracker._trackPageview('/thisLinkClicked/myDomain.co.uk');
  });
});

Set #foo to the id of your navigation, and bar to the index (0, 1, 2, 3, etc.) of your link. For example the 3rd link in your menu would have an index of 2.

I would add "alert("link clicked");" before the pageTracker call when testing just to make sure it's getting called correctly. Most likely you'd have to include this code after you call GA just to make sure pageTracker is initialized and ready for you to call it.

Someone more familiar with mootools could probably translate that, in case that's what you're using.

[Doublespark]

Thanks Mark, that's great.

I am using jQuery already so that will not be a problem.

Could I push my luck and ask how I could implement this with an ordinary link within a text content element. This would be different as those links do not have an id, I think you can only apply a class?

Thanks again,

Gary.

[markhurd]

Sure, that's even easier. Since jQuery works with CSS selectors you could target links in dozens of ways. Each of the following code blocks should be placed in a document.ready function like above:

$("a.foo").click(function() {
  // do stuff
});

This will let you hook into any link on the website with a class of foo. This is generally how I would do it.

$(".ce_text a").click(function() {
  // do stuff
});

This will target links only within a ce_text element (most likely a div, according to TL's default templates).

$("a[href*='extDomain']").click(function() {
  // do stuff
});

You'll like this one. This will target any link that contain the string 'extDomain' in the href attribute. Sounds like this will be exactly what you need. Attribute selectors in jQuery are incredibly powerful - especially when you're dealing with many content editors who may not remember to set certain classes or hooks you depend on.

If you have any links that are dynamically added to the page after load, you will have to use the live function. Just replace .click(function() { with .live("click", function() {

[Doublespark]

Thanks Mark, you are a star!

Maybe one day there will be a way to send a beer over the internet :-) In the mean time have a virtual one on me.

Many thanks.