Front-end и блокировщики рекламы (на примере Adblock Plus)
Однажды к нам в службу поддержки посыпались письма о неработающем видео-плеере. Методом тыка Путем долгих изысканий было установлено, что 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) и если у элемента нулевая ширина — значит он заблочен:
Определение Adblock
Вполне возможно, что через некоторое время Adblock придумает что-то другое или добавит этот код в фильтр, и данная проверка перестанет работать, но на момент написания статьи котик на сайте исправно появляется.
Существует еще одна возможность оставить рекламные блоки на странице — У Adblock есть так называемый белый список ненавязчивой рекламы, куда небольшие сайты могут попасть бесплатно. Подробнее можно найти на хабре:
habrahabr.ru/post/299000
habrahabr.ru/post/185786
Здесь посоветовать ничего не могу — мы не пробовали попасть в этот список, вполне возможно чуть попозже смогу дописать что-нибудь существенное.
Спасибо, что дочитали до этих строк, если я смог убедить кого-нибудь из front-end разработчиков посматривать на работу сайта с включенным блокировщиком — это будет приятно. Только не забывайте его отключать —, а то можете лишить себя зарплаты). Что касается того, насколько котик помог в показе рекламных блоков — пока не могу сказать, мы поставили его два дня назад. Если кому-то интересно — через месяц, наверное, смогу скинуть цифру.
Комментарии (25)
2 декабря 2016 в 08:32
+3↑
↓
Котик — это менее назойливо, чем реклама. Однако он точно так-же улетит под фильтр, потому что занимает кучу места. Вообще не очень понятно, исходя из чего порой верстают страницы так, что полезная инфа занимает там примерно треть пространства. Как пример — xaker.ru, где абсолютно бесполезная картинка (не реклама!) тупо занимает 80% верха страницы! За её анимацию авторам отдельное спасибо.2 декабря 2016 в 08:45
0↑
↓
Улетит или нет — будет зависеть от пользователей, (судя по вашему коменту — улетит)), но то, что занимает много места — это однозначно. К сожалению, не все зависит от меня, мы еле еле уговорили руководство не делать его положение фиксированным
GennPen
2 декабря 2016 в 08:52
+1↑
↓
На некоторых сайтах (overclockers.ru например) подобный котик вообще блокирует весь просмотр содержимого. После этого пропадает любое желание возвращаться на сайт.2 декабря 2016 в 09:02
0↑
↓
Ну на самом деле на некоторых сайтах просмотр блокируется из-за криворукости авторов. Попадался сайт (не помню название, что-то компьютерной тематики в рунете) где всё содержимое форума генерится скриптом. Т.е. вообще всё. Без скриптов форум просто не показывается. Однако скрипты нужны не для рекламы, а просто чтобы добавить туда возможность по выделению любого фрагмента отправить сообщение об ошибке. Однако есть люди (вроде меня) которым просто удобно выделать читаемый кусок текста (особенно когда сплошного текста очень очень много) чтобы не теряться в нём. В итоге когда волею поисковика туда заносит — приходится включать скрипты, загружать страницу и отключать их, чтобы спокойно почитать. И так каждую страницу. :(
2 декабря 2016 в 08:42
0↑
↓
uBlock Origin + uMatrix + Disconnect котик поначалу не появлялся, но через несколько переходов по сайту вылез.2 декабря 2016 в 08:49
0↑
↓
C включенным NoScript’ом котик не показывается2 декабря 2016 в 09:10
–1↑
↓
После того, как у нас на сайте из-за Adblock Plus (далее по тексту просто Adblock) перестал работать видео-плеер — стало понятно, что наличие блокировщика рекламы также нужно учитывать при верстке сайта…
Может, надо было оставить всё, как есть? Раз сама энтропия на вашей стороне? Пусть производители блокировщиков заботятся, чтобы из-за них ничего не ломалось.
4dmonster
2 декабря 2016 в 10:38
0↑
↓
Вы реально думаете, что кому-то нужен сайт, где для просмотра трейлера к фильму нужно смотреть рекламу?
Пользователи меняют сайты, если для просмотра самого фильма нужно послушать про джойказино.И что-то сомневаюсь, что зомбы, кишки и кровища — подходящий банер для странички детского мультика.
2 декабря 2016 в 10:53
0↑
↓
Так реально думают, надо полагать, создатели сайта, раз они сделали его так, что для просмотра трейлера нужно посмотреть рекламу. При чём тут то, что я думаю — конкретно я вырезал, вырезаю и буду вырезать всю рекламу и все слёзные просьбы не вырезать рекламу, но вот как-то и в голову не приходило, что при этом можно требовать от сайтовладельцев решать проблемы, которые у меня из-за этого могут возникать.-
4dmonster
2 декабря 2016 в 11:05
0↑
↓
Тогда, как мне кажется, вы неверно выбрали абзац для цитирования. И смысл первого коментария воспринимается в искажённом виде.
776166
2 декабря 2016 в 09:17
–6↑
↓
Эта музыка будет вечной. Проблема в том, что нет никакой принципиальной возможности договориться о том, какая реклама хорошая, а какая плохая. Создавать стандарты не получится и следовать им тоже. Опыт с тем, какой квадратуры должны быть баннеры не проканал.Более того, всегда найдётся часть моральных уродов, которые не захотят никакой рекламы в вообще, потому что им глубочайше плевать на всех, кроме себя.
В моём понимании, пользователей с адблоком надо блочить, но не котиком, а вообще не отдавать контент. А с адблоками бороться на судебном уровне. Открывая сайт пользователь как бы соглашается с офертой сайта: сайт пользователю контент, пользователь за это смотрит рекламу. Адблокеры этот договор нарушают, адблок (софт) в этом помогает. Поэтому эти деятели идут в жопу стройными рядами.
2 декабря 2016 в 09:28
+3↑
↓
Полегче с такими заявлениями. Суды уже подтверждали правомерность адблока раз, два. А т.к. даже сайты с уникальным контентом, поворачиваясь задом к клиентам, оставались без трафика, страшно предположить, что такого особенного ваш ресурс предлагал.-
4dmonster
2 декабря 2016 в 09:47
0↑
↓
Проблема в том, что нет никакой принципиальной возможности договориться о том, какая реклама хорошая, а какая плохая.
Как это невозможно? Вот пожалуйста: незаконное, лохотроны, порнуха, заведомый обман, попапы.В моём понимании, пользователей с адблоком надо блочить, но не котиком, а вообще не отдавать контент.
Да это, конечно, вариант борьбы с блокировщиками… и с самим сайтом.Открывая сайт пользователь как бы соглашается с офертой сайта: сайт пользователю контент, пользователь за это смотрит рекламу.
Такая модель бизнеса есть, и она живёт в некоторых областях и нишах. Но вы забываете, что теперь время «веб 2.0» и пользователи генерируют контент. Где это учтено в вашем предложении? Почему вы собрались делиться с пользователем только расходами, делите с ним и выручку.2 декабря 2016 в 12:03
0↑
↓
Договориться не только можно, но и легко. Берем фейсбук, или любой другой сайт, видим в ленте/на странице рекламу. Нажимаем кнопочку, и сообщаем им, что реклама их — отстой.Не потому что она незаконная или порнуха, а просто — отстой и все. И так повторяем до тех пор, пока они не научатся реально учитывать именно наши интересы, а не рекламировать всякий хлам, о котором они подумали, что он мне понравится.
2 декабря 2016 в 09:48
+1↑
↓
>моральных уродов, которые не захотят никакой рекламы в вообще
Ну ничего себе…
>пользователей с адблоком надо блочить, но не котиком, а вообще не отдавать контент
Вперёд! И с песней! Кому от этого плохо станет?
>соглашается с офертой сайта
Что-то я не видел на (и уж тем более не подписывал) никаких договоров на сайтах.2 декабря 2016 в 12:00
0↑
↓
Публичный суицид?
Удался.-
776166
2 декабря 2016 в 12:29
–2↑
↓
Вообще пофигу. Кармадрочерством на хабре и в любых других местах не занимаюсь.Если люди не понимают элементарных вещей, связанных с рекламой, это их проблемы.
Пользователям почему-то можно отключать рекламу, и это хорошо, а сайтам почему-то с этим бороться нельзя, а в пределе они должны работать без рекламы, а как, это пользователей вообще не волнует. Молодцы, хорошо устроились. Так жалко пользователей, что я сейчас расплачусь. Жрать контент терабайтами (и зачастую не создавать его) они могут, а рекламу — зачастую единственный способ существования сайта, они посмотреть не могут, и сайты ещё виноваты, что жить хотят. Именно поэтому только жесткая оферта: контент в обмен на рекламу. Не согласен — соседний помоечный сайт без рекламы и без качественного контента, без качественной аудитории, за углом.Особенно доставляет этот феерический бизнес адблокеров, которые уже создали натуральную мафию и требуют нехилого бабла за исключение сайтов/рекламных систем из списка блокируемых. За такое в приличном обществе ноги заливают в таз с цементом, ибо это банальное криминальное вымогательство по схеме «наезд-откат-отъезд». Хочу дождаться первых убийств владельцев кампаний-адблокеров. Хотя бы одного, чтобы стало понятно, что к чему. Как правильно сказали: сайты должны заниматься борьбой с адблоками, что бы жить, вместо того что бы заниматься развитием самого сайта. Офигенный способ ведения бизнеса и вкладывания средств. Ибо если не бороться, то это аутоимунное антирекламное заболевание сожрёт всё. С другой стороны есть и откровенно говёная реклама, с которой тоже надо бороться. Но ситуация такая, что крайние опять площадки, что неправильно.
2 декабря 2016 в 12:37
0↑
↓
> В моём понимании, пользователей с адблоком надо блочить, но не котиком, а вообще не отдавать контент
Многие так и делают. Только тогда, я считаю, такие сайты нужно исключать из поисковиков. А то пользователь нашёл сайт по ключевым словам, пришёл за контентом, а ему показали фигу. Поисковики же индексируя контент рекламу не просматривают, будьте добры показывать людям тоже самое, что и отдаёте поисковым роботам. Не хотите не показывать — не надо, но тогда вон из поиска.
-
4dmonster
2 декабря 2016 в 10:05
0↑
↓
Что касается того, насколько котик помог в показе рекламных блоков — пока не могу сказать, мы поставили его два дня назад. Если кому-то интересно — через месяц, наверное, смогу скинуть цифру.
Будет очень интересно. Вот на пример, на хабре — я переодически (прочитав такие статьи) отключаю мюБлок, правда как только увижу неприемлемую рекламу сразу включаю обратно, до следующей статьи.2 декабря 2016 в 10:11
0↑
↓
Т.е. минут на 10 отключаете? :)-
4dmonster
2 декабря 2016 в 10:26
0↑
↓
Иногда и меньше. Т.к. яндекс хоть и таргетирует но, судя по всему, не премодерирует, объявления.
2 декабря 2016 в 11:45
0↑
↓
Совместно с uBlock origin просто можно использовать пользовательский стиль для сайта и тогда uBlock не чего будет блокировать.-
4dmonster
2 декабря 2016 в 11:50
0↑
↓
А какой в этом смысл? Что бы отключить блокировку — достаточно просто одного клика.
Кстати, сейчас иду на рекорд на хабре уже 2 часа реклама не отключена.2 декабря 2016 в 11:54
0↑
↓
Ну это побочное. Главная задача была ширину подправить и еще там по мелочи.
2 декабря 2016 в 12:39
+1↑
↓
У заказчика в шаблоне не отображались социальные иконки типа Twitter, Facebook и т.п. Все стили перепроверил вдоль и поперек пока на SO не посоветовали заказчику отключить Adblock. Казалось бы они там еще даже ссылок не было на социальные сервисы, просто иконки типа:
. После этого также взял себе на заметку проверять с/без Adblock.Twitter
