Адаптация рекламы Adsence для мобильных устройств
В мае этого года Гугл обещает ужесточить ранжирование поиска в своей мобильной выдаче. В связи с этим все большее количество веб-мастеров адаптируют свои сайты под мобильные устройства. Вместе с этим встает вопрос, что делать с рекламой ? Десктопные блоки выглядят в мобильной выдаче коряво и портят весь вид.
Вариантов решения проблемы конечно как всегда несколько. На мой взгляд, самых толковых из них два:
Сделать для каждого из блоков @media — свой рекламный блок adsence.
Сделать для каждого блока adsence свои значения @media в css.
Первый вариант чуть более простой в реализации, но более длинный в исполнении. Если рассматривать на конкретном примере, у меня на сайте 3 блока рекламы на странице: верхний баннер, баннер ссылок в центре и нижний баннер. Если бы я выбрал первый вариант, то для адаптации рекламы мне нужно было бы сделать 3 блока рекламы для десктопа и 3 блока для мобильного. Еще возможно 3 промежуточных блока для планшетов — по желанию. Уже получаем 9 блоков, плюс еще отдельный код css под каждый блок. Довольно громоздкий путь. Именно поэтому я выбрал второй вариант решения этой проблемы.
Делаем блоки adsence адаптивными
Я рассмотрю тут пример для одного баннера, остальные делатюся по аналогии.
Заходим в adsence, создаем новый рекламный блок, выбираем его параметры для десктопа и сохраняем. Получаем примерно такой код:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- Feanor184_banner -->
<ins class="adsbygoogle"
style="display:inline-block;width:630px;height:100px"
data-ad-client="ca-pub-3154024723304325"
data-ad-slot="2948602976"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Далее, мы создаем у нас в css отдельный класс для этого блока, чтобы сделать его адаптивным.
.adsence_feanor184_banner { width: 630px; height: 120px; }
/* размеры для мобильных устройств */
@media(min-width: 500px) { .adsence_verh_banner { width: 320px; height: 100px; } }
/* размеры для десктопов */
@media(min-width: 800px) { .adsence_verh_banner { width: 630px; height: 120px; } }
Теперь чтобы сделать рекламу адаптивной, нам нужно немного поправить сам скрипт рекламы — размеры, чтобы он правильно отображался в мобильной версии и брал новые размеры из присвоенного класса css, и поправить ins class.
В итоге получаем адаптивную рекламу которая меняется в зависимости от размеров устройства с которого открыт сайт:
<div class="adsence_feanor184_banner"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script> <!-- Feanor_NIZ_banner --> <ins class="adsbygoogle adsence_feanor184_banner" style="display:inline-block" data-ad-client="ca-pub-3154024723304325" data-ad-slot="2948602976"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>
Измененные и добавленные строки выделены цветом.
Я что то упускаю или я один просто в мобильной версии использую резиновый блок. Просто тупо скопировал в нужное место под публикацией код «резинового» баннера и он сам автоматически «подстраивается» под размеры дисплея телефона.
Заходил с разных телефонов, планшетов- всё вполне себе адекватно отображается. Правда для этого способа нужно иметь отдельно мобильную версию сайта, коея лично у меня имеется))
Евгений, не увидел у вас на сайте адаптивного блока)
Под публикацией посмотрите, там есть. Не оборачивал его ни в какие адаптивные блоки. Просто скопировал код и он сам подстраивается под ширину блока публикации)
Ну или если на индексной странице- то между последней публикацией и навигацией по страницам.
А я думал, что адаптивные блоки адсенса и без переделок подстраиваются под любое устройство
Алексей, иногда нужны фиксированные блоки) Адаптивные не всегда адекватно себя ведут — и конверсия у них почему-то в моем случае сильно ниже. Видимо выбираются неудачные размеры.
Я лично свой сайт адаптировал под мобильные устройства с помощью плагина. Рекламы у меня нет на сайте, поэтому не замарачиваюсь. И честно сказать плагин работает не совсем корректно. и не на всех устройствах сайт отображается как положено. то картинки съезжают то кнопки накладываются друг на друга. Поэтому проблема с адаптпцией сайта под мобильные устройства будет еще долго актуальной мне кажется.
Спасибо за решение ) У меня на сайте, когда делали адаптацию вообще отключили эдсэнс, хотя общее количество кликов особо не уменьшилось. Если кто сможет помочь за вознаграждение — пишите на email. Адрес сайта Вы знаете где искать )
А я просто ставлю блок 300х250 в начало и конец и выравниваю только посередине и нормально.
А на днях они анонсировали новый вид блоков для мобильных.
Я тоже не парился и поставил адаптивный блок гугла. Всё равно на содержение рекламных блоков вебмастера могут влиять лишь опосредовано, поэтому не думаю, что это как-то повлияло на конверсию (которая и так ниже некуда).
По идее с мобилок должно быть больше кликов, одно неверное движение и палец уже кликнул на какую-то ерунду.
а я решил вовсе отказаться от адсенса в мобильных версиях. Реально конверсия очень слабая. Но зато как убрал адсенс, пользовательские значительно поднялись (именно что касается мобильных версий)
Если лениво во всём этом разбираться, заранее можно брать адаптируемые блоки, например, 580х400 в контент. Агрессивно, конешн, но CTR хорош. А на моб. девайсах показывается 300х250, вполне годно.
Лично у меняна портале и стоять адаптируемые блоки) За статью спасибо! Очень интересно расписано!
Если не заворачиваться со скриптом то есть сразу несколько вариантов адаптации. Первый самый простой, резиновый блок адсенса, он отлично справляется с любой шириной дива, хотя на моей памяти были и бредовые адаптации (рисунок меньше блока, не красиво выглядит). Второй использование плагина для вордпресс к примеру с одноименным названием adsense, который подстраиваться под ширину, но так же как и любой другой скрипт может глючить. Если смотреть с точки зрения кликабельности, то большие блоки на мобильном более кликабельны (случайные переходы). Нужно исходить из задачь сайта, для «тупого» заработка на адсенче лучше большие и заметные ставить, но это больше к ГС относится.
Не стал заморачиваться и просто установил плагин под Адсенс рекламу. По времени потраченного на настройки потратил порядка 10 минут. Не спорю, выглядит при просмотре с мобильного не очень гуд.
По поду конверсии. Конечно, конверсия с мобильных устройств оставляет желать лучшего, порой даже задумываюсь отключить рекламу в мобильном, а может при наличии немного свободного времени вникну в ваш материал и посмотрю, что из этого получиться.
с плагином согласен — для «коробочных» цмс намного проще воспользоваться именно готовым решением, а вот с конверсоей не согласен. Да, «жмакают» реже, но за показ же ты не платишь и, если правильно составить объявление, то охват аудитории будет весьма впечатляющий. А зайдут на твой сайт уже с компа, главное чтобы контент заинтересовал…
Karrasko, поддерживаю! 580х400 в контенте попробовал, отличный вариант!
пробовал разные варианты, но почему то 580х400 самая худшая отдача.
Дмитрий, у меня наоборот) Сильно зависит от тематики и дизайна сайта)
Использовал на сайте @media, но в другом виде, задавал минимальное разрешение и min-width: 500px и максимальное max-width: 1000px. С блоками поступлю точно так же, хотя странно почему гугл не может их сделать адаптивными сразу (встроить в код).
Добрый день! Ну не будет же на самом деле гугл делать абсолютно всё за вас:) Под всех не подстроишься, да и многие сайтоделы воротят не пойми что.
Спасибо, отличная статья. Давно задумывался об адаптивности рекламных блоков. А тут как раз эта статья) Да, без адаптивного сайта уже никуда.
Спасибо за статью, очень полезная информация))
Спасибо за материал, очень познавательно, буду пробовать у себя на сайте
А рекламные блоки обязательно переделывать? По моему они адаптированные к мобильным устройствам, могу ошибаться.
Дмитрий,можете не переделывать — если у вас нормально адаптируются)
Хорошо, что наткнулся на эту статью. Сайты имеют адаптивную версию, я шаблоны сайта делаю с помощью Темлера, там с мобильностью проблем нет. Но вот с рекламными блоками действительно беда при просмотре с мобильных телефонов. Надо будет исправлять.
Тем, у кого сайт на вордпресс можно не париться. Есть куча плагинов для этого, которыми можно визульно настроить рекламу. Для мобильной версии я лично пользуюсь встроенным рекламным расширением wptouch.
Для мобильных версий я на своих сайтах поставил рекламу через плагин ninja popup. Теперь реклама появляется в виде небольшого всплывающего уведомления в нижней части экрана. Его можно закрыть и оно не мешает использованию сайта. И смотрится хорошо. Плагин этот платный, но можно использовать любой другой плагин для показа всплывающих уведомлений.