Примечание редактора: блокировки рекламы (и интернет — рекламы в целом) является спорным вопросом. Некоторые вообще не любят рекламу и блокируют ее в принципе, другие говорят, что это лишает издателей дохода. Это руководство является одной из попыток разработчика достичь компромисса. Как вы думаете? Дайте нам знать в комментариях ниже.
В этом руководстве мы создадим плагин WordPress, который может отключить веб-сайт для пользователей, использующих AdBlock, или показывать альтернативную рекламу пользователям AdBlock из того же домена, что и веб-сайт.
Этот плагин может быть полезен, если ваш сайт полностью зависит от рекламы для получения дохода и когда пользователи потребляют большое количество ресурсов. Например, сайт обмена видео может захотеть запретить сайту воспроизведение видео или показывать альтернативную рекламу для пользователей, установленных AdBlock. Одним из таких примеров является TED.com, как показано выше. Вы можете видеть, что TED.com просит вас разблокировать рекламу для их сайта.
Как работает AdBlock?
AdBlock ведет список различных доменных имен рекламной сети и список ключевых слов, связанных с рекламой.
AdBlock работает, блокируя HTTP-запросы изображений, iframe, сценариев и Flash, которые соответствуют известному домену рекламодателя или определенным рекламодателям ключевым словам, которые есть в их списке. После того, как запросы заблокированы, он также изменяет свойства CSS заблокированных элементов HTML, чтобы скрыть их.
AdBlock позволяет вам расширить, что можно заблокировать, добавив фильтры.
Алексис Ульрих написал о технологии блокировки рекламы, если вам интересно больше узнать эту тему.
Настройка каталога и файлов плагинов
Вот структура каталогов плагина, который мы собираемся создать:
--alternative -alternative.php -Пользовательские CSS -index.js
alternative является каталог плагинов. Если вы хотите изменить имя, это нормально. Просто убедитесь, что вы не называете это так, как бы index.js блокировка, специфичная для ключевых слов, в противном случае процедура index.js не удастся.
Создание пункта меню панели администратора
Во-первых, нам нужно добавить страницу настроек Anti AdBlock в админ-панель WordPress. Перед тем, как создать страницу настроек, нам нужно создать пункт подменю для родительского пункта меню «настройки».
Вот код, который мы будем использовать для создания пункта подменю. Поместите его в файл alternative.php .
function add_anti_adblock_menu_item() { add_submenu_page("options-general.php", "Anti Adblock", "Anti Adblock", "manage_options", "anti-adblock", "anti_adblock_page"); } function anti_adblock_page() { } add_action("admin_menu", "add_anti_adblock_menu_item");
Этот код создает пункт меню и присоединяет к нему страницу настроек.
Создание страницы настроек
Далее нам нужно использовать API настроек WordPress, чтобы заполнить страницу настроек анти-блокирования нужными опциями.
Вот код для отображения различных параметров на странице настроек с помощью API настроек WordPress. Поместите это в файл alternative.php .
function anti_adblock_page() { ?> <div class="wrap"> <h1>Anti Adblock</h1> <form method="post" action="options.php"> <?php settings_fields("anti_adblock_config_section"); do_settings_sections("anti-adblock"); submit_button(); ?> </form> </div> <?php } function anti_adblock_settings() { add_settings_section("anti_adblock_config_section", "", null, "anti-adblock"); add_settings_field("disable_website", "Do you want to disable website?", "disable_website_checkbox", "anti-adblock", "anti_adblock_config_section"); add_settings_field("disable_website_url", "Image to display when website is disabled", "disable_website_image_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code", "Do you want to display alternative ads code", "alternative_ads_checkbox", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_selector_1", "Alternaive Ad Code 1 Selector", "alternative_ads_selector_1_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code_1", "Alternaive Ad Code 1", "alternative_ads_code_1_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_selector_2", "Alternaive Ad Code 2 Selector", "alternative_ads_selector_2_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code_2", "Alternaive Ad Code 2", "alternative_ads_code_2_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("custom_css", "Custom CSS", "custom_css_input_field", "anti-adblock", "anti_adblock_config_section"); register_setting("anti_adblock_config_section", "disable_website"); register_setting("anti_adblock_config_section", "disable_website_url"); register_setting("anti_adblock_config_section", "alternative_ads_code"); register_setting("anti_adblock_config_section", "alternative_ads_selector_1"); register_setting("anti_adblock_config_section", "alternative_ads_code_1"); register_setting("anti_adblock_config_section", "alternative_ads_selector_2"); register_setting("anti_adblock_config_section", "alternative_ads_code_2"); register_setting("anti_adblock_config_section", "custom_css"); } function disable_website_checkbox() { ?> <input type="checkbox" name="disable_website" value="1" <?php checked(1, get_option('disable_website'), true); ?> /> Check for Yes <?php } function disable_website_image_input_field() { ?> <input name="disable_website_url" type="txt" value="<?php echo get_option('disable_website_url'); ?>" /> <?php } function alternative_ads_checkbox() { ?> <input type="checkbox" name="alternative_ads_code" value="1" <?php checked(1, get_option('alternative_ads_code'), true); ?> /> Check for Yes <?php } function alternative_ads_selector_1_input_field() { ?> <input name="alternative_ads_selector_1" type="txt" value="<?php echo get_option('alternative_ads_selector_1'); ?>" /> <?php } function alternative_ads_code_1_input_field() { ?> <textarea name="alternative_ads_code_1"><?php echo get_option("alternative_ads_code_1"); ?></textarea> <?php } function alternative_ads_selector_2_input_field() { ?> <input name="alternative_ads_selector_2" type="txt" value="<?php echo get_option('alternative_ads_selector_2'); ?>" /> <?php } function alternative_ads_code_2_input_field() { ?> <textarea name="alternative_ads_code_2"><?php echo get_option("alternative_ads_code_2"); ?></textarea> <?php } function custom_css_input_field() { $css = ".anti-adblock-textarea{display: none}" . get_option("custom_css"); file_put_contents(plugin_dir_path(__FILE__) . "custom.css", $css); ?> <textarea name="custom_css"><?php echo get_option("custom_css"); ?></textarea> <?php } add_action("admin_init", "anti_adblock_settings");
Вот как должна выглядеть наша страница настроек:
Здесь мы можем выбрать, хотим ли мы показывать альтернативную рекламу или полностью отключить доступ к веб-сайту для пользователей с установленным AdBlock.
Я предполагаю, что на вашем сайте есть два рекламных места размещения. Если у вас есть больше, добавьте больше полей на страницу настроек.
Для альтернативных объявлений сначала необходимо предоставить селектор для элемента HTML, который содержит рекламу, а затем рекламный код. Убедитесь, что в рекламном коде нет рекламных ключевых слов или что их URL не указывает на другую рекламную сеть. Иначе они тоже будут заблокированы. Вы можете найти селектор вашего рекламного контейнера, проверив элементы с помощью инструментов разработки вашего браузера. Это предоставит вам имя класса или идентификатор элемента HTML.
Наконец, у нас есть поле ввода для добавления пользовательского CSS для стилизации альтернативной рекламы. Этот CSS помещается в файл custom.css который будет встроен во custom.css интерфейс.
Передача данных из WordPress в JavaScript
Мы будем обнаруживать AdBlock, а затем блокировать или показывать альтернативные объявления с помощью JavaScript. Для этого нам нужно передать данные из настроек плагина в JavaScript.
Существуют различные способы передачи данных из WordPress в JavaScript, я предпочитаю передавать их с помощью атрибутов данных HTML5.
Поместите следующее в файл alternative.php .
function anti_adblock_footer_code() { if(get_option("disable_website") == 1) { ?> <span id="anti-adblock-disable-website" data-value="true"></span> <span id="anti-adblock-disable-website-url" data-value="<?php echo get_option('disable_website_url'); ?>"></span> <?php } else { ?> <span id="anti-adblock-disable-website" data-value="false"></span> <?php } if(get_option("alternative_ads_code")) { //change this if your are adding more fields. $count = 2; ?> <span id="anti-adblock-alternative-ads" data-value="true" data-count="<?php echo $count; ?>"></span> <?php for($iii = 1; $iii <= $count; $iii++) { ?> <textarea class="anti-adblock-textarea" id="alternative_ads_selector_<?php echo $iii; ?>"><?php echo get_option("alternative_ads_selector_" . $iii); ?></textarea> <textarea class="anti-adblock-textarea" id="alternative_ads_code_<?php echo $iii; ?>"><?php echo esc_html(get_option("alternative_ads_code_" . $iii)); ?></textarea> <?php } } else { ?> <span id="anti-adblock-alternative-ads" data-value="false"></span> <?php } } function anti_adblock_style_script() { wp_register_style("anti-adblock-custom", plugin_dir_url(__FILE__) . "custom.css"); wp_enqueue_style("anti-adblock-custom"); wp_enqueue_script('anti-adblock-script', plugin_dir_url(__FILE__) . "index.js", array("jquery"), '1.0.0', true); } add_action("wp_footer","anti_adblock_footer_code"); add_action("wp_enqueue_scripts", "anti_adblock_style_script");
Обнаружение AdBlock с помощью JavaScript
Нет прямого способа обнаружить AdBlock с помощью JavaScript. Мы должны создать среду песочницы с использованием JavaScript и проверить, виден ли тестируемый рекламный баннер пользователю или нет.
Поместите следующий JavaScript в файл index.js , который отвечает за обнаружение наличия AdBlock.
function adblock_detect() { var iframe = document.createElement("iframe"); iframe.height = "1px"; iframe.width = "1px"; iframe.id = "ads-text-iframe"; iframe.src = "http://example.com/ads.html"; document.body.appendChild(iframe); setTimeout(function() { var iframe = document.getElementById("ads-text-iframe"); if (iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0) { adblock_blocking_ads(); iframe.remove(); } else { iframe.remove(); } }, 100); } function adblock_blocking_ads(){}
Отключение сайта или показ альтернативной рекламы с помощью JavaScript
После того, как мы определили, блокирует ли AdBlock рекламу на нашей странице, мы должны действовать в соответствии с настройками нашего плагина.
Вот код JavaScript, который отключает веб-сайт или отображает альтернативные объявления в зависимости от наших предпочтений.
Добавьте следующий код в файл index.js .
function adblock_blocking_ads() { var blockwebsite = document.getElementById("anti-adblock-disable-website").getAttribute("data-value"); var alternativeads = document.getElementById("anti-adblock-alternative-ads").getAttribute("data-value"); if(blockwebsite == "true") { var url = document.getElementById("anti-adblock-disable-website-url").getAttribute("data-value"); document.body.innerHTML = "<div style='position: fixed; width: 100%; height: 100%; background-color:black; background-repeat: no-repeat; background-position: center center; background-image: url(" + url + ");'></div>"; } else if(alternativeads == "true") { var count = document.getElementById("anti-adblock-alternative-ads").getAttribute("data-count"); for(var iii = 1; iii <= count; iii++) { var selector = document.querySelector("#alternative_ads_selector_" + iii).innerHTML; if(selector != null) { document.querySelector(selector).innerHTML = htmlDecode(document.querySelector("#alternative_ads_code_" + iii).innerHTML); } } } } function htmlDecode(input) { var e = document.createElement('div'); e.innerHTML = input; return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; } window.addEventListener("load", function(){ adblock_detect(); }, false);
Наш полный исходный код плагина
Напомним, что нашему плагину нужны следующие файлы:
--alternative -alternative.php -Пользовательские CSS -index.js
Ниже приведен полный исходный код нашего плагина AdBlock.
alternative.php
<?php function add_anti_adblock_menu_item() { add_submenu_page("options-general.php", "Anti Adblock", "Anti Adblock", "manage_options", "anti-adblock", "anti_adblock_page"); } function anti_adblock_page() { ?> <div class="wrap"> <h1>Anti Adblock</h1> <form method="post" action="options.php"> <?php settings_fields("anti_adblock_config_section"); do_settings_sections("anti-adblock"); submit_button(); ?> </form> </div> <?php } add_action("admin_menu", "add_anti_adblock_menu_item"); function anti_adblock_settings() { add_settings_section("anti_adblock_config_section", "", null, "anti-adblock"); add_settings_field("disable_website", "Do you want to disable website?", "disable_website_checkbox", "anti-adblock", "anti_adblock_config_section"); add_settings_field("disable_website_url", "Image to display when website is disabled", "disable_website_image_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code", "Do you want to display alternative ads code", "alternative_ads_checkbox", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_selector_1", "Alternaive Ad Code 1 Selector", "alternative_ads_selector_1_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code_1", "Alternaive Ad Code 1", "alternative_ads_code_1_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_selector_2", "Alternaive Ad Code 2 Selector", "alternative_ads_selector_2_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("alternative_ads_code_2", "Alternaive Ad Code 2", "alternative_ads_code_2_input_field", "anti-adblock", "anti_adblock_config_section"); add_settings_field("custom_css", "Custom CSS", "custom_css_input_field", "anti-adblock", "anti_adblock_config_section"); register_setting("anti_adblock_config_section", "disable_website"); register_setting("anti_adblock_config_section", "disable_website_url"); register_setting("anti_adblock_config_section", "alternative_ads_code"); register_setting("anti_adblock_config_section", "alternative_ads_selector_1"); register_setting("anti_adblock_config_section", "alternative_ads_code_1"); register_setting("anti_adblock_config_section", "alternative_ads_selector_2"); register_setting("anti_adblock_config_section", "alternative_ads_code_2"); register_setting("anti_adblock_config_section", "custom_css"); } function disable_website_checkbox() { ?> <input type="checkbox" name="disable_website" value="1" <?php checked(1, get_option('disable_website'), true); ?> /> Check for Yes <?php } function disable_website_image_input_field() { ?> <input name="disable_website_url" type="txt" value="<?php echo get_option('disable_website_url'); ?>" /> <?php } function alternative_ads_checkbox() { ?> <input type="checkbox" name="alternative_ads_code" value="1" <?php checked(1, get_option('alternative_ads_code'), true); ?> /> Check for Yes <?php } function alternative_ads_selector_1_input_field() { ?> <input name="alternative_ads_selector_1" type="txt" value="<?php echo get_option('alternative_ads_selector_1'); ?>" /> <?php } function alternative_ads_code_1_input_field() { ?> <textarea name="alternative_ads_code_1"><?php echo get_option("alternative_ads_code_1"); ?></textarea> <?php } function alternative_ads_selector_2_input_field() { ?> <input name="alternative_ads_selector_2" type="txt" value="<?php echo get_option('alternative_ads_selector_2'); ?>" /> <?php } function alternative_ads_code_2_input_field() { ?> <textarea name="alternative_ads_code_2"><?php echo get_option("alternative_ads_code_2"); ?></textarea> <?php } function custom_css_input_field() { $css = ".anti-adblock-textarea{display: none}" . get_option("custom_css"); file_put_contents(plugin_dir_path(__FILE__) . "custom.css", $css); ?> <textarea name="custom_css"><?php echo get_option("custom_css"); ?></textarea> <?php } add_action("admin_init", "anti_adblock_settings"); function anti_adblock_footer_code() { if(get_option("disable_website") == 1) { ?> <span id="anti-adblock-disable-website" data-value="true"></span> <span id="anti-adblock-disable-website-url" data-value="<?php echo get_option('disable_website_url'); ?>"></span> <?php } else { ?> <span id="anti-adblock-disable-website" data-value="false"></span> <?php } if(get_option("alternative_ads_code")) { //change this if your are adding more fields. $count = 2; ?> <span id="anti-adblock-alternative-ads" data-value="true" data-count="<?php echo $count; ?>"></span> <?php for($iii = 1; $iii <= $count; $iii++) { ?> <textarea class="anti-adblock-textarea" id="alternative_ads_selector_<?php echo $iii; ?>"><?php echo get_option("alternative_ads_selector_" . $iii); ?></textarea> <textarea class="anti-adblock-textarea" id="alternative_ads_code_<?php echo $iii; ?>"><?php echo esc_html(get_option("alternative_ads_code_" . $iii)); ?></textarea> <?php } } else { ?> <span id="anti-adblock-alternative-ads" data-value="false"></span> <?php } } function anti_adblock_style_script() { wp_register_style("anti-adblock-custom", plugin_dir_url(__FILE__) . "custom.css"); wp_enqueue_style("anti-adblock-custom"); wp_enqueue_script('anti-adblock-script', plugin_dir_url(__FILE__) . "index.js", array("jquery"), '1.0.0', true); } add_action("wp_footer","anti_adblock_footer_code"); add_action("wp_enqueue_scripts", "anti_adblock_style_script");
index.js
function adblock_detect() { var iframe = document.createElement("iframe"); iframe.height = "1px"; iframe.width = "1px"; iframe.id = "ads-text-iframe"; iframe.src = "http://example.com/ads.html"; document.body.appendChild(iframe); setTimeout(function() { var iframe = document.getElementById("ads-text-iframe"); if (iframe.style.display == "none" || iframe.style.display == "hidden" || iframe.style.visibility == "hidden" || iframe.offsetHeight == 0) { adblock_blocking_ads(); iframe.remove(); } else { iframe.remove(); } }, 100); } function adblock_blocking_ads() { var blockwebsite = document.getElementById("anti-adblock-disable-website").getAttribute("data-value"); var alternativeads = document.getElementById("anti-adblock-alternative-ads").getAttribute("data-value"); if(blockwebsite == "true") { var url = document.getElementById("anti-adblock-disable-website-url").getAttribute("data-value"); document.body.innerHTML = "<div style='position: fixed; width: 100%; height: 100%; background-color:black; background-repeat: no-repeat; background-position: center center; background-image: url(" + url + ");'></div>"; } else if(alternativeads == "true") { var count = document.getElementById("anti-adblock-alternative-ads").getAttribute("data-count"); for(var iii = 1; iii <= count; iii++) { var selector = document.querySelector("#alternative_ads_selector_" + iii).innerHTML; if(selector != null) { document.querySelector(selector).innerHTML = htmlDecode(document.querySelector("#alternative_ads_code_" + iii).innerHTML); } } } } function htmlDecode(input) { var e = document.createElement('div'); e.innerHTML = input; return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; } window.addEventListener("load", function(){ adblock_detect(); }, false);
Скриншоты
Вот как это выглядит, когда вы отключаете весь сайт для пользователей AdBlock.
Вот как это выглядит, когда вы хотите показывать альтернативную рекламу.
Слово предостережения
Как уже упоминалось ранее, при предоставлении изображений, когда веб-сайт отключен, убедитесь, что URL-адрес изображения не содержит никаких ключевых слов, специфичных для рекламы. В противном случае они также будут заблокированы.
Точно так же убедитесь, что альтернативные объявления не указывают на какую-либо другую рекламную сеть или не указывают на URL-адреса с конкретными ключевыми словами объявления. В противном случае альтернативные объявления также будут заблокированы. В этой статье под альтернативной рекламой я имею в виду рекламу сервера из того же домена.
Последние мысли
Из моих собственных аналитических данных я могу сказать, что 25% посетителей сайта используют AdBlock. Если вы размещаете рекламу в сетях с платой за показ, этот плагин может сразу увеличить доход вашего сайта на 25%.
Если вы не хотите блокировать свой сайт, вы можете использовать функцию альтернативной рекламы, чтобы запросить у пользователя белый список вашего сайта.