Хочу поделиться небольшим опытом работы с блокировщиками рекламы со стороны front-end разработчика. Все понимают, что наша задача сделать так, чтобы сайт нормально работал и выглядел при любых настройках пользователя, на любых устройствах. Я иногда посматриваю постоянно проверяю как выглядит сайт при отключенном javascript, проверяю работу на touch-устройствах, устройствах с маленьким разрешением итд. итп. После того, как у нас на сайте из-за Adblock Plus (далее по тексту просто Adblock) перестал работать видео-плеер — стало понятно, что наличие блокировщика рекламы также нужно учитывать при верстке сайта…
Однажды к нам в службу поддержки посыпались письма о неработающем видео-плеере. Методом тыка Путем долгих изысканий было установлено, что Adblock блокирует яндекс видео-рекламу, которая показывается у нас перед роликами. Такого хамства исключения в плеере не было предусмотрено — поэтому при включенном блокировщике, вместо ролика, постоянно крутился прелоадер.
Первый вопрос — а сколько вообще таких юзеров. Опрос на хабре показал печальные данные. На нашем сайте (kinoafisha.info) яндекс-метрика показала более 8% пользователей с включенным блокировщиком.
Думаю, реальная цифра гораздо выше (например, известные метрики так же могут блокироваться), но и имеющихся данных оказалось достаточно, чтобы установить блокировщик и взглянуть на сайт сняв розовые очки еще раз.
Оказывается, помимо общеизвестных сервисов рекламы (гугл, яндекс) были вырезаны и некоторые наши картинки и блоки, причем не все связанные с рекламными объявлениями.
Пришлось чинить. Выяснилось, блокировщик режет все картинки, в путях которых содержится упоминание о рекламе: /ad/banner/. Кроме путей, Adblock может резать содержимое по атрибуту id (adblock, AdDiv итд), названию классов(Adv итд), самому названию картинок (728×90.png итд), стилям. Названий очень много, но все можно посмотреть в файлах со стандартными фильтрами блокировщика:
easylist-downloads.adblockplus.org/easylist.txt
easylist-downloads.adblockplus.org/antiadblockfilters.txt
Переименовав все, что только можно Заменив привычное мне ad на другое название, я с удовлетворением обнаружил, что все наши рекламные блоки вновь появились на сайте и моя верстка имеет одинаковый вид, с Adblock и без него. Ощущая гордость за проделанную работу, я стал вновь заниматься привычными делами.
Менее, чем рез месяц, я обнаружил, что самая назойливая наиболее важная для нас реклама опять заблокирована. Такую рекламу я расположил отдельно, в папке illumination.
Помимо стандартных фильтров, Adblock имеет подписки — это те же текстовые списки готовых фильтров, которые могут создаваться многими авторами; они встроены в расширение и пользователь может сам выбрать нужные ему. В списке стандартной подписки:
easylist-downloads.adblockplus.org/ruadlist+easylist.txt
я обнаружил такую строчку:
/illumination/$script,stylesheet,domain=kinoafisha.info|kinoafisha.msk.ru|kinoafisha.spb.ru
Стало понятно, что реклама надоела пользователям и нас добавили уже в список подписки.
Дальше было два пути решения проблемы:
1. Продолжать бороться с Adblock, периодически меняя названия, придумывая другие способы обхода блокировщика
2. Смириться с положением дел и подумать над альтернативным решением.
На примере борьбы Facebook с Adblock, да и на собственном примере, было понятно, что борьба будет длиться бесконечно и в любом случае будет вести блокировщик — он будет заниматься своим прямым делом, а ты, вместо того, чтобы развивать сайт, — бороться с ветряными мельницами.
Но и отказаться от показа рекламы мы не могли — мы не интернет магазин, мы не продаем никакие статьи, работаем честно и показ рекламы на сайте — это наш основной источник дохода. Без нее невозможно наше нормальное существование и развитие. Даже хабр вынужден показывать рекламу, очень хорошо объясняя эту необходимость — habrahabr.ru/adblock
В итоге было решено: попробовать определять наличие блокировщика и показывать таким пользователям грустного котика. При этом котик не должен быть в каком-то адском попапе или постоянно занимать пол-экрана — в противном случае он сам скоро попадет в блокировщик и/или приведет к оттоку посетителей. Достаточно сделать так, чтобы на него обратили внимание, его главной целью было надавить на жалость объяснить пользователю необходимость показа рекламы. В результате наверху сайта появился обычный блок с таким вот содержимым:
Оставалось выяснить, как определить включен или нет блокировщик рекламы. Первое, что приходило на ум — это вставить в разметку элемент который точно подпадает под стандартный фильтр и проверять средствами js его наличие. Если элемента нет — значит адблок включен. На деле оказалось все немного сложнее. Несмотря на то, что рекламы не видно на сайте — рекламный блок есть в DOM-дереве и определять его наличие недостаточно. Необходимо, чтобы у элемента были размеры, он не был бы «выкинут» из потока (то есть без display:none) и если у элемента нулевая ширина — значит он заблочен:
<!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>
Вполне возможно, что через некоторое время Adblock придумает что-то другое или добавит этот код в фильтр, и данная проверка перестанет работать, но на момент написания статьи котик на сайте исправно появляется.
Существует еще одна возможность оставить рекламные блоки на странице — У Adblock есть так называемый белый список ненавязчивой рекламы, куда небольшие сайты могут попасть бесплатно. Подробнее можно найти на хабре:
habrahabr.ru/post/299000
habrahabr.ru/post/185786
Здесь посоветовать ничего не могу — мы не пробовали попасть в этот список, вполне возможно чуть попозже смогу дописать что-нибудь существенное.
Спасибо, что дочитали до этих строк, если я смог убедить кого-нибудь из front-end разработчиков посматривать на работу сайта с включенным блокировщиком — это будет приятно. Только не забывайте его отключать — а то можете лишить себя зарплаты ). Что касается того, насколько котик помог в показе рекламных блоков — пока не могу сказать, мы поставили его два дня назад. Если кому-то интересно — через месяц, наверное, смогу скинуть цифру.
ссылка на оригинал статьи https://habrahabr.ru/post/316676/
Добавить комментарий