Front-end і блокувальники реклами (на прикладі Adblock Plus)

Хочу поділитися невеликим досвідом роботи з блокувальниками реклами з боку front-end розробника. Всі розуміють, що наше завдання зробити так, щоб сайт нормально працював і мав при будь-яких настроюваннях користувача, на будь-яких пристроях. Я іноді поглядаю постійно перевіряю, як виглядає сайт при відключеному javascript, перевіряю роботу на touch-пристроях, пристроях з маленьким дозволом ітд. ітп. Після того, як у нас на сайті через Adblock Plus (далі по тексту просто Adblock) перестав працювати відео-плеєр — стало зрозуміло, що наявність блокувальника реклами також потрібно враховувати при верстці сайту…

Одного разу до нас у службу підтримки посипалися листи про непрацюючому відео-плеєрі. Методом тику Шляхом довгих досліджень було встановлено, що Adblock блокує яндекс відео-рекламу, яка показується в нас перед роликами. Такого хамства виключення в плеєрі не було передбачено, тому при включеному блокировщике, замість ролика, постійно крутився прелоадер.

Перше питання — а скільки взагалі таких юзерів. Опитування на хабре показав сумні дані. На нашому сайтіkinoafisha.info) яндекс-метрика показала більше 8% користувачів з включеним блокувальником.
Дивитися

Думаю, реальна цифра набагато вище (наприклад, відомі метрики можуть блокуватися), але і наявних даних виявилося достатньо, щоб встановити блокувальник і поглянути на сайт знявши рожеві окуляри ще раз.

Виявляється, крім загальновідомих сервісів реклами (google, яндекс) були вирізані і деякі наші картинки і блоки, причому не всі пов'язані з рекламними оголошеннями.

Довелося лагодити. З'ясувалося, блокувальник ріже всі картинки, шляхи яких міститься згадка про рекламу: /ad/banner/. Крім шляхів, Adblock може різати вміст по атрибуту id (adblock, AdDiv ітд), назви класів(Adv ітд), самій назві картинок (728x90.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 розробників поглядати на роботу сайту з включеним блокувальником — це буде приємно. Тільки не забувайте його відключати — а то можете позбавити себе зарплати ). Що стосується того, наскільки котик допоміг в показі рекламних блоків — поки не можу сказати, що ми поставили його два дні тому. Якщо комусь цікаво — через місяць, напевно, зможу скинути цифру.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.