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

Получив в Google Adsense код адаптивного рекламного блока:

<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.

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

<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>

Но лучше сделать как в примере выше и выводить на разные устройства блоки разной ширины:

<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 на мобильнике

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

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

3 + 11 =