Главная » Вебмастеру » Как сделать адаптивный рекламный блок AdSense

Как сделать адаптивный рекламный блок AdSense

2016-09-29 / Вр:10:11 / просмотров: 4502

Совсем недавно я получил сообщение от AdSense, что моя площадка нарушает правила, а именно, что рекламный блок на мобильных устройствах сильно большой. Если и у вас возникла такая ситуация, не расстраивайтесь, так как это хороший пинок под зад, чтобы что-то поменять и улучшить сайт.
Мне это сообщение помогло разобраться и улучшить рекламные блоки для мобильных устройств на своем сайте.

Улучшить рекламные блоки для мобильных устройств

Итак, в этой статье, я расскажу, как задать размеры адаптивного рекламного блока для экранов мобильных устройств и компьютеров. Буду использовать медиа-запросы CSS.
Идея не моя, а команды AdSense, а это значит, что условия правил о нарушениях речи и быть не может.
В коде ничего сложно нет, разберется даже школьник, а вы тем более.
Используя адаптивный рекламный блок, вы можете автоматически применять разные форматы объявлений в зависимости от параметров экрана и устройства пользователя.

Вот примеры фиксированного размера рекламного блока в зависимости от ширины экрана:

для экранов с шириной меньше 500 пикселей – размер рекламного блока 320 x 100;
для экранов с шириной в диапазоне от 500 до 799 пикселей – размер рекламного блока 468 x 60;
для экранов с шириной 800 пикселей или больше – размер рекламного блока 728 x 90.

А вот так будет у вас на сайте:

<style>
.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; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsbygoogle -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXХХXXXХ"
data-ad-slot="XXXXXXXXXX "></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Примечание:
Строка №5 – замените ca-pub-XXXXXXXХХXXXХ своим идентификатором издателя.
Строка №6 – замените XXXXXXXXXX идентификатором своего рекламного блока.
example_responsive_1 – это уникальный класс для блока, его можно придумывать самостоятельно (название должно быть английскими буквами (A-Z), можно цифрами и символами).

Что мы сделали? Разложу по полочкам.
Изначально у вас на сайте примерно был вот такой рекламный код блока AdSense:

<style>
.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; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsbygoogle -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXХХXXXХ"
data-ad-slot="XXXXXXXXXX "></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Теперь добавим CSS стили с медиа-запросами:

<style>
.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; } }
</style>

и здесь тоже не забудьте указать класс «example_responsive_1»:

...
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
...
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Чтобы установить другие размеры рекламных блоков, выполните следующие действия в образце кода:

для экранов с шириной меньше 500 пикселей – замените значения 320px и 100px.
для экранов с шириной в диапазоне от 500 до 799 пикселей – замените значения 468px и 60px.
для экранов с шириной 800 пикселей или больше – замените значения 728px и 90px.

Размеры рекламных блоков смотрите в своем личном кабинете AdSense