Front-end and ad blockers (for example, Adblock Plus)
I want to share some experience with ad blockers by a front-end developer. Everyone understands that our task is to make the site work normally and look at any user settings, on any devices. I sometimes look constantly checking how the site looks when javascript is disabled, I check the work on touch-devices, devices with low resolution and so on. etc. Once the video player stopped working on our site due to Adblock Plus (hereinafter simply Adblock), it became clear that the presence of an ad blocker should also be taken into account when imposing a site ...
Once, letters about a non-working video player fell to our support service.At long lasting method , it was found that Adblock blocks Yandex video ads that are shown in front of our videos. There was no such rudeness of exclusion in the player - therefore, with the blocker turned on, instead of the video clip, the preloader was constantly spinning.
The first question is how many such users are. The survey on Habré showed sad data. On our site, the Yandex metric showed more than 8% of users with a blocker enabled.
I think the real figure is much higher (for example, well-known metrics can also be blocked), but the available data turned out to be enough to install a blocker and look at the site afterremoving the rose-colored glasses again.
')
It turns out that, in addition to well-known advertising services (Google, Yandex), some of our pictures and blocks were cut out, and not all are related to advertisements.
I had to repair. It turned out, the blocker cuts all the pictures, in the paths of which there is mention of advertising: / ad / banner /. In addition to the paths, Adblock can cut the contents by the id attribute (adblock, AdDiv, etc.), the name of the classes (Adv, etc.), the very name of the pictures (728x90.png, etc.), styles. There are a lot of names, but you can see everything in files with standard blocker filters:
easylist-downloads.adblockplus.org/easylist.txt
easylist-downloads.adblockplus.org/antiadblockfilters.txt
Renaming everything that can be done Having replaced the usual ad with another name, I was pleased to find that all our ad units appeared on the site again and my layout has the same appearance, with Adblock and without it. Feeling proud for the work done, I began to do my usual things again.
Less than a month ago, I found that themost annoying most important advertising for us was again blocked. I placed such advertising separately, in the illumination folder.
In addition to standard filters, Adblock has subscriptions - these are the same text lists of ready-made filters that can be created by many authors; they are built into the extension and the user can choose the ones he needs. In the standard subscription list:
easylist-downloads.adblockplus.org/ruadlist+easylist.txt
I found this line:
/illumination/$script,stylesheet,domain=kinoafisha.info|kinoafisha.msk.ru|kinoafisha.spb.ru
It became clear that the advertisement bothered users and we were added to the list of subscriptions.
Then there were two ways to solve the problem:
1. Continue to fight Adblock, periodically changing the name, coming up with other ways to bypass the blocker
2. Put up with the situation and think about an alternative solution.
On the example of Facebook’s fight against Adblock , and on its own example, it was clear that the struggle would last forever and in any case would be the blocker - he would do his direct business, and you, instead of developing the site, would fight the wind turbines mills.
But we could not refuse to show advertising - we are not an online store, we do not sell any articles, we work honestly and display advertising on the site - this is our main source of income. Without it, our normal existence and development is impossible. Even Habr is forced to show ads, explaining this need very well - habrahabr.ru/adblock
As a result, it was decided: to try to determine the presence of a blocker and show such a sad cat to such users. At the same time, the cat should not be in some kind of hellish popup or constantly occupy a half-screen - otherwise, he himself will soon fall into the blocker and / or lead to an outflow of visitors. It is enough to do so to pay attention to him, his main goal was toput pressure on the pity to explain to the user the need for advertising. As a result, a regular block with the following content appeared at the top of the site:
It remained to find out how to determine whether the ad blocker is enabled or not. The first thing that came to mind was to insert an element in the markup that exactly fits the standard filter and check its presence using js. If the item is not present, then the adblock is enabled. In fact, it turned out to be a little more complicated. Despite the fact that advertising is not visible on the site - the ad unit is in the DOM-tree and it is not enough to determine its presence. It is necessary that the element has dimensions, it would not be “thrown out” from the stream (that is, without display: none) and if the element has zero width, then it is blocked:
It is possible that after some time Adblock will come up with something else or add this code to the filter, and this check will stop working, but at the time of writing the article the cat on the site appears regularly.
There is another opportunity to leave ad units on the page - Adblock has a so-called white list of unobtrusive ads where small sites can get for free. More can be found on Habré:
habrahabr.ru/post/299000
habrahabr.ru/post/185786
I can’t advise anything here - we didn’t try to get on this list, it’s quite possible that I can finish writing something substantial later.
Thank you for reading to these lines, if I could convince any of the front-end developers to look at the work of the site with the blocker turned on - it would be nice. Just do not forget to turn it off - otherwise you can deprive yourself of salary). As for how much the cat helped in the display of ad units - until I can say, we set it up two days ago. If someone is interested - in a month, I can probably drop the number.
Once, letters about a non-working video player fell to our support service.
The first question is how many such users are. The survey on Habré showed sad data. On our site, the Yandex metric showed more than 8% of users with a blocker enabled.
Watch
I think the real figure is much higher (for example, well-known metrics can also be blocked), but the available data turned out to be enough to install a blocker and look at the site after
')
It turns out that, in addition to well-known advertising services (Google, Yandex), some of our pictures and blocks were cut out, and not all are related to advertisements.
I had to repair. It turned out, the blocker cuts all the pictures, in the paths of which there is mention of advertising: / ad / banner /. In addition to the paths, Adblock can cut the contents by the id attribute (adblock, AdDiv, etc.), the name of the classes (Adv, etc.), the very name of the pictures (728x90.png, etc.), styles. There are a lot of names, but you can see everything in files with standard blocker filters:
easylist-downloads.adblockplus.org/easylist.txt
easylist-downloads.adblockplus.org/antiadblockfilters.txt
Less than a month ago, I found that the
In addition to standard filters, Adblock has subscriptions - these are the same text lists of ready-made filters that can be created by many authors; they are built into the extension and the user can choose the ones he needs. In the standard subscription list:
easylist-downloads.adblockplus.org/ruadlist+easylist.txt
I found this line:
/illumination/$script,stylesheet,domain=kinoafisha.info|kinoafisha.msk.ru|kinoafisha.spb.ru
It became clear that the advertisement bothered users and we were added to the list of subscriptions.
Then there were two ways to solve the problem:
1. Continue to fight Adblock, periodically changing the name, coming up with other ways to bypass the blocker
2. Put up with the situation and think about an alternative solution.
On the example of Facebook’s fight against Adblock , and on its own example, it was clear that the struggle would last forever and in any case would be the blocker - he would do his direct business, and you, instead of developing the site, would fight the wind turbines mills.
But we could not refuse to show advertising - we are not an online store, we do not sell any articles, we work honestly and display advertising on the site - this is our main source of income. Without it, our normal existence and development is impossible. Even Habr is forced to show ads, explaining this need very well - habrahabr.ru/adblock
As a result, it was decided: to try to determine the presence of a blocker and show such a sad cat to such users. At the same time, the cat should not be in some kind of hellish popup or constantly occupy a half-screen - otherwise, he himself will soon fall into the blocker and / or lead to an outflow of visitors. It is enough to do so to pay attention to him, his main goal was to
It remained to find out how to determine whether the ad blocker is enabled or not. The first thing that came to mind was to insert an element in the markup that exactly fits the standard filter and check its presence using js. If the item is not present, then the adblock is enabled. In fact, it turned out to be a little more complicated. Despite the fact that advertising is not visible on the site - the ad unit is in the DOM-tree and it is not enough to determine its presence. It is necessary that the element has dimensions, it would not be “thrown out” from the stream (that is, without display: none) and if the element has zero width, then it is blocked:
View code
<!DOCTYPE html> <html class="no-js" lang="ru"> <head> <meta charset="utf-8"> <title> Adblock</title> <style> .px { visibility:hidden; position:absolute; left:-9999px; top:-9999px; display:block; width:1px; height:1px; overflow:hidden; } </style> </head> <body> <div id="adblock" class="px"></div> <script> document.addEventListener("DOMContentLoaded", function(){ var box = document.getElementById('adblock'); if(!box.getBoundingClientRect().width) alert('Adblock '); else alert('Adblock '); }); </script> </body> </html> It is possible that after some time Adblock will come up with something else or add this code to the filter, and this check will stop working, but at the time of writing the article the cat on the site appears regularly.
There is another opportunity to leave ad units on the page - Adblock has a so-called white list of unobtrusive ads where small sites can get for free. More can be found on Habré:
habrahabr.ru/post/299000
habrahabr.ru/post/185786
I can’t advise anything here - we didn’t try to get on this list, it’s quite possible that I can finish writing something substantial later.
Thank you for reading to these lines, if I could convince any of the front-end developers to look at the work of the site with the blocker turned on - it would be nice. Just do not forget to turn it off - otherwise you can deprive yourself of salary). As for how much the cat helped in the display of ad units - until I can say, we set it up two days ago. If someone is interested - in a month, I can probably drop the number.
Source: https://habr.com/ru/post/316676/
All Articles