jQuery assistance please...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

jQuery assistance please...

Post 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.
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: jQuery assistance please...

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: jQuery assistance please...

Post by Benjamin »

Thank you Darhazer. That looks like exactly what I need. I'll integrate it tomorrow.
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: jQuery assistance please...

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: jQuery assistance please...

Post 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;
    });
});
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: jQuery assistance please...

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: jQuery assistance please...

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: jQuery assistance please...

Post 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/
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: jQuery assistance please...

Post 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:)
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: jQuery assistance please...

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: jQuery assistance please...

Post 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, ''));
        });
    });
});
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: jQuery assistance please...

Post by Benjamin »

Thank you. Certainly odd behavior. :crazy:
Post Reply