Hiding ugly affiliate links using Javascript

At some point in your affiliate career (usually earlier rather than later), you will come across affiliate links that look a little bit too much like affiliate links.

I'm talking about www.example.com/?AFFILIATE_ID=1234 and similar format links. Nothing screams "I AM AN AFFILIATE LINK" like having the word "affiliate" in the URL.

I'm a big fan of disclosing your interests, but the amount of disclosure does depend on the context. For example - if the affiliate link is in the sidebar and looks like an ad, you don't want to reinforce that it's an ad by drawing attention to the affiliate ID in the URL. While it's good to make it obvious that a link is financially motivated, you don't want to make it *too* obvious. Generally speaking, I really don't like big obvious affiliate links.

However, as an affiliate you have to use whatever format link you are given. If the link format contains a big obvious affiliate ID, here's one effective way to make it go away.

Javascript

Javascript is an interesting demon. It receives a lot of flack, but it's actually brilliant. Anything done using javascript does require a little extra thought - you need to design the script to work well for users with javascript, but also ensure that the page doesn't fall to bits for users without javascript.

What we are going to do is use the affiliate link on the web page as per normal. Our javascript will modify the link to remove the ugly affiliate ID, then when the user clicks on the link, the affiliate ID is re-attached. If the user doesn't have Javascript enabled, none of this trickery happens and they just see the normal affiliate link.

Let's consider you want to link to www.example.com?prod_id=765 (a normal page) but you want the affiliate commission for any clicks. So you actually need to link to www.example.com?prod_id=765&AFF_ID=1234 - but you don't want to show the "AFF_ID=1234" to the user.


  1. We create a HTML page containing the original affiliate link amongst the content.
  2. We make up a list of all the affiliate links we want to use across the site - we record the affiliate version of the link (eg www.example.com?prod_id=765&AFF_ID=1234) and the non-affiliate version (www.example.com?prod_id=765) in our Javascript file.
  3. Once the page loads, our Javascript scans all the links on the page. If any link on the page is in our list of affiliate links, it gets replaced with the non-affiliate version of the link.
  4. When a user clicks on a link, it gets replaced with the affiliate version of the link just before they leave the page. They arrive at the merchant's site with the affiliate ID intact.

All this happens rather seamlessly in the background. And thanks to jQuery, the code required is fairly minimal.

A word of caution

It's worth pointing out that users don't like being tricked. And with the purpose of this script being to show you one link when you mouseover, and send you to a slightly different link when you click, there's definitely the potential for this to be seen as misleading.

I would suggest that this script is only used where there is some form of disclosure already happening on the page. It's easy for a visitor to look at the source code and see what it really going on, and people don't like to be mislead.

Good examples:

  • I have used company X and found them to be well priced - www.example.com (aff)
  • This site is sponsored by www.example.com
  • Browse top quality X from www.example.com (with the text being situated where it obviously looks like an ad, not content)

Bad examples:

  • Yeah, you should check out www.example.com
  • I recommend www.example.com as they are good to deal with

With the good examples, the user can reasonably conclude that the link is paid, so (in my opinion) there is no harm in masking the affiliate ID in the URL. With the bad examples, the user would reasonably assume that an unbiased recommendation was being made, and are likely to get angry if they find out that is not the case.

Google adwords is a classic example of the link not truly representing the destination. But because the ad is disclosed as being paid, and the destination URL isn't too far different from what was advertised, people don't get upset. Follow these guidelines, and there is nothing to worry about.

See this script in action

You can see a stripped-down example of this technique here. Mouse-over the example link - If the link looks normal, this means the script is working. If you see an affiliate ID in the link when you mouseover, either you have Javascript disabled, or there is an error in the script. In either case, the link will still work and you still get your commission.

Download

Download a copy of hide affiliate links. Code is LGPL licensed. If you like it, please consider placing a link to www.ragepank.com or www.capsaicin.co.nz, which always puts a smile on my face.

Installation


  1. Upload the included jQuery Javascript file, and link to it in the <head> of your HTML, eg:
    <script type="text/javascript" src="jquery-1.2.3.pack.js"></script>


    Alternatively, link to Google's copy of jQuery:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


    Note that jQuery is approx 20kb - that's a lot of extra weight to add to the page if you aren't already using jQuery for something else. Luckily jQuery is awesome, and easily justified on most sites.

  2. Edit aff.js - add all your affiliate links into this file in the following format:
    aff['http://www.domain.com/AFFILIATE_LINK/'] = 'http://www.domain.com/REGULAR_LINK/';


  3. Link to aff.js in your HTML - this must appear after the jQuery link:
    <script type="text/javascript" src="aff.js?v=1"></script>


  4. Link to affiliate URLs as you normally would throughout the site content, using the Affiliate URL.

  5. If you need to modify aff.js for any reason you will need to update the version number in the code used in step 3 - otherwise aff.js will be cached by visitor's browsers, and they won't see your updated code. Simply increment the version number each time you make a change:
    <script type="text/javascript" src="aff.js?v=2"></script>



Enjoy.
Digg StumbleUpon del.icio.us technorati blinklist furl reddit sphinn

Tags: javascriptaffiliate linksgrey hataffiliates