Народ, всем привет. В последнее время все большую популярность стали приобретать блокировщики рекламы, которые призваны избавить нас от назойливых баннеров, рекламных вставок, попап-окон и прочего, что мелькает по краям, в центре сайта или просто вылетает на весь экран прямо посередине интересной статьи. При этом есть сайты с более-менее адекватным расположением и количеством этой самой рекламы, и в том нет ничего плохого. Все же реклама – это деньги владельца сайта, это его награда за контент и прочее. Другой вопрос, что иногда с перебором, всякие браузеры, реклама казино и че там только нет еще.
И сегодня я хочу на пальцах примерно рассказать, как работают такие блокировщики рекламы, что с одной стороны будет интересно для общего развития, если вы хоть немного понимаете что-то в HTML, JS, что такое DOM-дерево. Так и для самих владельцев сайтов, ведь это непрекращающаяся война между ними и блокировщиками, ведь блокируется все без разора. А зарабатывать тоже хочется. Даже Гугл ведет свою тайную войну с ними. И чтобы быть профессиональным разработчиком, надо хотя бы понимать на базовом уровне, как они устроены. Итак, погнали.
Какая реклама бывает
Вообще, основные виды рекламных элементов, именно не прописанных в тексте, а вот таких всплывашек, это попапы, попандеры, баннеры и видеореклама.
Попапы (pop-up) — это то, что всплывает поверх контента, который мы смотрим: формы с просьбой подписаться или просто реклама, которая мешает нам читать. Часто бывает на сайтах с просмотром фильмов.
Попандеры (pop-under) — это когда во время просмотра (или сразу после загрузки контента) у нас открывается новое окно браузера с рекламной страницей. На торрент сайтах такое часто бывает.
Видеореклама — это вставки внутри контента с рекламными роликами, как обычные баннеры, только видео.
Все это для программиста – рекламный блок, который надо вставить в HTML страницу. Ну или же подгрузить в dom‑дерево при помощи JS динамически, что в итоге все равно станет HTML кодом. И такие блоки часто имеют стандартные идентификаторы или классы, например ad-banner, sidebar-ads или что-то похожее, имеющее слово ad в имени. Понятное дело, что можно и не пописывать такие названия, или даже делать их динамическими (например, через CSS модули), но вы не поверите, как часто все идет по стандарту, ведь блок дает рекламодатель, и он для всех один. Редко кто прописывает рекламу в момент создания сайта.
Также рекламу часто помещают в элемент <iframe>, который ведёт себя как отдельное окно браузера внутри страницы. Такой элемент изолирует рекламный контент от основного содержимого сайта. Плюс используют еще теневой DOM, отдельные стили и ветку страницы, которой потом просто заменят оригинал при помощи скриптов. Такую рекламу труднее отследить, но о таких более сложных технологиях я вас грузить не буду.
Кстати, Вам может быть это интересно:
Как работает блокировщик
И, по сути, все что делает блокировщик рекламы, это накладывает определённые фильтры, прописанные в нем, на HTML страницу (или код скрипта, или даже на CSS файл). А дальше по этим фильтрам он «выключает рекламу». Все что мы описали выше, это основы, которые и ищут блокировщик. Если говорить простыми словами, то суть проста:
- разработчики блокировщика собирают много-много страниц с разной рекламой и анализируют их
- после анализа они разделяют размещаемую рекламу по разным признакам: одна прячется внутри блоков с ad в названии, другая — в блоках со стандартными баннерными размерами, третья — ещё как-то и так далее;
- после этого они составляют документ — правила для блокировщика, с которыми он сверяется чтобы понять, перед ним реклама или нет;
- если то, что видит блокировщик, подпадает под описание из документа, блокировщик это скрывает и не показывает пользователю;
Как вы видите, все довольно просто. И даже, грубо говоря, если блокировщик видит на странице скажем, элемент с прописанным style="height:90px; width:728px;", то такой элемент может представлять собой стандартный горизонтальный рекламный баннер и просто блокирует его. Иногда под горячую руку блокировщика попадают и полезные элементы статьи, но это уже издержки фильтрации, так сказать. Тут нельзя предугадать, и пусть блокировщики становятся все умнее и умнее, но всё-таки все блокировать точно не получиться, как и могут возникнуть проблемы с показами хорошего контента.
А как же он блокирует?
Хороший вопрос, а все на самом деле еще проще. Блокировщик просто прописывает стиль для этого рекламного элемента display: none !important. Для тех, кто не сильно в теме, он просто скрывает это элемент при помощи стиля, и ставит ему наиважнейший статус среди других стилей, прописанных ему изначально разработчиком. Также применяются особые классы, и прочее, чтобы обойти JS теневые DOM-деревья, но это уже ненужное углубление.
Также, блокировщик может заблокировать запрос на сторонний сервер, если реклама подгружается извне, а не просто в лоб прописана на сайте. Там идет фильтрация от URL- запросов, которые также обладают своими признаками.
При этом, само собой, владельцы сайтов борются с блокировщиками, находят лазейки, изменяют тэги, стили, адреса, все, чтобы блокировщик не «запалил». Но больше всего нерадивые владельцы любят ставить простой блок на весь сайт. То есть он просто может ограничить доступ к контенту при обнаружении блокировщика. Типа – «невозможно отобразить контент, возможно, у вас работает блокировщик рекламы, который мешает нормальной работе сайта». Пользователю придётся отключить блокировщик, чтобы открыть нужную ему страницу.
