Код адаптивного рекламного блока 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.
Не обязательно проверять адаптивность именно на мобильнике, для этого есть онлайн-сервисы, например 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.
Исправляем в сайдбаре
Можно конечно сделать так (выводя что на 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> |
Thank you ever so for you post.Much thanks again.