Оформление кода AdSense через CSS

Вступили в силу новые правила размещения блоков AdSense, согласно которым нельзя показывать вверху мобильных страниц большие объявления. Рекомендовано 300/100 , запрещено 300/250. Отсюда возникают проблемы с размещением адаптивных блоков для показа на мобильных устройствах и компьютерах (ноутах и прочих десктопах). Сегодня я объясню, как показывать разные размеры объявления с одного адаптивного или обычного рекламного блока на разных устройствах.

Если у вас Joomla Mobile, то вставьте оптимальные блоки в разные файлы index.php, а вот с адаптивным шаблоном такие манипуляции не пройдут. Всё решается просто, один код у вас станет показывать на разных устройствах объявления отлИчного размера.

Код Googla под CSS

Адаптивный блок

Приводить десятки вариантов адаптивного блока я не буду, укажу один на примере блога Zegeberg, далее всё понятно интуитивно.

Вверху у меня всегда стоит баннер или горизонтальный блок, пока ничего менять не собираюсь. Задача сделать так, чтобы на мобильных устройствах показывались объявления Google шириной во весь экран, а на десктопе ширина блока была 600 px. Высота везде устраивает 100 px.

Пример блока

Для этого я сделал в коде такие изменения:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Адаптивный -->

<ins class="adsbygoogle"

style="display:inline-block;min-width:300px;max-width:600px;width:100%;height:100px"

data-ad-client="ca-pub-XXXXXX"

data-ad-slot="XXXXXXXX"

data-ad-format="horizontal"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Изменены строки

data-ad-format="horizontal"

и

style="display:inline-block;min-width:300px;max-width:600px;width:100%;height:100px"

Размеры блока в коде AdSense

Последняя строка указывает, что минимальная ширина блока 300 px (помним рекомендации Google), а максимальная ширина 600 px. Width:100% указывает, что между 300 и 600 px пространство заполнится по ширине. Проще говоря, если у посетителя смартфон с шириной 360, то и блок он увидит такой же. Высота меня устраивает 100 px, она статична для всех объявлений. В строке кода style можно играть с разными значениями, помните только, что вверху мобильных страниц нельзя ставить большой блок.

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

Вывод рекламы через CSS

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

Править надо код AdSense и стили CSS. Начнём с кода.

В стандартном коде изменяем название на уникальное. У меня это будет my_site_1. Название надо поменять в двух местах кода, ниже места выделены strong. Также проверьте, чтобы в строке Style стояло display:inline-block.

Пример

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- my_site_1 -->

<ins class="adsbygoogle my_site_1"

style="display:inline-block"

data-ad-client="ca-pub-XXXXXXXX"

data-ad-slot="xxxxxxxx"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Код CSS

Теперь надо создать стили CSS для класса my_site_1. Я в файле стилей прописал так:

my_site_1 { width: 320px; height: 100px; } @media(min-width: 500px) { .my_site_1 { width: 300px; height: 250px; } } @media(min-width: 800px) { .my_site_1 { width: 300px; height: 250px; } } @media(min-width: 1000px) { .my_site_1 { width: 580px; height: 400px; } }

В результате на смартфонах у меня показывает рекомендованный Google блок 320/100 px, в Айфонах размер объявлений 300/250 px, а на десктопе большой блок 580/400 px. Через медиа-запрос @media можете прописать размеры блоков более детально, по мне этого хватит.

Все манипуляции с кодом и стилями белые, никаких нарушений правил пользования системой Google AdSense нет.

Справка от Гугл на посошок.