Really Useful Javascript – Adsense


by Dale Stubbart

Blocking Adblockers

Perhaps you have ads on your website, but aren&';t gaining any revenue from them. Perhaps you have affiliate links on your website but aren&';t gaining any revenue from them. Then you keep reading about adblockers. Are the adblockers blocking you from making money with your ads?
Adblockers are available as extensions in Chrome and Firefox browsers. Opera blocks ads without a browser. Microsoft Edge says it will also block ads soon. Why would people want to block ads?
Adblocker plus is the most popular adblocker extension, and I use it to block ads. Here&';s why. Many image ads jump around, which causes me to be distracted and not be able to focus on what I&';m trying to focus on. It also makes me nauseous, disoriented, and feel like I might have a seizure. Luckily, I don&';t have seizures. Besides, they&';re usually irrevelant to what I&';m interested in and there&';s no way I&';d even be interested in that product. I don&';t use ads on my website for these reasons.
On the other hand, I do use affiliate links on my website. For one thing, they pay better, when they pay. I make little if any money off them. But the content is relative to the webpage and I feel it&';s useful to my audience. And if I can make a few cents or dollars in the deal, why not? Adblocker plus usually does not block my affiliate links, but recently, I noticed them blocking a few and I decided to investigate.

Chrome and Firefox offer similar means to inspect your code. I use Chrome so I&';ll explain that process. If you use Firefox, you can Google how to inspect your code using that browser. I right-click where the affiliate image link should be but isn&';t. On the Console tab, I notice ERR-BLOCKED BY CLIENT it then tells me which affiliate links were blocked. On the Elements Tab, I notice that the style has been overridden with display:none !important; visibility:hidden !important; opacity:0 !important; I also notice that width="0" height="0" has been added to the image. I guess adblocker wasn&';t taking any chances. Just one of those styles or width="0" height="0" should have hidden the ad.
So, I can try and change the style back. If I do this, I should include a timeout to make sure the adblocker is done changing my page. First I need some mechanism to discover if the style has been changed. The internet proposes two methods for doing this. The first is to create an external javascript which the adblocker will block because it thinks it is trying to display ads. Naming the javascript run_ads.js or show_ads.js does the trick according to the posters. The javascript simply sets a variable to true. If the variable is undefined then the ads have been blocked. The second involves testing the styles through getComputedStyle after waiting 300 milliseconds or so. I think the first method has chances of not working. The second one involves a waiting period which will cause your website to display images after it&';s loaded which will probably make it look jerky.
By now, if you use and adblocker, you&';ve probably noticed websites complaining about you using an adblocker. They may require you to pay, ask you to turn off your adblocker, or request a donation. Apparently, enough people don&';t like websites telling them what to do, that adblock blocker blocker extensions have been created. These are called anti-adblock killers.
So, you can display a notice or try to redisplay your ads only to have the notice or the redisplayed ad undisplayed (hidden). I can just see this getting into a loop and your website never loading. And, you went and added all that code to your website. Not only that, how did you test it? Did you test it with ever adblocker extension and browser out there? Probably not. I&';m guessing not all adblockers work the same.

My simple solution was two-fold. First, I found out which affliate links were being blocked. Share-a-Sale, Aiso, and Green Geeks on this website. I&';m sure others were blocked on other sites. I did this by browsing my website on the internet. (If I test my website offline/locally, the ads are not blocked.) Then I inspect every page and see which console errors I have. That lets me know which pages and which affiliate links are affected. Then I fix those pages by 1) adding an affiliate text link. Sometimes the affiliate website provides one. When they don&';t I just replace the image part of the link with some relevant text. 2) Provide a place on that webpage for people to donate, so long as I&';m not wearing out my welcome by asking people to donate too often. For now, the text ads are showing in adblocker plus. Whether they show or not, some kind soul may decide to donate to help me continue this work.

Avantlink had the same issue and fix as Share-a-Sale. Amazon image links do not work. At first I thought this was solely a problem when using iframes. However, even after I converted the iframe to just be an image and a text link, they still didn&';t show up. Correction &n-; they didn&';t show up in Chrome. They show up in Firefox. Powell&';s Books images show up in both. Since many more people use Chrome than Firefox and since I prefer Powell&';s (they&';re an independent bookstore) to Amazon, I post links from Powell&';s when possible (they carry most, but not all titles).

Update 11/24/2017: I removed all ads and affliate links from my websites. They weren&';t earning me any money anyway. Perhaps if I spent the time to update them, but then I&';d be focusing on that, rather than on what I want to do. My new solution for blocking ads which gets around the ad block blockers is here: Ad Blocker.