Affiliate Link Loveliness
23 May 2006 | Tutorials | 14 Comments
Today’s tutorial is a quickie. I want to tackle something easy early on in the “15 Days” so that someone new to javascript can sink their teeth into a real world example without getting bogged down in code.
The fact that I find myself desperately short on time today with deadlines looming certainly sealed the decision.
The Goal
We’re going to create a quick little snippet of code using jQuery that will convert and camouflage all of our affiliate links on a page.
Why?
Some affiliate marketers believe that there’s a segment of their audience that is savvy enough to spot an affiliate link and will avoid clicking through the link - typing the url directly into the browser to “cheat” the affiliate marketer out of their commission (assuming a purchase is made).
The “Old” Way
There are lots of ways affiliate marketers have devised to camouflage their links or to make it very difficult for someone to avoid clicking through their link. Some of these methods involve .htaccess and server side code.
But for the purpose of this tutorial I’m going to focus on some “old school” javascript:
<a onMouseOver='window.status="http://www.merchant-url-here.com"; return true;' onMouseOut='window.status="Done"; return true;' href="http://www.affiliate-url-here.com" target="_blank">Link Text Here</a>
This code is designed to show the generic url in the status bar of the browser when a website visitor hovers their cursor over the link. So instead of seeing www.website.com?aff=123 they see www.website.com
The Problem
You’re an active affiliate marketer with multiple links on multiple pages and you’re adding content at a frantic pace. Writing all this code gets tiresome. And putting javascript into each affiliate link will make updating your websites a nightmare if at some point down the road you decide to change something about the code and the way the links are displayed.
The jQuery Solution
First step:
We want the javascript to camouflage our links as soon as possible so we start with this:
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//code goes here
});
</script>
As soon as the DOM (Document Object Model) is ready, the code inside of the ready(function(){}) will start.
Next
We’re going to give all of our affiliate links a class name and a title. The class name will help jQuery scan the page and find all of the links we want changed, leaving all other links untouched.
The title will serve two purposes: when the cursor hovers over the link, a tiny tootip-like box will appear with the www.website.com url displayed and the same url information will display in the bottom of the browser window (Internet Explorer only).
<p><a href="http://www.affsite.com?id=123" title="http://www.affsite.com" class="affLink">Super Duper Product</a></p>
Tell jQuery to Find Links With class=”affLink”
$('a.affLink')
Add A Mouseover Event
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
Simply put, this says “Find all links with class name affLink and onMouseover change the status of the browser (where link information is shown) to whatever you find in the title of the link.”
This does not work in FireFox (made fav browser) but it works for Internet Explorer (what most of the world uses - unfortunately). And in FireFox it just displays ‘Done’, or more accurately, moving the cursor over the link doesn’t have any effect on the status bar of the browser. I have not tested this in other browsers.
Home Stretch - Mouseout
jQuery lets us “chain” methods together like so:
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
This last bit of code tells jQuery to change the status bar of the browser back to ‘Done’ when the cursor is no longer hovering over the link.
If chaining mouseover and mouseout is a little more than you want to tackle as you get used to jQuery then there’s nothing wrong with writing your code like so:
$('a.affLink').mouseover(function(){window.status=this.title;return true;});
$('a.affLink').mouseout(function(){window.status='Done';return true;});
It’s up to you.
Put It All Together
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
});
</script>
Final Thoughts
Some of you may be thinking this “Day” to be a bit simplistic. Others may have a difficult time seeing the point of the tutorial because you’re not an affiliate marketer.
In “Days” to come you’ll see me tackle issues that get more involved and apply to almost anyone with a website - whether you monetize your traffic or not.
Technorati Tags: affiliate marketing, affiliate links, DOM, javascript, jQuery
Subscribe
14 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
I’m a newbie to jquery but I just implemented this tutorial into some of my pages and I LOVE IT.
So much easier, faster & better. One issue though, when I refresh the page the affiliate ids are revealed
I haven’t seen that myself, but what you could try would be to put the javascript code at the end of your html.
Putting at the bottom did the trick.
Thx
You can allow firefox to let javascript update the status…
http://kb.mozillazine.org/Firefox_:_FAQs_:_About:config_Entries
search for (2nd location):
disable_window_status_change
It is weird, in IE(6) this takes effect on some links and is still showing the url on other.
[…] Affiliate Link Loveliness - Javascript Tutorials - 15 Days Of jQuery This entry was written by thund3rbox and posted on March 4, 2007 at 12:22 am and filed under . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « they quietly took the body away […]
Hi,
Interesting topic to discuss. I think javascript coding for an affiliate is more effective from SEO point of view. I personally visit many websites through search engine and found one website http://www.theispguide.com that used many affiliate links. Also i found one good tool to check outbound links and found that they have many outbound links that may cause problem in eye of search engine. I personally recommend to webmaster to keep balance betn website inbound and outbound links.
As we all know java script coding is tough for search engine to crawl and for affiliate link its is good idea to use javascript. Search engine will not count it as outbound link and may help you in improve your ranking in Search Engine.
Take Care,
Bhavesh Goswami.
Anybody can observe the Sabbath, but making it holy surely takes the rest of the week
I am looking for a way to track the number of people sent from my site to another site via a link. Another words, how many people who were at my site clicked on the link that then took them to a different site.
Great stuff. This will be very useful and keep my code clean and fresh. I just love jQuery
None…
None…
Yeah this is good stuff! But - I don’t want the tooltip that comes with the title attr to show and I don’t want to add a class to my aff links so this is what I, as a jQuery newbie, think I’ll do:
$('a[href]:not([href*=#],[href^=/])').attr('rel', function() {
return this.title;
});
$('a[href]:not([href*=#],[href^=/])').mouseover(function() {
$(this).attr('title','');
window.status=this.rel;
return true;
})
.mouseout(function() {
window.status='Done';
return true;
});
Internal link to Some Section
Anchor link
Some Afflink
Paperboy, something wrong with last message or I don’t understand something… (
I cannot disassemble, that you have written. Please, write once again
what a wast of time ,,,, it does not work at all……(both in firefox IE7)