homepage Welcome to WebmasterWorld Guest from 54.226.147.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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



 
Msg#: 3077420 posted 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.

?

 

DrDoc

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



 
Msg#: 3077420 posted 8:20 pm on Sep 25, 2006 (gmt 0)

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

10+ Year Member



 
Msg#: 3077420 posted 7:11 pm on Sep 29, 2006 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3077420 posted 8:01 pm on Sep 29, 2006 (gmt 0)


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

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



 
Msg#: 3077420 posted 10:57 am on Oct 2, 2006 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved