Делаем адаптивные блоки Google Adsense по настоящему адаптивными

Код адаптивного рекламного блока Google Adsense выглядит так
(только вместо xxx — будет ваш код):

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Лайфхак — заменив auto на rectangle, получите более высокий блок.

Содержание

1 Как мы видим адаптивные блоки
2 Что будем делать
3 Исправляем в записи
4 Исправляем в сайдбаре

Как мы видим адаптивные блоки

Таким мы видим стандартный адаптивный блок Adsense на desktop
в теле статьи и в сайдбаре (тема WP Jarida):

А так эти же блоки выглядят на мобильнике:

Рекламные блоки растянулись на всю ширину мобильника, не нарушив адаптивности (так как нет скролла влево-вправо),
но перекрыв область вывода темы оформления Вордпресс.

Не критично конечно, но «как-то неаккуратненько доктор».

Что будем делать

Попробуем это исправить внеся небольшие изменения в код рекламного блока согласно справки Adsense: Фиксированная высота и переменная ширина.

Обратите внимание, что приведенные в этой статье примеры являются разрешенными модификациями рекламного кода AdSense. Это означает, что изменив код адаптивного рекламного блока указанными ниже способами, вы не нарушите правила программы AdSense.

Не обязательно проверять адаптивность именно на мобильнике, для этого есть онлайн-сервисы, например adaptivator.ru

ширина рабочей области — 620 px;
ширина сайдбара — 300 px.

Исправляем в записи

убираем строку data-ad-format
дорабатываем строку style=display

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
   style="display:inline-block;min-width:290px;max-width:620px;width:100%;height:300px"
   data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
   data-ad-slot="xxxxxxxxxx"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Тем самым выводя на desktop рекламный блок шириной 620 px, а на мобильнике — 290 px.

Исправляем в сайдбаре

Можно конечно сделать так (выводя что на desktop, что на мобильнике рекламный блок чуть меньшей ширины — 290 px):

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:290px;height:300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>

Но лучше сделать как в примере с записью, в результате чего на десктопе будет браться ширина 300 пикселей, а на мобильнике — 290:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;min-width:290px;max-width:300px;width:100%;height:300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>(adsbygoogle=window.adsbygoogle||[]).push({});</script>

Оцените, пожалуйста, статью, я старался :)

(голосов: 7, оценка: 5,00 из 5)