Рекламный блок в зависимости от разрешения экрана в адаптивном дизайне

По данным статистики LI.ru, доля мобильного трафика в Рунете превышает 50% — пора подумать об удобстве для мобильных посетителей вашего сайта. При выборе между адаптивным дизайном (responsive design) и мобильной версией сайта Google рекомендует отдать предпочтение адаптивному дизайну. В этом варианте для показа сайта на устройствах с любой диагональю экрана используется одна тема оформления. В таком подходе есть как плюсы, так и минусы. Один из важных минусов — единый код рекламных блоков для всех посетителей. Но эту проблему можно решить.

Если хотите сделать шаблон своего сайта адаптивным, рекомендую ознакомиться с моей статьёй «Вёрстка адаптивного макета».

Далее о том, как размещать разные рекламные блоки в зависимости от ширины экрана. Я опишу вариант с рекламными блоками Google Adsense. Этот же принцип можно применить при вставке кодов других рекламных бирж.

По проведённым тестам, eCPM рекламных блоков 580×400 значительно выше, чем у адаптивных блоков с автоматически изменяемой шириной. Но такие блоки не поместятся в экран с шириной меньше 580 пикселей. В адаптивном дизайне я использую следующий код, чтобы не отказываться от блоков 580×400, но на устройствах с низким разрешением показывать адаптивный блок.

ads-responsive

Для использования на вашем сайте, вы должны изменить идентификаторы объявлений (data-ad-slot) и издателя (data-ad-client). Значения берёте в кодах рекламных блоков, которые получаете в аккаунте Adsense.

Предполагается, что контент сайта находится в блоке с идентификатором «content», например: <div id="content">. В зависимости от ширины этого блока в переменную s записывается изменяемая часть объявления и подставляется при генерации содержимого страницы. Также можно вставлять совершенно разные рекламные блоки в зависимости от ширины контента. Например, так:

<script>
if (document.getElementById('content').offsetWidth > 579) {
// JS-код блока для широких дисплеев или
// document.write( 'произвольный html-код' );
} else {
// код блока для мобилок
}
</script>

Ограничение этого способа в том, что рекламный код вставляется при генерации страницы и не меняется при смене ориентации экрана. А ведь при смене ориентации ширина контентной части может стать больше или меньше. Полагаю, что есть возможность обработки жаваскриптом события смены ориентации, но тут появляются новые заморочки (например, при каждой смене ориентации будет загружаться новый блок Adsense, и будет превышен лимит по количеству объявлений для одной страницы). Я посчитал, что это не столь важный момент, чтобы искать решение. Но ваше мнение с удовольствием почитаю в комментариях.

Запись опубликована в рубрике Web-мастеринг с метками , . Короткая ссылка для добавления в закладки: Рекламный блок в зависимости от разрешения экрана в адаптивном дизайне.

6 Responses

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.