jQuery assistance please...
Moderator: General Moderators
jQuery assistance please...
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.
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...
Code: Select all
$('#your-id > a').click(function(){
window.location.href = 'http://domain.com/tracker/outbound.php?destination=' + escape( $(this).attr('href') );
return false;
});
Feel free to contact me for any further assistance.
Re: jQuery assistance please...
Thank you Darhazer. That looks like exactly what I need. I'll integrate it tomorrow.
Re: jQuery assistance please...
One side note, don't forget to wrap jQuery calls in
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.
Code: Select all
$(document).ready(function(){
// your jQuery code goes here
});Re: jQuery assistance please...
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...
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?
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...
Hmm, something like this might work:
It won't work for links that are not yet present (dynamically added after) when script is run though.
Code: Select all
$(function() {
$("#your-id a:not(.notrack)").attr("href", function(i, attr) {
return 'http://google.com/search?q=' + escape(attr);
});
});
Re: jQuery assistance please...
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.
Re: jQuery assistance please...
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:)
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...
Well an issue has come up. Here's the code I'm using and the problem:
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?
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>[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...
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...
Thank you. Certainly odd behavior. 