My Quest to Find a Very Good Way for Affiliate Link Cloaking With JavaScript

I have been thinking about cloaking my affiliate links for quite a while. I wanted to find out a fail-safe way for the purpose. I preferred JavaScript, since it was easy to implement. Here is the story of how I found out one.

Most bloggers redirect their affiliate links by creating a directory within their self-hosted blogs and redirecting users from there, with the help of a '.htaccess' file redirect system (will be addressed in another post). I sadly don't have my own server to implement this. I don't prefer to use lots of external link redirection services like tinyurl, snipurl, etc. Thus I looked for ways to create link redirect with JavaScript. This is the interesting story of my findings.

What and Why Is Link Cloaking?

Visit any professional blogger who makes a living online. An example is John Chow. The Vancouver guy's blog makes thousands of dollars every month through various means. A huge amount of this money comes from affiliate product sales.

In his product reviews, you may often find 'purchase here' links. If you check the URL, you will see that the link is like "http://johnchow.com/go/affiliateproductname". This is a cloaked affiliate URL. If you click it, you will land a special page created for John Chow. If you purchase the product from this page, John will get a hefty commission (50 or 75 per cent of sale price). On the other hand, if you go to the product's home page independently and purchase, John will not get any commission.

Affiliate link URLs are generally of this structure: "http://productsite.com/buy?affiliateID=223323". This affiliate ID is a unique ID representing a blogger. John Chow has a unique affiliate ID.

Many internet users know that affiliate commissions exist. Most don't want the blogger to get any cut from their purchase. What they do is they check the link URL to see if it's an affiliate link or not (checking the link's URL at the status bar). If it is an affiliate link, they may not purchase the product or may purchase after stripping off the affiliateID of the URL, which will strip the blogger off the commissions.

What intelligent bloggers do is they cloak the affiliate link. This way, the URL will look normal, and the user will be redirected to the affiliate URL. This practice is known in various names, 'affiliate link cloaking', 'link cloaking', 'affiliate link redirect', etc. The various needs are bulleted below:

  • There are many knowledgeable internet users who don't want the blogger to get paid for their purchases. They will strip off the affiliate ID part before purchasing. By cloaking affiliate links, you will be able to sell products to these users, maximizing your sales and commissions.
  • Many users don't even visit the product page if they see that it is an affiliate link.
  • These users may be tricked to believe that it is a normal link if affiliate cloaking is done.

What I Wanted?

Most link cloaking systems have an obvious disadvantage. They have the link URL look entirely different from the original product URL. For instance, all John Chow product links start with 'johnchow.com', while different products should have different URLs.

If you use tinyURL, snipURL, etc., for link redirect, the users will readily know that they are affiliate URLs. I wanted a very efficient solution to this problem.

The following were my needs:

  • I want the original product's straight home page URL on the status bar. Which means, if the affiliate link is http://product.com?affiliate=233322 then I want http://product.com at the status bar, and not anything like http://mysite.com/go/product or http://tinyurl.com/1030000.
  • I wanted the link to go to the affiliate site on click in all cases.

To fulfill these needs, I thought JavaScript is a good option. I fished around to find the means for that. Here are my findings:

Option 1: Changing Status Bar Text

I looked around for a JS function to change the status bar text and found this one [Change straightlink.com and affiliatelink.com with your values]:

<a href="http://www.affiliatelink.com" onMouseOver="window.status='http://www.straightlink.com'; return true" onMouseOut="window.status=' '; return true">Link Anchor</a>

This code creates a link that, when hovered over, shows one URL on status bar, and actually points to a different URL.

The issue with this code is straightforward. Many people abused this feature to trick users to Phishing sites (sites that look legitimate, but are not). None of the current browsers supports status bar text changing feature, due to enhanced security.

To see this, go to Firefox (Fx), and look for Tools->Options. From the content tab, click 'Advanced features' near 'Enable JavaScript', and you will see that 'Change status bar text' is unchecked, which means, the browser will not allow any JS code to change the status bar text, and your user will see the affiliate URL.

Firefox JavaScript options window advanced

The same is the case with Google Chrome and Internet Explorer (IE).

Option 2: A Tricky Two-link Idea!

I began thinking of a unique way to redirect users. The problem is that I wanted a different piece of text to be shown on the status bar. I thought: why is a piece of text shown on the status bar at all? The reason is that we are hovering over a particular link. That means, when a particular link gets hovered over, its source gets shown on the status bar, or the status bar text depends on the link that gets hovered over or the link in focus! Idea!!!!

I got a trick. I would create two links, but one will be an invisible link—one with the link text as a dot or space. The user will not easily identify that link. I will encode it to point to the straight URL and the visible link to point to the affiliate URL. I created a JS code that will activate the invisible link every time the user hovers over the affiliate link anchor. The browser will show the straight URL, since the invisible link is what gets focused though we are pointing to the normal link. The code is following:

<a id="aff" href="http://www.straightlink.com">.</a>
<a href="http://www.affiliatelink.com" onmouseover="document.getElementById('aff').focus();return false;">Link Anchor</a>

When I tested this in Fx, I found it working. But the problem is not over. In IE and Google Chrome, the affiliate link gets activated nonetheless, rendering the whole effort futile. But with this, you can be sure that the person will go to affiliate link no matter he right-clicks, middle-clicks, or accesses the link from an RSS feed, since it is a straightforward affiliate link.

Option 3: Opening Link in New Window

This is a very good solution in comparison with others above. With this way, the link will be opened in the new window through a JavaScript code within the anchor text, and the current window status bar will show a void function:

<a href="javascript:void(0);" title="Opens in a new window" onclick="window.open('http://www.affiliatelink.com')">Link Anchor</a>

The problem is that this code doesn't work in RSS feeds, and on middle-clicking, the user will not land anywhere. Only clicking is possible.

In place of javascript:void(0), try putting the straight URL, and when user clicks the link, he will actually open two URLs. One will be the new window with the product affiliate link and the current window will reload to the straight URL. This way, you can play a temporary trick. But if the user middle-clicks the link or right-clicks and chooses open in new window, the straight link gets loaded.

Option 4: Cool Solution: Changing the URL in Real Time

I thought and came up with a new idea: why not have the original URL in place and redirect the user to the affiliate link, just when the user clicks on the link? That thought made me create the following JS code:

<a href="http://www.straightlink.com" onclick="this.setAttribute('href', 'http://www.affiliatelink.com')" oncontextmenu=" this.setAttribute('href', 'http://www.affiliatelink.com')">Link Anchor</a>

This code has a function to convert a straight link to affiliate link when a particular action happens. The action can be mouse-click, mouse-over, etc. In this link, whenever a person hovers over, he sees the straight link and thinks that it will open to the normal product page. Try clicking the link or right-clicking it to open in new window: Bingo! The normal-looking straight link will actually load affiliate link in the browser.

Cool, huh? There are some issues in this code. Number 1: What if the user middle-clicks the link and opens it in a new window? In that case, he will land the straight URL, not the affiliate. There is no event for the action middle-click in JS, sadly. Number 2: This will not work in RSS feed readers and browsers without JavaScript functionality.

Conclusion

Even though my last solution solution comes very closer to fixing this problem of affiliate link cloaking, it's not a full-solution. We will soon see that the JS code doesn't work in RSS/Atom feeds. Which means, when your blog gets more popular and people start accessing it through feed readers, they will land only the straight URL. You will not make sales commissions in those cases.

This means, the only best way to get the best out of affiliate links is setting up a domain redirect with .htaccess file, as we saw in the beginning. Setting up a .htaccess file redirect is beyond the scope of this post. We will publish separate post on that [edit: post on .htaccess file redirection] and on various link-cloaking services out there; be sure to subscribe to our RSS feed (full).

Copyright © Lenin Nair 2008

1 Opinions:

  1. this kind of blog always useful for blog readers, it helps people during research. your post is one of the same for blog readers.

    buy Thesis Papers

    ReplyDelete

Comments are moderated very strictly