Показать альтернативный контент для пользователей с AdBlockers
Я работаю над проектом, финансируемым рекламой. На самом деле что-то тонкое и содержательное, а не хромые всплывающие окна для расширения половых органов и т.д.
Поскольку проект финансируется рекламой, люди, блокирующие рекламные блоки, не принесут пользы проекту (так как они явно не знают, что объявления на этом конкретном сайте не так уж плохи).
Как я могу отобразить альтернативный контент для людей с блокировками рекламы? Что-то вроде
Мы заметили, что у вас активная блокировка рекламы. Пример .com - это реклама, мы обещаем, что наши объявления имеют высокое качество и ненавязчивы. Лучшая помощь, которую вы могли бы обеспечить, чтобы мы работали, заключается в том, чтобы "белить" нас в ваш рекламный блок. Спасибо!
Как я могу проверить рекламный блок?
Найден пример! http://mangastream.com
Ответы
Ответ 1
Блокировщики рекламы в основном манипулируют некоторыми элементами с некоторыми идентификаторами или jQuery, такими как правила выбора, хранящиеся в их базе данных, через некоторое время после того, как DOM готов.
Таким образом, вы должны проверить, управляется ли ваш рекламный элемент или нет, через определенное время, например, через 3 секунды после готовности DOM. Вы можете в основном проверить display
(потому что AdBlockers скрыть это) свойство CSS или innerHTML вашего рекламного элемента. Ниже приведен пример:
Рабочая демонстрация: http://jsfiddle.net/cxvNy/ (Протестировано с помощью AdBlock для Chrome, вам необходимо иметь этот актив)
Если ваш HTML-адрес объявления:
<div id="google_ads_frame1">aa</div>
Тогда:
$(function(){
setTimeout(function(){
if($("#google_ads_frame1").css('display')=="none") //use your ad id here I have used Google Adense
{
$('body').html("We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!");
}
},3000);
});
Надежность выше кода самоочевидна:)
Ответ 2
В конце концов, я использовал следующую реализацию (похожую на этот сайт). Используется следующий код:
function abp() {
if ($('.ad').height() == 0) {
$('.ad').css("height", "90px");
$('.ad').css("background-image", "url(/static/images/msblock.png)");
}
}
$(abp);
В самом конце документа. Кажется, работает как профессионал. Спасибо всем за отличные ответы, upvotes для всех!
Ответ 3
Съемка с бедра здесь, но вы можете проверить содержимое своего объявления с помощью некоторого javascript после загрузки страницы.
<!-- html -->
<div id="MyAdDiv">
<div id="BeaconContainer" style="display:none">I rendered!</div>
// Ad content here.
</div>
// javascript
var d = document.getElementById("MyAdDiv");
if ( d.innerHTML.indexOf("I rendered!") === -1 ) {
// Your ad has been blocked.
// Run code to launch WhiteList request message.
}
Я не знаю точно, когда рекламный блок делает это, поэтому было бы неплохо отложить выполнение этой функции на несколько секунд с помощью setTimeout(). Вероятно, есть некоторые интересные вещи, которые вы могли бы сделать с некоторыми вызовами ajax, также как собирать статистику о том, сколько пользователей работают с блокировками объявлений. Руководство просто любит такие вещи.
UPDATE:
Я только что установил adblock для Chrome и проверил его против StackOverflow. Похоже, что AdBlock просто удаляет содержимое рекламного контейнера, поэтому приведенный выше метод будет работать.
Ответ 4
Наиболее распространенным трюком является создание файла JavaScript с именем, которое обычно блокируется блочными блоками, например /ads/advert.js
.
Если файл заблокирован, вы знаете, что у посетителя включен рекламный блок.
Файлы CSS обычно не блокируются списками adblocker, поэтому это будет более безопасный подход.
Ответ 5
Это можно сделать и с помощью простого JavaScript, не используя jQuery.
<script>
window.onload = function(){
setTimeout(showAdblockImage, 3000);
};
function showAdblockImage(){
//get all google ad elements
var adsList = document.querySelectorAll("ins.adsbygoogle");
if(!adsList){ return;}
for(var i=0; i<adsList.length;i++){
if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
//AdBlock is not active, hence exit
break;
}
//apply inline css to force display
adsList[i].style.cssText = 'display:block !important';
//modify html content of element
adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
}
}
</script>
Ссылка: Поместить альтернативный контент вместо рекламы с цензурой AdBlock
Ответ 6
Я не знаю, как работают рекламные блокираторы, но, например, блокировщик рекламы Chrome, который у меня есть, позволяет мне выбрать конкретный элемент DOM, содержащий объявление, чтобы удаляться: <div id="ad_holder"> ... ads ... </div>
, и блокиратор каким-то образом удалит его.
Если вы поместите некоторый javascript внутри этого div с коротким таймером, который изменит глобальную переменную, а другой таймер, который будет выполняться впоследствии, прочитав эту глобальную переменную, вы могли бы предположить, что на странице нет блокировщиков рекламы, если переменная была правильно установлена? Что произойдет, если блокиратор удалит div после того, как Chrome оценил этот javascript, сможет ли таймер установить переменную, хотя родительский div был удален?
AdBlock также поддерживает открытый список "плохих" серверов (http://www.doubleclick.com?) и, вероятно, блокирует HTTP-запросы на контент с этих серверов. Это можно сделать, если он интегрируется с Chrome, чтобы он мог определить какую-то политику в отношении контента - что загружается, а что нет. Этот случай можно обнаружить с помощью описанного ранее подхода. Если ваш клиент является поставщиком рекламы, я думаю, что рано или поздно он окажется черным в списке:)
Блокатор может изменять CSS только и скрывать весь div, но это может быть легко обнаружено.
Ответ 7
Мой любимый подход состоит в том, чтобы просто добавить класс "объявлений" или "объявление" или что-то подобное во всех красивых больших блоках полезного контента на моем сайте, а затем, когда люди с блокировщиком рекламы просмотрят его, они ничего не видят,
Они вынуждены отключить свой рекламный блок, чтобы просмотреть содержимое.
Не беспокойтесь о предупреждениях, дайте им понять это. Это не манекены с использованием рекламного блока.
Вот текущий список правил блока из некоторых популярных расширений adblock. Просто выберите класс или идентификатор, который они блокируют (используйте инструменты разработчика, чтобы просмотреть список классов css)
Ответ 8
<script> // Run after all the page elements have loaded window.onload = function(){
// This will take care of asynchronous Google ads
setTimeout(function() {
// We are targeting the first banner ad of AdSense
var ad = document.querySelector("ins.adsbygoogle");
// If the ad contains no innerHTML, ad blockers are at work
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
// Since ad blocks hide ads using CSS too
ad.style.cssText = 'display:block !important';
// You can put any text, image or even IFRAME tags here
ad.innerHTML = '<img src="http://blog.liveurlifehere.com/wp-content/uploads/2015/01/adblock.jpg" width="300" height="250" />';
}
}, 2000); // The ad blocker check is performed 2 seconds after the page load }; </script>
С помощью этого кода вы можете установить изображение в репликации объявлений google
Ответ 9
Вы можете реализовать https://github.com/sitexw/FuckAdBlock, который очень хорош и прост в использовании.