Automated tracking of outbound links with Google Analytics

How to automate it so that I don't have to add the code to every new link

[eSite]

Hi,

I can track outbound links with Google Analytics with this code :

<a href="http://www.example.com" onclick="javascript:urchinTracker('/outgoing/example_com');">

But how can I automate the process of adding

onclick="javascript:urchinTracker('/outgoing/example_com');"

to every anchors' href that has a domain name different than the one specified, so that I don't have to do it for each link of each new article that I publish.

?

[DrDoc]

function AddHandler() {
var arrAnchors = document.getElementsByTagName('A');
for(i = 0; i < arrAnchors.length; i++) {
arrAnchors.onclick = function() {
// your code here to pass the href to the tracking function
}
}
}

[Illah]

So would I just add that code to a <script> tag in the header? I'm a javascript newb but I'd love to implement something like this as well. I have a global header include that I coulp pop this in so if that's the case this would work out perfectly!

Also for the 'your code here' part of your example, is that where I'd stick this code:

onclick="javascript:urchinTracker('/outgoing/example_com');"

Thanks,

--Illah

[edited by: Illah at 7:12 pm (utc) on Sep. 29, 2006]

[Fotiman]

function AddHandler() {
var arrAnchors = document.getElementsByTagName('A');
for(i = 0; i < arrAnchors.length; i++) {
arrAnchors.onclick = function() {
// your code here to pass the href to the tracking function
}
}
}

The problem with that, though, is that it will replace any inline onclick events you already have defined. In other words, you might break other functionality.

Another option would be to use the Yahoo UI Library [developer.yahoo.com]'s Event Utility to add the onclick event listener. This would preserve any of the inline onclick handlers.

For example, you'd do something like this:

<script type="text/javascript" src="./yui/build/yahoo/yahoo.js"></script> 
<script type="text/javascript" src="./yui/build/dom/dom.js"></script> 
<script type="text/javascript" src="./yui/build/event/event.js"></script> 
<script type="text/javascript"> 
function addHandler() 
{ 
 YAHOO.util.Event.addListener( 
  document.getElementsByTagName('A'), 
  'click', 
  function(){urchinTracker('/outgoing/example_com');} ); 
} 
YAHOO.util.Event.addListener(window,'load',addHandler); 
</script> 

Note, I didn't test any of that, but essentially what it should do is call urchingTracker for every link click, regardless of what other event handlers are in place.

Hope that helps.

[edited by: Fotiman at 8:03 pm (utc) on Sep. 29, 2006]

[kaled]

1) There's no need to call getElementsByTagName(), simply use the document.links array - this also avoids messing with named anchors.
2) There's no need to get complicated, simply save the old onclick event (if any) as a new property called onclick_ and call it after any tracking stuff.

I think this is about right

for (var i = 0; i < document.links.length; i++) adjustLink(document.links[i]);
...
if (link.onclick) link.onclick_ = link.onclick;
...
if (link.onclick_) link.onclick_();
...

Kaled.