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


Здравствуйте, дорогие друзья. Сегодня я расскажу, как создать рекламный блок 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;

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

  • Sergey

    Спасибо за материал. Вопрос. Как бороться с дублированием рекламных объявлений?
    Сейчас размещено блока в статье (1 в центре текста и 1 под текстом), оба показывают одинаковые объявления. data-ad-slot разные.

    • Максим Зайцев От автора

      Сергей, добрый вечер. Содержимое блоков определяется системой. Мы на это влиять не можем. Может помощь лишь разный формат объявлений.

  • Николай

    Максим, привет! А как насчет статистики с таким блоком? Он будет в статистике адсенс отображаться и не повлечет ли это блокировку аккаунта за нарушение правил Гугл адсенс?

    • Максим Зайцев От автора

      Николай, привет. Никаких нарушений правил Адсенса здесь нет. В чём нарушение? Это единственный способ, без вмешательство в рекламный код, сделать такую удобную фишку. И Гугл это полностью одобряет. И статистика по клиентским каналам тоже отображается.

      • Николай

        Раньше я таких решений с кодами блоков адсенсе не встречал, может просто про это не пишут?
        Максим, а как сейчас на модерацию сайт в РСЯ отсылать? Раньше это было возможно, сейчас нет. Не могут же они только со старыми партнерами работать, верно? Должны же и новые сайты принимать…

        • Максим Зайцев От автора

          Пишут, я его из справки Адсенс высмотрел, это отличное решение, которое работает.
          А в РСЯ принимают, регистрация работает. Только что проверил. Только пройти проверку сложно. Нужно всю рекламу с сайта убрать и пробовать пройти модерацию.

      • Юрий

        Максим, добрый вечер! Было бы полезно упомянуть, что если рекламное объявление будет размещено сразу под шапкой, то в верхней части страницы для мобильных нельзя использовать рекламные блоки размером 300 x 250 и больше. Из-за них пользователю придется прокручивать страницу, чтобы увидеть основной контент.
        https://support.google.com/adsense/answer/1346295?hl=ru&ref_topic=1307438#Difficult_to_distinguish_ads_and_content (ссылка на правила Adsense). Думаю для старого и авторитетного аккаунта Adsense это не критично, а вот новички могут и нарваться на неприятности за нарушение правил.

        • Максим Зайцев От автора

          Юрий, добрый вечер. Спасибо за дополнение. Правилами пренебрегать нельзя. Но, я бы вообще под шапкой не размещал блоки, так как это малоэффективное место. Лучше сосредоточиться на контенте.

    • Максим Зайцев От автора

      Иван, добрый день. В течение месяца. Этот формат на 200% лучше обычного адаптивного. Сейчас запустил новый эксперимент с цветовыми схемами.

  • Павел

    Максим спасибо за доработанный код, уже обновил его у себя на сайте. Чтобы развеять сомнения Николая по поводу блокировки в adsense, публикую ссылку https://support.google.com/adsense/answer/6307124?hl=ru

  • Вика

    Максим, Ваш блог просто находка для непросвещенных. Спасибо, все установилось и работает.

    • Максим Зайцев От автора

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

      • Вика

        Спасибо, Максим, и Вам удачи! Скажите, пожалуйста, а точно можно размещать объявления сразу после заголовка статьи, для мобильной версии сайта от Гугла пришло уведомление, чтобы убрали, может быть и для стационарной версии нельзя?

        • Максим Зайцев От автора

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

          • Вика

            Спасибочки за разъяснения! Но все же несмотря на хороший результат, на дестопе тоже убрала, поставлю лучше после первого абзаца.

          • Максим Зайцев От автора

            Всё правильно, лучше подстраховаться! Удачи!

  • Андрей

    Доброго времени суток Максим. Скажи,а можно на сайте делать блоки adsense так сказать «липкими», фиксирующегося при прокрутке? Как google adsense к этому относится. Не будет ли бана аккаунта от них?

    • Максим Зайцев От автора

      Добрый день, Андрей. Будет бан однозначно. Так можно делать только через партнёров. То есть если вы видели такие плавающие блоки, то они работают через партнёров. Напрямую адсенс это запрещает. Хотя, можно попробовать написать в поддержку с просьбой разрешить. Есть случаи, когда разрешают.

      • Андрей

        Доброго времени Максим. Можно разместить на сайте 4 блока adsense?
        1) шапка 728×90;
        2) сайдбар 300 x 600;
        3) адаптивный в зависимости от размера экрана (в статье);
        4) адаптивный в зависимости от размера экрана (в статье).
        P.S Есть ещё поиск от гугл

        • Максим Зайцев От автора

          Андрей, сейчас можно. Адсенс отменил ограничение на количество блоков. Теперь определяется соотношение контент = реклама. Блоков может быть больше, при условии что и статьи объемные.

  • Сергей

    Здравствуйте.
    Может подскажете, как вставить код «Настройка адаптивного рекламного блока Google AdSense напоказ в зависимости от ширины экрана» в шорткод и размещать его в тексте слева/по центру/справа.

    • Максим Зайцев От автора

      Здравствуйте, Сергей. Вы можете посмотреть эту статью http://1zaicev.ru/3-sposoba-razmestit-reklamnyj-kod-adsense-na-sajte-wordpress/ и использовать код шорткода и адаптивного блока. А, что касается выравнивания в тексте, то нужно код блока поместить в блок ДИВ и применить к нему стили выравнивания.

      • Сергей

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

        • Максим Зайцев От автора

          Проблем таких не должно быть, видимо с общим кодом не стыкуется. Тут ведь достаточно одной кавычки и сайт не работает. А с вставками в функции темы нужно быть внимательным, нужно понимать где эти самые кавычки двойные, а где одинарные и так далее. В общем, как-то так. Успехов вам с плагином!

          • Андрей

            Здравствуй Максим. Скажи будет ли бан от гугла за такое оформление рекламного блока от adsense как на этом сайте: http://felomena.com/sonnik/test-novaya/ (в середине ближе к низу ,на фото с рукой)

          • Максим Зайцев От автора

            Здравствуйте, Андрей. Явного призыва кликнуть по объявлению нет, но это ещё не значит, что в самом рекламном объявлении не будет нечто подобного. Так например, недавно Гугл прислал моему клиенту предупреждение, что рекламный блок поход на блок с видео YouTube и вводит в заблуждение посетителей. Хотя, клиент ничего не делал, реклама в блоке была с призывов «посмотри видео», на чёрном фоне блока это действительно выглядело как плеер YT.
            Так что я бы не советовал использовать подобное оформление рекламных блоков!

      • Оксана

        А можно для тех, кто в танке — как добавить выравнивание text-align: center в стили?
        И еще у меня вот эта часть:
        add_action(‘__before_content’,’adsense1′,100);
        function adsense1() {
        if ( !is_single() )
        return;
        echo »
        почему-то просто текстом отобразилась на сайте, я её просто удалила. Реклама работает, только в окошко не помещается целиком…Это нормально?..

        P.S. Спасибо, установила ваш код. Надеюсь Адсенс не будет ругаться 🙂

        • Максим Зайцев От автора

          Оксана, если код код отобразился на странице, значит вы допустили ошибку. На странице должна быть только реклама. Где допустили ошибку не подскажу, так как это нужно смотреть. Стили выравнивания нужно добавлять в файл стилей. Изначально помещаете свой код в блок ДИВ с классом и для этого класса присваиваете стили. В комментариях коды у меня запрещены, так пример не покажу.
          Мой код использовать можно, только идентификаторы вставьте свои!

          • Оксана

            Вот такой блок надо поставить после закрывающего тега и перед моим рекламным кодом? А в вашем коде такого вроде нет, вместо него вот этот: …Это то же самое?
            А в style.css в любом месте можно вставить код?
            Я брала ваш первый код, с ним проблем не было, только реклама в мобильной версии съезжает вправо. Вообще чем отличаются первый и второй коды в вашей статье?
            Спасибо большое!

          • Максим Зайцев От автора

            Оксана, первый код — это пример кода, который можно вставлять в шаблон сайта напрямую. Второй для вставки через файл functions.php. Вы использовали первый код и вставили его в шаблон, в файл отвечающий за статьи или другой файл. Это правильно. Блок полностью адаптивный и на мобильном устройстве не должен выходит за рамки шаблона. Если так происходит, значит у вас есть элементы шаблона, которые выходят за пределы экрана.
            Стили нельзя вставлять где угодно, лучше разместить их поближе к началу файла. В конце, как правило, у вас медиазапросы, и вы их можете нарушить, если не знаете что это такое.

  • Павел

    Максим привет, вчера получил предупреждение от adsense за то что ввожу в заблуждение пользователей, за блок 300*250 под H1 в мобильном контенте, подскажи как можно сделать чтобы в декстопе реклама под h1 показывалась а в адаптивной версии сайта, показов не было. Есть ли такое решение.

    • Максим Зайцев От автора

      Паша, привет. Конечно такое возможно, в предложенный мною код внести вот такие изменения вначале:

      .pod_zagolovkom_stati { display: none; }
      @media (min-width: 580px) { .pod_zagolovkom_stati { width: 580px; height: 400px; } }

      Размеры я привёл для рекламного блока, как у меня на блоге. То есть пока размер окна браузера не превысит 580px блок не показывается, а замете показывается большой блок 580х400 px. Сделай так на своём сайте и отправь сообщение в аккаунте адсенс о том что исправил ошибки. Удачи!

  • Sergey

    Подскажите, есть адаптивный блок. На мобильных устройствах хочу показывать размер 320х100, а в остальных случаях надо, чтобы он по-пержнему адаптивно подстраивался под размеры экрана.

    В справке гугла приведен такой код:

    .example_responsive_1 { width: 320px; height: 100px; }
    @media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
    @media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }

    …далее код вызова объявления…

    Однако в данном случае, насколько я понимаю, блоки на экранах разрешением свыше 500рх будут именно фиксированные (468*60 и 728*90), т.е. уже не адаптивные. Подойдет ли такой вариант?

    @media(max-width: 500px) { .example_responsive_1 { width: 320px; height: 100px; } }

    …далее код вызова объявления…

    Т.е. бы изначально убираем запись о размере этого блока (.example_responsive_1 { width: 320px; height: 100px; }), и говорим что только лишь при экране до 500px, блок должен быть 320*100, а в остальных случаях — подстраиваться по размеры экрана.

    • Максим Зайцев От автора

      Идею я понял, нужно пробовать. Только нужно учитывать, что в этой строке .example_responsive_1 { width: 320px; height: 100px; } фигурирует класс, который и дальше используется в коде.