Делаем адаптивные блоки 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, получите более высокий блок.

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

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

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

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

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

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

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

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

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

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

    Для справки, в теме WP Jarida:

  • ширина рабочей области — 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.

Адаптивный исправленный блок Adsense в записи на мобильнике

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

Можно конечно сделать так (выводя что на 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>

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

Оцените, пожалуйста, статью, я старался :) (голосов: 3, оценка: 5,00 из 5)
Комментарии
  1. Thank you ever so for you post.Much thanks again.

Задайте вопрос в комментариях

десять + семнадцать =