views:

82

answers:

2

I'm working on a little jQuery script to add Google Analytics pageTracker onclick data to all relative URLs on my forum, allowing me to track clicks to external sites.

I don't want to add the onclick to internal links on forum.sitename or sitename, and I don't want to add them to any hrefs marked # or that start with /. My script below works nicely, but for one minor problem!

All of the forum's URLs are relative and don't start with /. I appear to have no way to change that, so need to modify the jQuery below to prevent it adding the onclick to links like as it currently does.

What I want to do, is to write a .not() function like .not("[href!^=http") to prevent jQuery from adding the onclick to any hrefs which do not start with http. However, .not() appears not to support this.

I'm new to jQuery and can't figure this out. Any pointers would be massively appreciated.

$(document).ready(function(){
     // Get URL from a href
     var URL = $("a").attr('href');

 // Add pageTracker data for GA tracking
 $("a")
 .not("[href^=#]")
 .not("[href^=http://forum.sitename]")
 .not("[href^=http://www.sitename]")
 .attr("onclick","pageTracker._trackEvent('Outgoing_Links', 'Forum', " + URL + ");")
 ;

});

Thanks!

+1  A: 

You can write the not selector like this to get the links that do start with http, but don't contain "sitename.com":

$("a[href^=http]:not([href*=sitename.com])")

You can play with an example here, this uses the string based :not() selector and the ^= attribute starts-with selector you're already using and the *= attribute contains eelector.

Update based on comments:

$(functon() {
  $("a[href^=http]:not([href*=sitename.com])").click(function() {
    pageTracker._trackEvent('Outgoing_Links', 'Forum', this.href);
  });
});
Nick Craver
Thanks, Nick. This isn't quite working for me. Maybe it's because I'm being all double-negative! Add .not("[href^=http]") to my script results the onclick being *added* to the relative URL but not the absolute ones. Any ideas, please?
Matt
@Matt - Updated the answer for this, I had to re-re-read the question :) This should give you want you want, updated the example showing this as well.
Nick Craver
Outstanding. Thanks, Nick! You've made my day.
Matt
@Matt - If you're all set make sure to mark the answer that helped you resolve your question as accepted via the checkmark on the left...if it's still not quite right please comment and I'll help you make more adjustments :)
Nick Craver
Thanks, Nick. Have logged in and voted you up. One thing I'm still stuck on is getting the value of the right href into the URL var. At the moment it seems to just use the URL of the first item on the page, so every item with the onclick added gets the same URL parameter added, which won't help with tracking. Any ideas how I can solve that, please?I think perhaps I need to use var URL = this.href; or maybe each()?Many thanksMatt
Matt
@Matt - Updated the answer showing how to do this, the key is using `this` inside the click handler, you could do something similar in an `.each()`, but this is shorter and faster :) The `$(function() { })` makes this run at `document.ready` so you can replace *all* your code with what I have above.
Nick Craver
Awesome. Thanks for all your help!
Matt
+1  A: 
var regex = RegExp('^(?:f|ht)tps?://(?!' + location.hostname + ')');

$('a').filter(function(){
    // Filter-out internal links
    return regex.test(this.href);
}).click(function(){
    pageTracker._trackEvent('Outgoing_Links', 'Forum', this.href);
})
J-P