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.

[tags]affiliate marketing, affiliate links, DOM, javascript, jQuery[/tags]