Aug 3 2018 at 22:37

Создаём оповещатель, о том что у пользователя включён блокировщик рекламы и просим его выключить

HTML*JavaScript*BrowsersContextual advertising*Display advertising*

Invite pending

Для многих сайтов реклама — единственный источник денег. Поэтому они, Вы, я — размещают её у себя. Но в нашем мире куча блокировщиков рекламы. AdBlock, AdBlock Plus, AdBlock Pro, Ghostery, Adguard. Есть даже встроенные в браузеры (Opera, Яндекс.Браузер). Эти блокировщики блокируют не только рекламу, но и прибыль от сайта. Может, сайт вообще живёт только на рекламе? Так вот. Сегодня расскажу о том, как можно узнать, пользуется посетитель Вашего сайта блокировщиком или нет, а если да — попросить его отключить.

Итак, почему же я выбрал способ просить пользователя отключить блокировщик, а не маскировать рекламу под обычный контент сайта, или вообще не допускать посетителя к сайту (пока он не отключит AdBlock)? А потому, что это есть самый этичный способ, а ещё при пользовании последними двумя способами, можно потерять большую долю уникальных посетителей.

Вот HTML-код моего первого способа.

<!-- Сначала немного стилей. В общем-то, если код обнаружит рекламу, то наверху сайта закрепится сообщение с просьбой отключить AdBlock на красном фоне -->
<style>
.adpopup {
    overflow: hidden;
    background-color: red;
    position: fixed; 
    top: 0; 
    width: 99%; 
    
}
 
.adpopup p {
    float: left;
    display: block;
    color: #000;
    padding: 0;
    text-decoration: none;
}
</style>

<!-- Так, стили закончились. Дальше идёт скрипт (а точнее функция JS), который выводит то самое красное сообщение -->
	<script>
		function adBlockFunction() {
			document.getElementById('content').innerHTML = ' <div align=center class="adpopup"><p>Уважаемые пользователи сайта! Просим вас отключить блокировщик рекламы! Вместе с рекламой ваш блокировщик блокирует некоторую часть сайта. Также, реклама - единственное средство существования сайта.</p></div>';
		} //Внутри функции можно расположить своё уведомление
	</script>
<!-- Что тут у нас? Ага, те самые "обнаружители" блокировщиков. И находятся они в двух div'ах (только так работают) -->
    <div id="content">

    <div>   <!-- Первый подключает скрипт рекламы Google. Если он оказывается заблокированным, то выводится наше любимое сообщение -->
		<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockFunction();"></script>
                <!-- Второй по аналогии подключает скрипт рекламы Яндекса -->
		<script async src="//an.yandex.ru/system/context.js" onerror="adBlockFunction();"></script>
		<!-- Если у вас какая-нибудь другая рекламная сеть, можете найти её адрес рекламного скрипта и подключить сюда таким же способом -->
		
	</div>
</div>

Кстати, расположить код нужно сразу после открывающего тега body.

Спасибо за прочтение статьи! Надеюсь, она Вам пригодилась.

Hubs: