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

Google обращает внимание реализована ли на сайте адаптивность. А значит лучше ее реализовать =)

Адаптивность -  корректное и удобное отображение сайта на разных устройствах: компьютере, планшете, мобильном телефоне.

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

В установке таких adsense блоков нет ничего сложного.

Немного об адаптивности

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

В большинстве случаев отзывчивые шаблоны имеют три вида отображения:

• На большом разрешении экрана: для обычных компьютеров - обычный вид, с сайдбаром сбоку.
• На среднем разрешении экрана: для планшетов - sidebar начинает отображаться не сбоку, а в низу страницы под основной областью с текстом. Основная область с текстом и сайдбар отображаются на всю ширину страницы.
• На маленьком разрешении экрана: для телефонов - вместо верхнего меню отображается более компактное выпадающее меню с теми же пунктами, сайдбар тоже "уходит" вниз.

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

Планирование блоков adsense

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

В основном на блогах рекламные блоки устанавливаются в трех местах:

• в шапке: широкий рекламный блок, сильно вытянутый в ширину
• в боковой колонке (сайдбаре): "небоскреб", сильно вытянутый в высоту
• внизу основного блока с текстом - квадратный или "прямоугольный" - без сильной вытянутости.

С местом отображения рекламных блоков определились - у нас будут три адаптивных adsense блока: в шапке, сайдбаре и в основном блоке с текстом.

Обсудим как будет изменяться их размер: будем "подгонять" блоки adsense под ширину экрана.

В качестве примера приведу размеры своих рекламных блоков adsense:

• Шапка:
  • На больших экранах отображается "Полный баннер" - 728 пикселей в ширину и 90 в высоту.
  • На средних экранах отображается "Баннер" - 468 x 60
  • На маленьких экранах отображается "Большой мобильный баннер" - 320x100
  • На очень маленьких экранах отображается "Малый баннер" - 234 x 60
• Сайдбар:
  • На больших и средних экранах: "Большой небоскреб" - 300 x 600
  • На маленьких экранах: "Широкий небоскреб" - 160 x 600.
• Низ основного блока с текстом:
  • На больших и средних экранах: "Большой прямоугольник" - 336 x 280
  • На маленьких экранах: "Квадратные" - 250 x 250

Cоздание адаптивного adsense блока:

• На странице google adsense переходим в "Мои объявления" и жмем на кнопку "Новый рекламный блок"
• Придумываем название блока и в выпадающем списке с размерами блоков выбираем пункт "Адаптивный"
• Жмем кнопку "Сохранить и получить код"
• В выпадающем списке с режимами выбираем "Расширенный" (об этом чуть ниже):

• Копируем рекламный код в текстовый редактор, для того, чтобы прописать в нем размеры экранов и рекламных блоков.

Есть два режима адаптивных блоков:

• Автоматический: в этом режиме код редактировать не нужно, можно сразу вставлять на сайт, но не факт что будут отображаться блоки именно тех размеров, которые вы хотите. Мне результат этого режима не понравился.
• Расширенный: в этом режиме можно отредактировать код рекламного блока и указать какие размеры блоков будут отображаться на тех или иных экранах.

Пример моего кода для рекламного блока в шапке:

<style>
 .top { width: 234px; height: 60px; }
 @media(min-width: 350px) { .top { width: 320px; height: 100px; } }
 @media(min-width: 500px) { .top { width: 468px; height: 60px; } }
 @media(min-width: 768px) { .top { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top -->
<ins class="adsbygoogle top"
 style="display:inline-block"
 data-ad-client="ca-pub-1234567890"
 data-ad-slot="987654321">
</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Пояснение к коду:

Размеры блоков указываются через css-стили между тегами <style> и </style>, именно эту часть скопированного кода и нужно редактировать:

• Строка ".top { width: 234px; height: 60px; }": на самых маленьких экранах показываем блок adsense размером 234 x 60 пикселей
• Строка  "@media(min-width: 350px) { .top-responsive { width: 320px; height: 100px; } }": на экранах с шириной 350 пикселей (минимум) и более показываем блок размером  320 x 100
• Строка "@media(min-width: 500px) { .top { width: 468px; height: 60px; } }": на экранах с шириной 500 пикселей (минимум) и более показываем блок размером  468 x 60
• Строка "@media(min-width: 768px) { .top { width: 728px; height: 90px; } }": на экранах с шириной от 768 пикселей отображать блок adsense размером 728 x 90

В моем примере я указал в четырех строках четыре размера блоков для четырех диапазонов ширины экрана:

• от 1 до 349 пикселей
• от 350 до 499 пикселей
• от 500 до 767 пикселей
• от 768 пикселей

У ваc диапазонов может быть как больше, так и меньше, а значит и строк с описанием диапазонов будет больше или меньше. Тут уже сами смотрите как Вам нравиться и делайте по аналогии.

Не загружать (не показывать) adsense на маленьких экранах:

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 945px) { .my_adslot { width: 728px; height: 90px; } }
@media(min-width: 1185px) { .my_adslot { width: 970px; height: 90px; } }
</style>
<ins class="adsbygoogle my_adslot"
style="display:inline-block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
var width = window.innerWidth || document.documentElement.clientWidth;
if (width > 540) {
document.write("<scr" + "ipt async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></scr" + "ipt>");
}
(adsbygoogle = window.adsbygoogle || []).push({});
</script>