Показ разных форматов рекламных блоков Adsense в зависимости от размера экрана

Здравствуйте, дорогие друзья. Сегодня я расскажу, как создать рекламный блок Google AdSense, которые будут иметь особый размер в зависимости от ширины экрана. Не путайте с обычными адаптивными блоками.

Статистика показывает, что разные форматы рекламных блоков на одном и том же месте работают по-разному. А с учётом размеров экрана статистика также меняется. И те блоки, которые показывают хороший результат на экранах персональных компьютеров – не работают на мобильных устройствах. Даже адаптивные рекламные блоки показывают результаты ниже, чем блоки с фиксированными размерами. Но, и этому есть решение.

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

Так, почему адаптивные блоки приносят меньший результат? Это зависит от многих факторов и одним из них является размер. Так, блок 580х400 будет эффективнее, чем тот же адаптивный на этом же месте, который примет размер 728х90.

У меня на блоге под заголовком статьи всегда был адаптивный блок 728х90, но я его заменил на 580х400. В итоге по доходности он обошёл самый доходный, адаптивный блок в теле статьи.

Но, такой особый размер не подходит для смартфонов. И поэтому на маленьких экранах у меня выводится блок 300х250, который прекрасно отображается на всех мобильниках и показывает лучший результат. Даже лучше адаптивного блока.

Принцип показа разных форматов рекламных блоков в зависимости от ширины экрана

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

Отталкиваться нужно от самого маленького экрана. Блок должен помещаться по ширине. Так, устройства с экраном 3,2 дюйма имеют ширину 320 пикселей. Таких устройств сегодня крайне мало, но откидывать их тоже не стоит.

Я советую для таких малышей выбрать размер блока 300х250. Если на вашем сайте нет посетителей с такими маленькими экранами, то вы можете выбрать размер 336х280.

Второй точкой, при которой меняется формат рекламного блока, может быть 500px. А формат рекламного блока может быть 468х60.

И тогда мы получаем, что на устройствах с шириной экрана до 500рх будет отображаться блок 300х250, а свыше 500 пикселей – блок 468х60.

Следующая точка может быть, к примеру, 800 пикселей. И на экранах свыше этой ширины можно показывать большой формат рекламного блока 580х400.

Медиазапросов может быть много, но достаточно 2-3 чтобы удовлетворить потребность в показе оптимальных форматов под разные размеры экранов мобильных устройств.

А теперь от слов к делу.

Настройка адаптивного рекламного блока Google AdSense напоказ в зависимости от ширины экрана

Итак, для реализации задуманного нам понадобится код адаптивного рекламного блока. Как создавать рекламные блоки, я рассказывал здесь.

Ваша задача создать в аккаунте Адсенс адаптивный рекламный блок. Из кода этого блока понадобится всего два параметра:

data-ad-client=»ca-pub-XXXXXXX11XX92»

data-ad-slot=»8XXXX61»

Эти параметры нужны для вставки в общий рекламный блок с медиазапросами:

<style>
.adaptiv_block_1 { width: 300px; height: 250px; }
@media(min-width: 500px) { .adaptiv_block_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .adaptiv_block_1 { width: 580px; height: 400px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adaptiv_block_1 -->
<ins class="adsbygoogle adaptiv_block_1"
 style="display:inline-block"
 data-ad-client="ca-pub-XXXXXXX11XXX9"
 data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Где вы меняете идентификатор клиента и блока (ca-pub-XXXXXXX11XXX9 и 8XXXXX1) на свои значения. А также если создаёте несколько таких блоков, то обязательно в следующем смените и обозначение блока (adaptiv_block_1).

Описание рекламного кода:

— на устройствах с шириной экрана до 499рх – показывается блок 300х250

— на устройствах с шириной экрана от 500 до 799рх – показывается блок 468х60

— на устройствах с шириной экрана от 800рх – показывается блок 580х400

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

Вставка рекламного кода в шаблон сайта

Вставить рекламный код на сайт вы можете любым удобным для вас способом. Это может быть непосредственная вставка код в исходный код шаблона или использование шорт кодов и функций.

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

Итак, для своей темы я создал вот такой код, и добавил его в функции темы, для показа рекламного блока под заголовками статей.

/* адаптивный блок adsense под заголовком статьи */
add_action('__before_content','adsense1',100);
function adsense1() {
 if ( !is_single() )
 return;
echo "<style>
.pod_zagolovkom_stati { width: 300px; height: 250px; }
@media(min-width: 580px) { .pod_zagolovkom_stati { width: 580px; height: 400px; } }
</style>
<div id='center-ads'><script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<!-- Блок под заголовком статьи -->
<ins class='adsbygoogle pod_zagolovkom_stati'
 style='display:inline-block'
 data-ad-client='ca-pub-1952XXX157272092'
 data-ad-slot='912XXX4160'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>";
}

Примечание: я добавил условие !is_single для показа блока только под заголовками статей и заключил рекламный код в блок ДИВ с идентификатором id=’center-ads’, для которого в стилях добавил выравнивание по центру text-align: center;

Если будет использовать мой код, смените идентификатор клиента и блока на свои.

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

Если остались вопросы, буду рад ответить на них в комментариях. Желаю вам успехов!

С уважением, Максим Зайцев.