Настройка адаптивной рекламы от Гугл Адсенс
Так как я зарабатываю и на Гугл Адсенс, иногда приходится менять или настраивать его блоки. Сегодня вот (оптимизируя показ сайтов на мобильных устройствах) я добрался до асинхронных адаптивных блоков рекламы. Точнее, до асинхронных-то я добрался немного раньше. А вот адаптивные только сейчас стал устанавливать.
И сразу возникла проблема. Гугл не хочет показывать красивые прямоугольные блоки! Он показывает тощие баннеры. Да так, что текст на них стоит не по центру, а постоянно упирается в левый край!
У меня нашлось целых три решения.
Для начала, есть специальный расширенный формат показа блоков. Но его я использовал только на одном сайте. Там реклама показывается после загрузки страницы и размер блока вообще не хочет вычисляться автоматически.
Хотя, намного лучше пошел обычный автоматический блок с заменой настройки auto на data-ad-format="rectangle". С этой настройкой показываются только прямоугольные и квадратные объявления.
Еще я добавил такую вот таблицу стилей. Да, она предназначена, по идее, для расширенного блока (с некоторыми изменениями) только с ней Гугл чаще показывает большие прямоугольные баннеры.
Кстати, эти стили применимы, когда объявление занимает 100% ширины экрана. Для меньшей ширины (когда, например, часть экрана занимает боковая колонка) достаточно установить везде width: 100%; или вообще оставить только height.
Также, можно к @media(min-width: ***px) добавить ширину нашей колонки.
@media(min-width: 128px) { .adsbygoogle { width: 125px; height: 125px; } }
@media(min-width: 183px) { .adsbygoogle { width: 180px; height: 180px; } }
@media(min-width: 203px) { .adsbygoogle { width: 200px; height: 200px; } }
@media(min-width: 253px) { .adsbygoogle { width: 250px; height: 250px; } }
@media(min-width: 303px) { .adsbygoogle { width: 300px; height: 250px; } }
@media(min-width: 339px) { .adsbygoogle { width: 336px; height: 280px; } }
@media(min-width: 583px) { .adsbygoogle { width: 580px; height: 400px; } }
@media(min-width: 730px) { .adsbygoogle { width: 728px; height: 400px; } }
@media(min-width: 973px) { .adsbygoogle { width: 970px; height: 400px; } }
@media(min-width: 983px) { .adsbygoogle { width: 980px; height: 400px; } }