How to Show Affiliate Ads as AdBlock Alternative Content
It is time to show some affiliate ads to AdBlock enable users rather than showing normal Adsense ads.
AdBlock, one of the most hateful tools to all the bloggers and webmasters around the world as it keeps getting bigger and acquiring more users every single day.
As per a statistical report published by PageFair Limited on September 9, 2014, there are about 144 million active adblocking software users around the world.
The usage of AdBlockers on the internet has been growing by nearly 70% between June 2013 – June 2014.
It has been seen that the AdBlock usage growth is highest for Google Chrome (the world’s most popular internet browser) and Adblock growth driven by Google Chrome is nearly doubled in last one year.
It has also been seen that AdBlock usage is mostly driven by young internet users. Almost 41% of 18 – 29 years old people are using Adblock right now on their browser and this usage is on a high rise.
So, I hope you can clearly see that in the near future when almost 80% – 90% of your website or blog readers will be visiting your site by installing AdBlock on their browser.
Now, this brings us to the most important question – How should we monetize our websites and blogs then? Without monetization the Open Source concept is dead. This is very much true.
Some internet users think that website owner put advertisements on their site to be rich, but in reality, they do it to fund their website instead.
Some, who does support AdBlock concept, argue that it’s better to put a “Donation” button than monetize sites with ads.
But again in real life, very few people actually donate for the works bloggers do every day. People like free kinds of stuff but not supporting the authors.
What’s the future then?
Well, as we see the exceptional growth of AdBlocker usage, it clearly shows that in near future most blogger won’t be able to afford the domain, hosting and other website maintenance cost and in the end, they start losing interest in it and stop blogging.As a result, the whole internet community is going to run out of fresh open source free content. Just like newspapers, people have to pay monthly fees to subscribe to blogs and to read their posts.
Here is an awesome presentation by PageFair about the massive increase of AdBlock usage in the past year.
What about AdBlock alternative?
As I said earlier on my other post about how AdSense account gets blocked by the misuse of Adblock alternative content that if you ask your readers to disable AdBlock for your site that is actually a violation of AdSense policies.And as we all know that they are very strict about it, so they will disable your AdSense account anytime they want, without paying you any money at all.
I’ve also mentioned in the article that the smartest way to show AdBlock alternative content is by saying nothing related to the ad and by showing Affiliate Ads for AdBlock enabled users.
How to show affiliate ads as AdBlock alternative?
Well, if you surf on the web, you will see that many bloggers have shared some code snippet to do that trick.But the trick which is mostly available on the web is not the right way to do it mostly because it manipulates the provided Adsense code, which is again against Google Adsense policy.
Also, the most available code snippet on the web will only work for the Asynchronous version of Adsense code, not for the synchronous version of it.
This was really annoying so I wrote my own code from the scratch with a very different implementation approach which I’m going to share below in this post.
This code snippet is written by using jQuery and if you are a WordPress user, you don’t have to add jQuery separately as WordPress already comes with jQuery library preloaded.
What you have to do is to understand the exact positions where you need to make the changes in the given code and then copy the code and paste it in your site with your own affiliate ad codes.
With this code snippet, you can create your own affiliate ad stack and then show affiliate banner ads randomly for AdBlock enabled users. So, let’s get started.
Prerequisite
- Go to your affiliate sites and copy the banner ad code you want to use.
- Paste the code into a notepad and copy the image URL (src attribute of img tag) and open it in your browser. (e.g. http://example.com/ad.jpg” />)
- Save the image in your computer with a random name (e.g. QtgYulk.jpg)
- Now upload the randomly named image file into your server (or media library of WP dashboard).
- Copy the newly uploaded file URL and replace the existing URL of your banner ad code (you’ve copied earlier) with the new uploaded URL.
- Add <div class="ad-affiliate"> before placing your ad code copied from Adsense and at last close the div.
<div class="ad-affiliate"> <!-- Start the div affiliate -->
<!-- Your Adsense code starts here-->
<!-- Your Adsense code ends here-->
</div>
The above steps are must be needed otherwise AdBlock is going to block your affiliate ads too, as AdBlock is a very sophisticated extension which blocks files if it has names with “ad” or any kind of ad size (300×250) embedded into it.
So, now it’s time for the actual alternative code. Also without the div, the alternative content won’t gonna work. So, now its time to check the code.
The Magic Code (the name given by me )
//creating Ad array to show randomly (300x250)
var adArray = [];
//----------------------------------------------------------
//---------- RANDOM AD ARRAY --------- ---------------------
//----------------------------------------------------------
//Add affiliate ad code into the stack
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
// Now show the affiliate ad when AdBlock is enabled.
jQuery(function ($) {
if ($(".ad-affiliate").height() === 0) {
$(".ad-affiliate").html(adArray[Math.floor(adArray.length * Math.random())]);
}
});
var adArray = [];
//----------------------------------------------------------
//---------- RANDOM AD ARRAY --------- ---------------------
//----------------------------------------------------------
//Add affiliate ad code into the stack
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
adArray.push( '<a href="http://affiliate.example.com?uth=example" target="_blank" rel="nofollow"><img src="your image url" alt="Something" width="300" height="250" /></a>' );
// Now show the affiliate ad when AdBlock is enabled.
jQuery(function ($) {
if ($(".ad-affiliate").height() === 0) {
$(".ad-affiliate").html(adArray[Math.floor(adArray.length * Math.random())]);
}
});
Please do not share or showcase the above codes in any other blog post or website without prior permission from the author.
Why can’t people just disable AdBlock?
Well, the web is not as beautiful as we think off it in our dreams. Most of the websites on the web run from copying content from other sites or sharing pirated contents and many other nasty kinds of stuff.So these guys never get approval from Adsense to show ads on their site and they end up showing garbage annoying animated, music or popup ads on their site just for few penny. So, people get frustrated with these sites and install AdBlock globally.
Most AdBlock users don’t even know how to whitelist a specific website or blog or domain on their adblocker. So, for the annoyingness of a few ad agencies and webmasters, the whole web pays its price.
Is showing alternate content is a good idea?
Well, if you ask me as a professional experienced webmaster, I will say NO. It degrades the user experience of your website.If a user already installed AdBlocker on his/her browser, then he/she definitely don’t wanna see any ads for sure.
But with showing alternative affiliate ads you are technically blocking their freewill of using the web.
Also even if you force these users to see affiliate banner ads on your content, they will rarely click on it and make a purchase.
But still, it is worth doing, even if the conversion probability is 1% because you need to fund your website for various maintenance cost, server cost, etc.
Doesn’t big corporate face losses due to this?
Companies like Google, Amazon, Microsoft uses their advertisement medium as their primary source of money for their business.Google AdWords is the system which bags most of the revenue Google earns every year.
But hey, these are big corporates with billion dollars funding and recently Google, Microsoft, Amazon, and Taboola are paying a hefty amount of money to Adblock Plus developer team to whitelist their websites by default in the Adblock plugin.
So in future updates, these websites will still show ads even if adblocker is installed and will keep earning billions of dollars, but for you and me, still, the general rule applies.
Does this work for Adsense only?
Not at all. I’ve written this code with a very generalist approach so that it works with every kind of ad code.Whether it is Adsense or any other ad agency, this ad code will work flawlessly without any issues.
So, enjoy every bit of it regardless of what ad medium you use to monetize your website?
But make sure, the above code is made for banner ads only, not for any kind of annoying popup ads.
What about support?
As you see that this is a completely free blog post and I’m not selling anything to you, so please understand that there is no warranty or support involved in this.Though I’ll try my best to reply as many comments as possible related to minor problem or issues.
But any comment or request related to modifying or upgrading that code will not be entertained for free.
Sorry guys. But again, I’ll try my best to help as many people as I can.
Conclusion
Tough showing AdBlock alternative content will technically degrade user experience in your site, but if you still want to show it for much possible reason, make sure you do it smartly and don’t make any mistakes.I will definitely suggest you read how AdBlock alternative content can block your AdSense account to know more about Google policies regarding AdBlock alternative content.
Even if you get 1% conversion from these affiliate ad banners, it is still better than nothing. Isn’t it?