Welcome to WebmasterWorld Guest from 54.204.74.171

Forum Moderators: open

Message Too Old, No Replies

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

   
6:19 pm on Sep 9, 2006 (gmt 0)



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.

?

8:20 pm on Sep 25, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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
}
}
}
7:11 pm on Sep 29, 2006 (gmt 0)

10+ Year Member



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]

8:01 pm on Sep 29, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




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]

10:57 am on Oct 2, 2006 (gmt 0)

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.