Недавно я написал статью о том, почему важно выбирать имена файлов, которые не были случайно заблокированы блокировщиками рекламы . Комментарии показали, что технология блокировки рекламы раздражала многих владельцев сайтов. Зачем им производить премиум-контент, если они не могут получать доход взамен?
Выявить наличие блокировщиков рекламы невозможно. Используются разные технологии реализации, и они не обязательно встроены в браузер. Блокировщики рекламы также работают по-разному: некоторые используют длинный список доменов рекламодателей, в то время как другие используют регулярные выражения для подавления соответствующих URL-адресов.
Соответствие регулярных выражений используется одним из самых популярных блокировщиков, дополнением Adblock Plus от Firefox . Тем не менее, мы можем использовать проверку URL, используя технику, которая запрещает пользователям Adblock просматривать ваш контент, если они не отключают надстройку.
Ваша HTML-страница должна следовать этому примеру:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Advert Blocker blocking</title>
<meta http-equiv="content-language" content="en"><meta name="language" content="en">
<style type="text/css">
#content { display: none; }
#blockermessage
{
font-weight: bold;
text-align: center;
padding: 4px;
color: #fff;
background-color: #c00;
}
</style>
<script type="text/javascript" src="/banner-advert.js"></script>
</head>
<body>
<div id="content">
<h1>Main content</h1>
<p>This will be hidden to people using advert blockers.</p>
</div>
<div id="blockermessage">
<p>Please switch of your advert blocker and enable JavaScript to view this page.</p>
</div>
</body>
</html>
Объяснение:
- Основное содержимое должно содержаться во внешнем элементе, таком как
<div id="content"> - Вы должны предоставить альтернативное сообщение людям, использующим блокировщик рекламы, как показано в
<div id="blockermessage"> - Важно, чтобы первые два правила CSS на странице стилизовали эти элементы. Поскольку внешний CSS-файл может быть заблокирован, я бы рекомендовал встраивать его непосредственно в HTML. Правило #content должно быть установлено так
display: none - Наконец, внешний файл JavaScript включен. Для этого нужно указать имя файла / папки, которое будет запускать правила блокировки рекламы, например banner-advert.js.
Код для banner-advert.js:
// reveal content to those not using an advert blocker
if (document.styleSheets && document.styleSheets.length > 0) {
var ss = document.styleSheets[0];
var bRule = (ss.cssRules ? ss.cssRules : ss.rules);
if (bRule.length > 1) {
bRule[0].style.display = "block";
bRule[1].style.display = "none";
}
}
Это работает следующим образом:
- Когда страница загружена, основное содержимое отключено для всех, и отображается только #blockermessage.
- Для большинства людей код banner-advert.js выполняется немедленно. Это изменяет встроенные стили, поэтому #content становится видимым, а #blockermessage скрытым. Это происходит до отображения основного контента, поэтому пользователи не должны видеть никакой разницы.
- AdBlock обнаружит banner-advert.js и откажется загружать его. Стили не изменяются, поэтому основной контент остается скрытым.
Это должно порадовать многих владельцев премиум-контента. Но — сдерживаюсь — я настоятельно рекомендую вам не реализовывать это на своем веб-сайте! Существует ряд технических проблем, и блокировать блокировщики бесполезно… см. Почему блокирование рекламных блоков не будет выполнено .
Читайте также: Почему именование файлов важнее, чем вы думаете .