Всплывающие сообщения с аудио сопровождением, анимированная реклама и сменяющиеся ленты на сайтах раздражают. Поэтому и разработчики браузеров предпринимают меры по блокированию ненужной информации, и пользователи. Но иногда с сайтом невозможно работать, если в web-обозревателе установлен плагин запрещающий вывод рекламы. Например, ресурсы для просмотра и скачивания фильмов и аудио. Выясним, что нужно предпринять, чтобы отключить блокировщик рекламы в популярных видах браузеров.

Инструкция для Яндекс.Браузер

В web-обозревателе предусмотрен встроенный функционал блокирования и пользовательские надстройки. Чтобы отключить запрет самого браузера, нужно перейти в меню «Управление». Оно вызывается копкой на панели инструментов справа вверху - иконка трех горизонтальных полосок. Отсюда нужно перейти в меню «Настройки», затем нажать кнопку «Показать дополнительные …». Здесь снять галочку напротив пункта в списке «Блокировать шокирующую рекламу».

Если при отладке работы обозревателя пользователь вносил дополнительные изменения, а именно устанавливал специальные плагины, то их тоже нужно отключить. Делают это так:

• Зайти в меню «Управление»;
• Выбрать «Дополнительные»;
• В новом окне напротив всех блокировщиков рекламы перетащить ползунок в сторону «Выкл.»;
• Сохранить изменения.

Для подтверждения действий Яндекс. Браузер лучше перезапустить. Некоторые приложения после обычного сохранения изменений могут не вступить в силу.

Инструкция для пользователей Google Chrome

Гугл также предполагает использование собственного и пользовательского функционала блокирования. Только в этом web-обозревателе встроенная безопасность действует для каждого сайта отдельно. Отключить ее несложно. Нужно открыть во вкладке обозревателя сайт, на котором нужно отменить защиту от рекламы. Затем слева в адресной строке найти значок замочка или английской буквы «i» в кружочке. Нажать на них и перейти по «Настройки сайта». Здесь в списке команд выбрать «Реклама» и в меню справа обозначить режим «Разрешить».

Если пользователь установил плагин защиты, то для отключения блокировщика в браузере Гугл нужно проделать следующее:

• Перейти в «Настройки и Управление» (значок троеточия справа вверху окна);
• Выбрать «Дополнительные инструменты»;
• Нажать на «Расширения»;
• Перетащить ползунок в положение «Выкл.» или удалить расширения запрещающие рекламу.

После внесения изменений в Google Chrome браузер обязательно нужно перегружать. Особенно если правки вносились во встроенный функционал.

Отключение Adblock в web-обозревателе Firefox

В самом браузере предусмотрено только блокирование всплывающих окон. Эта функция для каждого сайта, открываемого в Mozilla Firefox, установлена по умолчанию. Ее легко отключить. Нужно открыть окно обозревателя, перейти по «Открыть меню» (иконка с полосками в правом верхнем углу) и выбрать из списка «Настройки». В появившемся окне выбрать из списка слева «Приватность и защита». Здесь пролистать список вниз, и найти пункт «Разрешения». Убрать галочку напротив «Блокировать всплывающие окна».

Если в браузере есть вручную установленные плагины и расширения, тогда их отключают так:

• Перейти по «Открыть меню»;
• Выбрать из списка «Дополнения»;
• В новом окне из списка слева перейти в пункт «Расширения»;
• В блоке по центру окна найти все блокировщики и нажать «Отключить»;
• Перезагрузить Mozilla Firefox.

Мозила, как и в Google Chrome, предоставляет пользователю возможность устанавливать большой перечень расширений, отключающих рекламу. Поэтому нужно внимательно пересмотреть все в списке.

Инструкция при работе с браузером Opera

Разработчики Opera поступили немного иначе. В обозревателе предусмотрен встроенный мощный Ad-block и всплывающих окон, но он не активирован по умолчанию. Поэтому если пользователь не менял после установки настройки разработчика, то процедуру отключения встроенного функционала можно пропустить. Если правки вносились, тогда отменить их можно, перейдя в «Настройки и управления» (значок Оперы на панели сверху слева). Здесь выбрать «Настройки» и убрать галочку напротив первого пункта меню.

При ручной установке расширений их отмену выполняют так:

• Перейти в «Настройки и управления»;
• Найти и выбрать «Расширения»;
• Из нового списка снова выбрать «Расширения»;
• В появившемся блоке нажать кнопку «Отключить» под тем дополнением, которое запрещает рекламу;
• Перезагрузить Opera.

Все web-обозреватели предусматривают функцию отключения и удаления плагина. Если он разочаровал - пропускает всплывающие окна, убирает не всю рекламу и т.д., тогда его можно удалить. Вместо него поставить новое расширение. Но если нареканий нет, лучше выполнить временное отключение, чтобы в будущем не выполнять процедуру установки повторно.

Сегодня мы узнаем, как распознать факт того, что у человека присутствует включенный AdBlock или AdGuard и соответственно запретить ему просмотр web-сайта или какое-либо другое действие, например, скачивание файла. Не секрет, что сегодня почти у всех установлены в браузере фильтры интернет-рекламы. В некоторых браузерах, таких как Яндекс AdBlock идет уже в комплекте. Такие расширения блокируют рекламу в YouTube или на ваших сайтах, соответственно доход с рекламы уже не идет…

Нужно определиться, что вы будете делать в том случае, если у человека включен AdBlock.

Давайте попробуем вывести на всю страницу огромный overlay (перекрытие) на котором будет написано «Выключите, пожалуйста, блокировщик рекламы AdBlock ». Таким образом, доступ к web-сайта будет полностью закрыт.

Создаем DIV с идентификатором, например, #spoof-overlay. Ни в коем случае не создавайте DIV-ы с классами или идентификаторами, в которых присутствует слово ad или advertising , потому что AdGuard даже этот блок заблокирует. Внутри нашего DIV-а напишем: выключите, пожалуйста, AdBlock или AdGuard, чтобы получить доступ к сайту.

Выключите, пожалуйста, AdBlock или AdGuard, чтобы получить доступ к сайту

Какой-то ценный контент...

Теперь добавим немного стилей нашему DIV-у.

#spoof-overlay{ display: none; background-color: rgba(0,0,0,0.9); position: fixed; left: 0; top: 0; width: 100%; height: 100%; color: white; text-align: center; font-size: 30px; font-weight: bold; padding-top: 17%; z-index: 99999; }

По стандарту пропишем display: none; и будем менять это свойство в JavaScript, если вдруг у посетителя есть AdBlock. Проверить это очень просто.

Для этого создадим два JS файла. Первый назовем custom.js . Второй advert.js . Дайте своим файлам точно такие же имена. Advert это название популярной рекламной сети. Adblock блокирует все их рекламные баннеры и тизеры, соответственно он примет скрипт advert.js за оригинальный. Adblock подумает, что это реклама и не выполнит его. А мы будем проверять факт выполнения этого JavaScript файла и его подгрузки. Если он подгрузил, то всё хорошо, а если нет, то мы будем выводить информацию о том, что это реклама.

Создадим простую функцию в файле advert.js и назовем её spoof :

Function spoof() { window.spoof_jdsfoodsfnsofnkwjspnf = true; } spoof();

Проверяем наличие свойства spoof_jdsfoodsfnsofnkwjspnf в объекте window . Если свойство есть, то это будет говорить о том, что Adblok-а нет. Открываем файл custom.js и добавляем следующий код:

JQuery(document).ready(function() { if(typeof window.spoof_jdsfoodsfnsofnkwjspnf == "undefined") { //AdBlock или AdGuard активен! //Делаем всё, что нашей деше угодно //Например, покажем наше окно с сообщением jQuery("#spoof-overlay").fadeIn("slow"); } });

Скачать готовый скрипт (4 KB)

Смотреть видео версию урока от «Хауди Хо»

Adblock – это расширение для браузера, которое блокирует рекламу. Казалось бы, что такой плагин разработан для удобства пользователя интернета, но его использование таит в себе подводные камни, такие как:

• включенный adblock помимо рекламы может блокировать некоторые скрипты, без которых не воможна полноценная работа сайта. Adblock может блокировать форму комментариев, виджеты обратной связи, счетчики, кнопки социальных сетей и другие плагины.
• плагин значительно увеличивает расход оперативной памяти и вычислительных ресурсов.
• не забывайте, что реклама на сайте обеспечивает доход своему владельцу, причем обычно заработок на сайте невелик. Читайте . Заработанные деньги нужны вебмастерам для поддержания своих ресурсов, так как блогеры вынуждены тратить на содержание сайтов. Это и плата за домен, хостинг, за создание дизайна, а также возможны расходы на написание статей, рекламу, оптимизацию и др. Для того, чтобы развивать свой сайт вебмастеру нужны деньги. Это является и мотивацией для работы.
• блокиратор не вырезает всю рекламу, но препятствует нормальной работе сайта,
• сайт может отображаться с пустыми полями – это те места, где раньше была реклама.
• некоторые вебмастера борются с пользователями адблока и не показывают им свой контент (как это сделать в моей следующей статье)

К чему может привести массовое использование Adblock пользователями интернета:

• многие вебмастера просто забросят свои сайты, и найти полезный контент будет гораздо сложнее. "Как же так, ведь у них призвание? Они нам должны..." - спросите вы. Это жизнь, и никто никому не должен. Если вы думаете, что кто-то должен вкладывать деньги, чтобы вам было хорошо, свой труд и душу, то вы ошибаетесь.
• появление бОльшего количества лохотрона в сети. Я, конечно, не скажу, что все вебмастера сразу же подадутся в мошенники, но некоторые с низким моральным уровнем могут начать обманывать людей. Раз честно-то заработать не получается.
• Те, которые блогеры, которые останутся в при своих сайтах, будут вынуждены монетизировать их иначе и находить пути . Вариант, который уже часто используется, - скрытие контента пользователям с включенным адблоком или . Варианты альтернативной монетизации - бесконечная попытка продажа товаров и услуг по . а также продажа вам самой информации. Да-да! За информацию придется платить чаще. Это же легко - скрыть контент, а перед ним поставить кнопки с оплатой или перед скачиванием какого-либо файла вам придется заплатить. Хотите платный интернет - тогда установите адблок. С каждой новой установкой вы приближаете это прекрасное время.

Как отключить адблок на сайте

Если вы не можете отказаться от блокиратора рекламы, то вы можете отключить Adblock на сайтах, владельцы которых не злоупотребляют монетизацией.
Когда вы находитесь на странице любимого сайта, кликните по иконке адблок около адресной строки и выберите пункт “Не запускать на странице данного домена”. Откроется всплывающее окно, где вам нужно нажать на кнопку “Исключить”. Есть и другой способ разрешить показ рекламы. Это добавление сайта в белый список плагина.



Итак, второй способ включить показ рекламы на страницах определенного сайта. Клик правой кнопкой мыши по иконке Адбло к –> Настройки –> Показывать рекламу на веб-странице или домене –> ввести адрес сайта в свободное поле –> ok

Как отключить Adblock в Opera

В Opera версии 12.17 и ниже – выбираем команды Инструменты –> Расширения –> Управления расширениями (горячие клавиши CTRL + Shift + E) –> отключить напротив нужного плагина. Вы можете его также удалить.


В Opera выше версии 12.17 – клик по иконке Opera (находится в левом верхнем углу) –> Расширения –> Менеджер расширений (горячие клавиши CTRL + Shift + E) –> отключить . Здесь же можно удалить расширение, нажав на крестик в поле плагина.

Отключаем блокировщик рекламы в Google Chrome

Клик правой кнопкой мыши по значку расширения –> удалить из Chrome или клик левой кнопкой мыши по иконке –> приостановить adblock . Если вы отключили ранее видимость иконки, то вам нужно перейти в список расширений - кнопка Настройка и Управление Google Chrome (в верхнем углу браузера справа) –> Дополнительные инструменты –> Расширения –> убираем галочку из чекбокса напротив “Включено” или отправляем плагин в корзину.

Удаление адблока из Firefox

В браузере Mozilla Firefox таже можно быстро отключить плагин через нажатие на иконку –> Отключить везде или заходим в список плагинов – Меню –> Дополнения –> вкладка Расширения –> удалить или отключить

Удаление резальщика рекламы и телефона ОС Android

Какое бы приложение вы не установили для удаления рекламы на android, лечится это простым удалением самого приложения (долгое нажатие на иконку и перетягивание в корзину).

Что такое uBlock Origin

Как отключить uBlock Original в любом браузере

Смотрите видеоурок:

9 июля 2018

Сегодня AdBlock является главной проблемой индустрии интернет-рекламы. Число пользователей, блокирующих рекламный контент, постепенно растёт, а прибыль владельцев сайтов снижается. Многочисленные подписки позволяют обладателям расширений значительно увеличить список нежелательных элементов, добавив к нему не только рекламу, но и, например, установленные на странице социальные виджеты или скрипты сбора статистики, что серьезно повышает приватность просмотра и осложняет вовлечение посетителей в процесс интеграции сайта с социальными сетями. Рано или поздно разработчики сталкиваются с вопросом: как проверить наличие AdBlock и минимизировать наносимый им «ущерб»?

Принцип работы блокировщиков рекламы

С технической точки зрения AdBlock, uBlock Origin, AdGuard и другие подобные браузерные расширения (далее по тексту — AdBlock) блокируют не саму рекламу, а соответствующие сетевые запросы: при загрузке страницы каждое соединение сверяется со списком запрещённых и при необходимости отклоняется. В самих блокировщиках это называется сетевым фильтром . Он может содержать как конкретный перечень доменов, например, ad.mail.ru , так и части URL — /ucoz/img/uads/ , что позволяет блокировать запросы даже при совпадении по маске.

Случается, что в результате фильтрации сайт теряет нормальную работоспособность или возможностей одного лишь сетевого фильтра не хватает, чтобы заблокировать нежелательный контент. Для этого в блокировщиках предусмотрено скрытие элементов — косметический фильтр , применяющийся путём встраивания в документ правил CSS повышенного приоритета, которые скрывают области с рекламой, как правило, при помощи свойства display или в отдельных ситуациях добавлением атрибута hidden .

Работа косметического фильтра uBlock Origin на примере рекламы ВКонтакте: элемент #ads_left принудительно скрывается встроенным CSS с внушительного размера селектором.

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

Но реклама — далеко не единственный объект фильтрации. Блокирование внешних ресурсов или скрытие элементов зависит от подписок , которые включены в пользовательский AdBlock. Каждая подписка специализируется на определенном типе нежелательного контента и периодически обновляется.

Популярные подписки

Нежелательный контент, на основе которого составляются списки фильтров для блокировщиков рекламы, можно условно разделить на группы. Перечень не исчерпывающий, но охватывает основные объекты фильтрации.

1. Реклама — любые элементы станицы, в том числе подключаемые извне ресурсы, в идентификаторах, классах и атрибутах которых встречаются запрещенные фильтром выражения. Обычно, подписка составляется с региональным учетом, например, EasyList+RuAdList .
2. Элементы социальных сервисов — кнопки «share», виджеты социальных сетей и иные встраиваемые посредством API элементы. Основным списком является .
3. «Раздражающие» элементы — вспомогательный контент страницы: кнопки для подписок, RSS, скроллинга вверх; формы для новостных рассылок; блоки с предупреждениями, информацией о политике приватности и использовании cookies и др. Всё это содержит список Fanboy’s Annoyance List .
4. Сервисы статистики — счётчики и скрипты анализа посещаемости, отслеживающие поведение пользователя, фактически не являются рекламой, однако рекомендуются к блокировке в целях повышения приватности. Среди таких списков стоит выделить EasyPrivacy и региональный RuAdList Counters .
5. Элементы «Anti-AdBlock» — баннеры, модальные окна и всплывающие уведомления, которые отображаются для пользователей с включенными расширениями и призывают отключить блокировщик и/или ограничивают функционал сайта. Ответом на них являются списки по типу Anti-AdBlock Filter .
6. Вредоносный и мошеннический контент — сайты, наносящие вред компьютеру и пользователю, блокируются всеми средствами: поисковыми системами, антивирусами, браузерами. Расширения, направленные на борьбу с рекламой, также предлагают подобные фильтры — например, Malware Domains .
7. Пользовательские правила блокирования — пользователь может самостоятельно заблокировать определенный сетевой запрос или скрыть элемент на странице, что запишется в отдельный фильтр.

Таким образом, список «кандидатов» на потенциальное скрытие или блокировку существенно увеличивается, и возникает вопрос, как разработчик может учесть эту проблему при вёрстке сайта.

Вёрстка с учётом AdBlock

Периодически обновляемые подписки с огромным числом правил блокирования невозможно досконально проанализировать, и на их основе нельзя составить универсальные рецепты для правильной вёрстки контента, который может попасть под действие фильтров. Самым верным решением будет установка всевозможных подписок и проверка конкретного сайта через логи блокировщика. Ниже приведены общие рекомендации по верстке двух типов наиболее часто встречающегося контента — рекламы и социальных виджетов.

Рекламные блоки

Ввиду того, что косметический фильтр аналогично сетевому также работает по маске и сверяет названия идентификаторов, классов и атрибутов элементов с указанными в списке, независимо от домена могут фильтроваться такие элементы как, например, #adv , .ad-google , .banner125x125 , .sponsor-logo , a и многие другие, поэтому во избежание искажений вёрстки подобные названия не рекомендуется использовать для обозначения элементов в HTML-разметке и для указания содержимого атрибутов href , src в ссылках, картинках и фреймах: они будут по умолчанию скрыты, даже если разработчик не подразумевал под ними контент рекламного характера.

Чтобы свести к минимуму последствия работы косметических фильтров, следует позаботиться о наличии у контента, который может быть потенциально скрыт, родительского контейнера с эквивалентными ему шириной и высотой, что особенно полезно для относительно больших рекламных блоков:

С использованием этой простой техники при попадании элемента под фильтр на его месте возникает пустое пространство, которое можно задействовать, например, для вывода плейсхолдера или из правил блокирования.

Важно, что AdBlock анализирует и атрибуты элементов, поэтому ссылки, href которых содержит явное указание на рекламу, рекомендуется заменять через сервисы сокращения URL , а содержимое атрибута src у изображений по возможности преобразовывать в base64 :

Социальные виджеты

Практически все популярные «социальные скрипты» блокируются как косметическим, так и сетевым фильтром: упомянутая подписка Fanboy’s Social Blocking List содержит значительное количество названий классов и идентификаторов, которые часто употребляются при вёрстке блоков, включающих социальные виджеты: .b-share , .article__footer-share-title , .connect-icons и многие другие, а также маски для внешних скриптов, например, /fbshare.js , /share42.js , /twitter.js .

AdBlock является причиной скрытия не только рекламы, но и блоков с социальными кнопками. Косметический фильтр по умолчанию добавляет display: none элементу с классом.article__share .

Чтобы ограничить действия фильтров на подобные элементы, разработчикам следует по возможности отказываться от популярных решений в пользу собственных скриптов (пример создания своими руками) и избирательнее использовать названия для обозначения контента в разметке. То же касается и изображений, используемых, как правило, в качестве социальных иконок:

Очевидно, что «спасти» контент от блокирования не всегда возможно, и лучшее, что следует предпринять в такой ситуации, — обратиться к пользователю с просьбой исключить сайт из фильтров AdBlock. Для вывода обращения не обязательно использовать JS: достаточно применить простые CSS-техники, о которых пойдет речь ниже. Но сначала стоит рассмотреть вопрос о содержимом и месте появления обращения на странице, так как его главной целью является не только привлечь внимание посетителя, но и получить согласие.

Как правильно попросить пользователя отключить AdBlock?

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

Когда отключение AdBlock является категорически поставленным обязательным условием, это демотивирует и заставляет посетителя искать иные сайты или, если так случается, что других вариантов у него нет, — тратить время на обход такого рода блокировок, вручную скрывая навязчивые элементы со страницы.

Пример правильного отображения просьбы об отключении AdBlock на Хабре. Ссылка на обращение ненавязчива и размещена строго на месте рекламного баннера.

Правильное обращение (или ссылка на него) должно быть ненавязчивым, т. е. не слишком фокусировать на себе внимание, но в то же время — быть заметным для пользователя. В тексте желательно привести убедительные аргументы: например, указать зависимость дохода от рекламы и затрат на содержание сайта. Наконец, сам сайт должен быть полезен и важен для пользователя. Именно качественный контент и возможность дать посетителю то, что он ищет , являются главными факторами лояльности аудитории. Следовательно, в обращении к пользователю целесообразно подчеркнуть, что именно даёт ему сайт в обмен на лояльность и с какими затратами или усилиями разработчиков связано качественное предоставление этой информации, товара, услуги.

Это можно проиллюстрировать на примере просьбы упомянутого IT-сообщества, даже небольшой фрагмент которой отражает уважительное отношение к участникам:

В противовес тактичному обращению, размещенному на определенной части сайта и не мешающему посетителю, разработчики нередко используют большие модальные окна с фиксированным позиционированием, которые затеняют всю область просмотра. Прибегать к этому не рекомендуется как минимум по двум причинам:

• 1. Более-менее опытный пользователь при желании без труда скроет косметическим фильтром практически любой мешающий ему элемент сайта, включая подобное модальное окно.
• 2. Такая техника вредна с точки зрения SEO, так как может рассматриваться поисковыми роботами как клоакинг — попытка скрыть контент.

В заключение вопроса о правильном составлении просьбы следует выделить, что нельзя злоупотреблять и самой рекламой — AdBlock изначально подразумевался как ответ на раздражающий контент. Огромные мигающие баннеры на пол страницы, расположенные по центру экрана, отпугнут даже самых лояльных пользователей, решивших исключить сайт из фильтров.

Вывод просьбы отключить AdBlock на CSS

Существует как минимум два простых варианта реализации вывода сообщения с просьбой отключить AdBlock на чистом CSS без использования JavaScript: посредством псевдокласса:empty и наложением двух элементов друг на друга через свойства position и z-index . Первый вариант расчитан скорее на сетевой фильтр, второй — более универсален, так как потенциально учитывает действие и косметического фильтра.

Добавление псевдоэлемента в родительский контейнер

Если скрипт, который генерирует рекламный контент и вставляет его в заданный пустой блок, не загрузится из-за сетевого фильтра , то этот контейнер так и останется без дочерних элементов и для него продолжит действовать псевдокласс:empty . В тривиальном исполнении это можно продемонстрировать следующим образом:

.container:empty::before { content: "Пожалуйста, отключите AdBlock!"; }

В примере внешний JS-файл вставляет в блок с атрибутом data-insert новый элемент. Если скрипт не загрузится из-за сетевого фильтра, к элементу.container будут применены стили псевдокласса:empty:

Однако этот способ не учитывает ситуацию, когда рекламный скрипт загрузился, сгенерировал и вставил необходимые элементы в искомый контейнер, но впоследствии они были скрыты косметическим фильтром.

Наложение одного блока на другой

Если рекламный блок не отображается из-за косметического фильтра , т. е. элемент с рекламой внутри принудительно скрывается посредством display: none !important , то псевдокласс:empty станет бесполезен:

Для разрешения проблемы предлагается создать дополнительный элемент , непосредственно содержащий сообщение с просьбой отключить блокировщик, но поместить его на слой ниже, т. е. позиционировать под рекламным блоком так, чтобы он был виден лишь тогда, когда к визуально перекрывающему его элементу было применено правило display: none . Для этого потребуется провести незамысловатные манипуляции со свойствами position и z-index:

.container { position: relative; } .adspace, .request { position: absolute; width: 100%; height:100%; } .adspace { z-index: 2; /* рекламный блок располагается на слой «выше» */ } .request { z-index: 1; }

В отличие от предыдущего случая, когда приходилось оперировать лишь стилями для псевдоэлементов::before и::after , данный подход расширяет возможности стилизации и редактирования уведомления, выступающего уже полноценным DOM-элементом, а значит, по аналогии с тем, как это реализовано на Хабре, кроме обычного текста в блок можно добавить кнопку или ссылку на полное обращение к пользователю:

JSFiddle недоступен без JavaScript

Единственный недостаток данной техники — абсолютно позиционированный элемент.request будет ограничен областью своего родителя, поэтому указанный код непригоден в случае, если возникает потребность отображать модальное окно по центру экрана и затенение, занимающее весь viewport. Для решения такого рода задач нельзя обойтись без JavaScript.

Как проверить наличие AdBlock через JS?

Механизмы работы сетевого и косметического фильтров открывают разработчикам возможность определить наличие расширений AdBlock посредством JavaScript: состояние загрузки подключенного к странице скрипта отслеживается событиями onload и onerror или возможностью корректного вызова содержащихся в нём методов и функций, а видимость элемента — через анализ примененного к нему CSS-свойства display . На основе этого существует несколько путей обнаружения AdBlock .

Использование внешнего скрипта

Первый вариант — это подключение на страницу внешнего скрипта с названием, подходящим для маски фильтрации, и содержимым, выполнение которого необходимо будет проверить. Например, файл, именуемый ads.js , может содержать всего одну переменную:

// ads.js var adb = "";

Соответственно, при включённом блокировщике рекламы файл ads.js не загрузится, и задекларированная внутри него переменная adb не будет существовать. Проверка выполнения скрипта представляет собой тривиальное условие, которое необходимо поместить ниже подключенного файла:

If(typeof adb === "undefined") { // AdBlock включен } else { // AdBlock выключен }

Второй вариант схож с первым: внешний скрипт ads.js может быть пуст (но не возвращать ошибку 404), а проверка на блокировку заключается в добавлении к нему событий onerror или onload , которые будут обрабатываться отдельной функцией с одним параметром, например, adsLoaded(status) :

Var adsLoaded = function(status) { if(status === false) { // AdBlock включен } else { // AdBlock выключен } }

В HTML-документе подключаемый скрипт должен иметь соответствующие обработчики:

Недостатком указанных способов является создание отдельного файла и дополнительный запрос к серверу.

Проверка видимости элемента

Данный подход не подразумевает создания внешних скриптов или отслеживания состояния их загрузки: проверка осуществляется на конкретном элементе путем анализа примененного к нему CSS-свойства display . Учитывая задержку при инициализации косметического фильтра блокировщика рекламы, для проверки окончательного вычисленного значения целесообразно использовать метод getComputedStyle() и дождаться, пока страница и внешние ресурсы полностью загрузятся:

Window.addEventListener("load", function() { if(window.getComputedStyle(document.getElementById("my-adv")).getPropertyValue("display") === "none") { // AdBlock включен } else { // AdBlock выключен });

Это наиболее оптимальный способ для проверки блокировки не только рекламы, но и любого другого контента.

Функции рекламных скриптов

Рекламные скрипты имеют собственные методы и функции, которые не могут быть вызваны, когда внешний файл оказывается недоступен. Например, Google Adsense создаёт объект google_jobrunner и встраивает рекламу через элементы с классом.adsbygoogle:

Document.addEventListener("load", function() { if(typeof window.google_jobrunner === "undefined" || document.querySelector("ins.adsbygoogle").innerHTML.replace(/s/g, "").length === 0) { // AdBlock включен, скрипт Adsense заблокирован } });

Проверка на AdBlock с определением подписок

Проанализировав, какие именно элементы отфильтрованы блокировщиком, можно сделать предположение о наличии соответствующих видов подписок у пользователя. На уменьшение точности определения влияют два фактора — пользовательский список фильтров и большое число «официальных» подписок, правила блокирования которых нередко пересекаются между собой.

Суть проверки заключается в создании на странице невидимых для пользователя, но видимых для AdBlock «фейковых» элементов с идентификаторами, классами и атрибутами, указывающими на принадлежность к определенной группе контента. Элементы, попавшие под действие косметического фильтра, будут свидетельствовать в пользу наличия соответствующего вида подписки, т. е. в целом указывать на то, какого рода контент блокируется пользователем:

Чтобы не засорять DOM лишним мусором, элементы следует удалять сразу после проверки.

JSFiddle недоступен без JavaScript

Как видно из примера, функция adbCheck() возвращает объект, поэтому при необходимости можно обратиться только к интересующему в нём свойству:

Var result = adbCheck(); result.ads_block; // реклама result.cnt_block; // счетчики result.soc_block; // социальные виджеты result.ang_block; // раздражающие элементы result.ant_block; // элементы anti-adblock result.scm_block; // мошеннические сайты

В заключение

Учет действий фильтров AdBlock — это показатель качественной вёрстки сайта и принятие во внимание сегмента посетителей, которые не только не видят рекламы, но и, вполне возможно, не могут использовать социальные виджеты share и не учитываются счетчиками посещений и прочими сервисами статистики. Именно такой широкий спектр объектов фильтрации — от рекламных скриптов до социальных кнопок и отслеживающих элементов — предоставляют сегодня популярные подписки. Проверке на AdBlock стоит уделять особенно пристальное внимание на сайтах, зависящих от доходов с рекламы или активно использующих социальные виджеты. В свою очередь, правильное, тактичное и ненавязчивое обращение к посетителю может серьезно поспособствовать пересмотру его отношения к заблокированному контенту.