Как сделать рекламу от Яндекс Директ и Гугл Адсенс адаптивной (мобильной)

Ну или скажу иначе - как на мобильном показывать одни рекламные блоки Директа (например, Motion) а на десктопе - другие? Ниже в примере Постер на 3 объявления - с десктопной версии.

Но начну я с настройки адаптивных блоков Адсенс. Если помните, я там просто меняю формат блоков с data-ad-format="auto" на data-ad-format="rectangle". Слишком уж много в блоках узких горизонтальных объявлений. А так выводятся только большие прямоугольные и квадратные. Но если очень нужно, модно под каждый размер экрана выбрать свой размер объявлений. Нужно только грамотно настроить стили и медиа-запросы.

Да, кстати, еще как-то на сайте была тема про переделку крутилки Озона для мобильного сайта.

Но сегодня я хочу рассказать про скрипт для Директа, который как-то даже одобрила техподдержка сервиса. Хоть сам Директ меня очень сильно разочаровал в последнее время.

Раньше все было намного проще. Можно было просто менять количество объявлений (того же Постера) в зависимости от ширины экрана. Теперь на каждую ширину нужно создать по отдельному объявлению.

var limmw=document.getElementsByTagName("body")[0].offsetWidth;

if(limmw<=960) {

// Мобильная реклама

document.write('Тут DIV c id блока 1');

} else {

// Обычная реклама

document.write('Тут DIV c id блока 2');

}

В принципе, с условиями можно играться долго. У меня, например, Постер идет с 3 объявлениями на десктопе и по мере уменьшения экрана переходит в 2 - 1 объявление. Важно только учесть, что сам блок рекламы должен быть со стилями overflow: hidden или обернуты в дивы с такими стилями. Яндекс любит пихать в RTB блоки какого угодно размера. И будет очень неприятно, если из-за них вся верста уедет и появится боковая прокрутка.

В принципе, в части заказов по адаптации сайтов под мобильные устройства, вся работа с рекламой и сводилась только к избежании прокрутки на мобильных телефонах и планшетах, а десктопные блоки рекламы просто обрезались сбоку. Но мне не всегда нравится такой подход.