Page 1 of 1

jQuery assistance please...

Posted: Mon Apr 04, 2011 11:53 pm
by Benjamin
I'm working on a customized analytics solution and one component of this is tracking outbound links. I need to track these in a way that does not affect the SE value of the links, so I would like to attach onclick events to all of the links inside of a container and route them through a clicktracker. I don't understand jQuery well enough to write this myself but I know it should only be a few lines of code.

Here's what I need it to do:

1. Attach the onclick event to all links inside of a container with a specified id.
2. The onclick event should append the value of the href to a link tracking url. e.g. http://domain.com/tracker/outbound.php?destination=http://otherdomain.com/pagename/
3. The onclick event should prevent the browser from following the href in the link. e.g. return false.

It would be great if I could prevent specific links from being tracked by adding a custom classname or something.

I know this won't work if js is disabled, which is fine.

If anyone can write this out for me that would be great, and it would help me understand jQuery a lot better.

Re: jQuery assistance please...

Posted: Tue Apr 05, 2011 4:11 am
by Darhazer

Code: Select all

$('#your-id > a').click(function(){
window.location.href = 'http://domain.com/tracker/outbound.php?destination=' + escape( $(this).attr('href') );
return false;
});
Remove the > from the selector if the links are not first-level childs of the container
Feel free to contact me for any further assistance.

Re: jQuery assistance please...

Posted: Tue Apr 05, 2011 5:20 am
by Benjamin
Thank you Darhazer. That looks like exactly what I need. I'll integrate it tomorrow.

Re: jQuery assistance please...

Posted: Tue Apr 05, 2011 5:55 am
by Darhazer
One side note, don't forget to wrap jQuery calls in

Code: Select all

$(document).ready(function(){
// your jQuery code goes here
});
so you know the dom is loaded at the time you are attaching the click handler. It's generally a good practice and it's a must if you place your script at the top of the document and not in the bottom.

Re: jQuery assistance please...

Posted: Tue Apr 05, 2011 8:46 am
by Weirdan
also using live() instead of click could give you more performance and less headaches (when content changes you wouldn't need to re-bind the handler:

Code: Select all

$(function() {
    $('#your-id a:not(.notrack)').live('click', function() {
        window.location.href = 'http://google.com/search?q=' + escape($(this).attr("href"));
        return false;
    });
});

Re: jQuery assistance please...

Posted: Wed Apr 06, 2011 4:25 pm
by Benjamin
Works perfectly guys, thank you. The content won't be updated with ajax or anything (at least not yet), but I'll use the .live method anyway.

EDIT: Actually, if you right click and open the link in a new tab, the jQuery code doesn't execute. Any fix for that?

Re: jQuery assistance please...

Posted: Wed Apr 06, 2011 6:06 pm
by Weirdan
Hmm, something like this might work:

Code: Select all

$(function() {
    $("#your-id a:not(.notrack)").attr("href", function(i, attr) {
        return 'http://google.com/search?q=' + escape(attr);
    });
});
It won't work for links that are not yet present (dynamically added after) when script is run though.

Re: jQuery assistance please...

Posted: Thu Apr 07, 2011 9:44 am
by pickle
The function passed to click() or live() gets 1 argument, the eventObject which has the mouse button clicked: http://api.jquery.com/event.which/

Re: jQuery assistance please...

Posted: Fri Apr 08, 2011 12:02 am
by Benjamin
I don't know what you mean Pickle.

Weirdan, the second bit of code works perfectly even when opening links manually in new tabs.

I'm good to go:)

Re: jQuery assistance please...

Posted: Thu May 26, 2011 12:39 am
by Benjamin
Well an issue has come up. Here's the code I'm using and the problem:

Code: Select all

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery(function() {
        jQuery("#articleBody a:not(.notrack)").attr("href", function(i, attr) {
            return 'http://domain.com/track_click.php?bid=13&pid=5037&destination=' + escape(attr);
        });
    });
});
</script>

<div id="articleBody" class="entry">
<p>Please contact me 555-1212 or by email at <a href="mailto:testing@domain.com" target="_blank">testing@domain.com</a></p>
</div>
Works perfectly for links, except in Internet Explorer 7 and above, the link text for email addresses is changed to:

[text]Please contact me 555-1212 or by email at http://domain.com/track_click.php?bid=1 ... domain.com
[/text]

As you can see, it appears IE is changing the inner html of the link to the href value for mailto: links. We are tracking mailto clicks, so I don't want to just disable the tracking for them. Any clues on this?

Re: jQuery assistance please...

Posted: Thu May 26, 2011 6:47 am
by Weirdan
That's a known bug (or would they call it a feature) in IE, whereas browser reflects changes to href in the element content itself if original value of the attribute matched content. You can work it around like this:

Code: Select all

jQuery(document).ready(function(){
    jQuery(function() {
        jQuery("#articleBody a:not(.notrack)").each(function(i, elt) {
            var e = jQuery(elt);
            e.html(e.html() + '<span></span>');
            e.attr('href', 'http://domain.com/track_click.php?bid=13&pid=5037&destination=' + escape(e.attr('href')));
            e.html(e.html().replace(/<span><\/span>$/i, ''));
        });
    });
});

Re: jQuery assistance please...

Posted: Thu May 26, 2011 1:31 pm
by Benjamin
Thank you. Certainly odd behavior. :crazy: