How many times have you seen people trying to sneak affiliate links into their content, and even if you are extremely interested in the product that is being promoted, you don’t go through their affiliate link. Whatever the reason people who are tech savvy don’t follow blatant affiliate links may be out of envy or just straight up spite. Don’t fret, I’ve got a new trick for you. With the power of JavaScript, you can show people a clean, affiliate free link to a product or service, but when they actually click the link, you can send them to a completely different URL. This technique could potentially be used for very evil things, so I’m a tad reluctant to share this, but I’m crossing my fingers it will be used in good faith.
First, try out these examples.
Affiliate link, same window
Affiliate link, new window
Roll your cursor over them, check their properties, even go ahead and view the page source. These are hard links to Google.ca and Amazon.ca. However, go as far as clicking them and you will be in for a surprise. You are now at Yahoo.ca! What happened?!
JavaScript gives you the ability to prevent the default browser action from taking place. With this code in place, we can prevent the links from opening their href attribute, and instead tell them to do something complete different, in this case, launch a different link (the link with your affiliate code tacked on.) If you’re using a good affiliate, the site will quickly register your affiliate ID and the transition will be seamless to the affiliate product page. Lets take a look at the code in place..
<script type="text/javascript">
function goto(url, newWin)
{
if (newWin) {
var win2 = window.open(url, '_blank');
win2.focus();
}
else {
document.location.href = url;
}
}
function stopDefault(e)
{
e = (e) ? e : window.event;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
window.onload = function()
{
var link_1 = document.getElementById('link_1');
link_1.onclick = function(event) { stopDefault(event); }
link_1.onmouseup = function() { goto('http://www.yahoo.ca/', 0); }
var link_2 = document.getElementById('link_2');
link_2.onclick = function(event) { stopDefault(event); }
link_2.onmouseup = function() { goto('http://www.yahoo.ca/', 1); }
}
</script>
Where you place the code won’t affect it. If you’re worried that the curious will view your source and read through for something elusive, you can just pack it into an external javascript file which will lose most users in their affiliate link sniffing endeavours. Nonetheless, lets go ahead and do a little code analysis:
<script type="text/javascript">
function goto(url, newWin)
{
if (newWin) {
var win2 = window.open(url, '_blank');
win2.focus();
}
else {
document.location.href = url;
}
}
function stopDefault(e)
{
e = (e) ? e : window.event;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
These two functions do exactly what you’d expect them to do. The goto function tells the browser to navigate to your custom link, while stopDefault stops the browser from doing its default action, which would be navigation to the href attribute.
window.onload = function()
{
var link_1 = document.getElementById('link_1');
link_1.onclick = function(event) { stopDefault(event); }
link_1.onmouseup = function() { goto('http://www.yahoo.ca/', 0); }
var link_2 = document.getElementById('link_2');
link_2.onclick = function(event) { stopDefault(event); }
link_2.onmouseup = function() { goto('http://www.yahoo.ca/', 1); }
}
This snippet is executed when the window is done loading and applies the aforementioned functions to the links we want to add the elusive linking technique to. You have to sync these lines up with the id attribute of the links or you will receive a nasty javascript error message. As you can see I have given the links in the body the IDs “link_1″ and “link_2″.
<a href="http://www.google.ca/" id="link_1">Affiliate link, same window</a>
<a href="http://www.amazon.ca/" id="link_2">Affiliate link, new window</a>
Its not Perfect
Unfortunately, though this system is extremely elusive, it is not perfect. As a FireFox user, I often use the scroll button on the mouse to click links to quickly open them up in a new tab. When this happens, the browser executes the default action anyways AS WELL AS your custom script. This will load your custom link as well as the displayed link, which will most likely confuse the user.
In conclusion, with this code I’m hoping to help affiliate publishers jump over the hurdle of affiliate links poor performance because of a nasty and blatant referral code tacked on to the end of an address. If you are using a similar method to cloak your affiliate links, please share!