Front-end и блокировщики рекламы (на примере Adblock Plus)

от автора

Хочу поделиться небольшим опытом работы с блокировщиками рекламы со стороны 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/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *