Google обращает внимание реализована ли на сайте адаптивность. А значит лучше ее реализовать =)
Адаптивность - корректное и удобное отображение сайта на разных устройствах: компьютере, планшете, мобильном телефоне.
Расскажу как можно установить на сайт adsense блоки, которые будут изменять свой размер подстраиваясь под разрешение экрана. Таким образом рекламные блоки всегда будут органично вписываться в дизайн и независимо от устройства никогда не будут вылазить за рамки экрана.
В установке таких adsense блоков нет ничего сложного.
Немного об адаптивности
На сайте уже должен быть установлен адаптивный шаблон (отзывчивый шаблон). Суть отзывчивого дизайна в том, что ширина блоков с контентом указывается не в пикселях, а процентах относительно ширины экрана, таким образом достигается корректное отображение сайта на различных устройствах.
В большинстве случаев отзывчивые шаблоны имеют три вида отображения:
- На большом разрешении экрана: для обычных компьютеров - обычный вид, с сайдбаром сбоку.
- На среднем разрешении экрана: для планшетов - sidebar начинает отображаться не сбоку, а в низу страницы под основной областью с текстом. Основная область с текстом и сайдбар отображаются на всю ширину страницы.
- На маленьком разрешении экрана: для телефонов - вместо верхнего меню отображается более компактное выпадающее меню с теми же пунктами, сайдбар тоже "уходит" вниз.
В большинстве случаев в адаптивном дизайне шапка, сайдбар и основной блок с текстом всегда отображаются, независимо от размера экрана. Меняются лишь их ширина и расположение.
Планирование блоков adsense
Для отображения адаптивных блоков adsense в первую очередь необходимо определиться на каких экранах, в каком месте и какого размера их отображать.
В основном на блогах рекламные блоки устанавливаются в трех местах:
- в шапке: широкий рекламный блок, сильно вытянутый в ширину
- в боковой колонке (сайдбаре): "небоскреб", сильно вытянутый в высоту
- внизу основного блока с текстом - квадратный или "прямоугольный" - без сильной вытянутости.
С местом отображения рекламных блоков определились - у нас будут три адаптивных adsense блока: в шапке, сайдбаре и в основном блоке с текстом.
Обсудим как будет изменяться их размер: будем "подгонять" блоки adsense под ширину экрана.
В качестве примера приведу размеры своих рекламных блоков adsense:
- Шапка:
- На больших экранах отображается "Полный баннер" - 728 пикселей в ширину и 90 в высоту.
- На средних экранах отображается "Баннер" - 468 x 60
- На маленьких экранах отображается "Большой мобильный баннер" - 320x100
- На очень маленьких экранах отображается "Малый баннер" - 234 x 60
- Сайдбар:
- На больших и средних экранах: "Большой небоскреб" - 300 x 600
- На маленьких экранах: "Широкий небоскреб" - 160 x 600.
- Низ основного блока с текстом:
- На больших и средних экранах: "Большой прямоугольник" - 336 x 280
- На маленьких экранах: "Квадратные" - 250 x 250
Cоздание адаптивного adsense блока:
- На странице google adsense переходим в "Мои объявления" и жмем на кнопку "Новый рекламный блок"
- Придумываем название блока и в выпадающем списке с размерами блоков выбираем пункт "Адаптивный"
- Жмем кнопку "Сохранить и получить код"
- В выпадающем списке с режимами выбираем "Расширенный" (об этом чуть ниже):
- Копируем рекламный код в текстовый редактор, для того, чтобы прописать в нем размеры экранов и рекламных блоков.
Есть два режима адаптивных блоков:
- Автоматический: в этом режиме код редактировать не нужно, можно сразу вставлять на сайт, но не факт что будут отображаться блоки именно тех размеров, которые вы хотите. Мне результат этого режима не понравился.
- Расширенный: в этом режиме можно отредактировать код рекламного блока и указать какие размеры блоков будут отображаться на тех или иных экранах.
Пример моего кода для рекламного блока в шапке:
<style> .top { width: 234px; height: 60px; } @media(min-width: 350px) { .top { width: 320px; height: 100px; } } @media(min-width: 500px) { .top { width: 468px; height: 60px; } } @media(min-width: 768px) { .top { width: 728px; height: 90px; } } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- top --> <ins class="adsbygoogle top" style="display:inline-block" data-ad-client="ca-pub-1234567890" data-ad-slot="987654321"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
Пояснение к коду:
Размеры блоков указываются через css-стили между тегами <style> и </style>, именно эту часть скопированного кода и нужно редактировать:
- Строка ".top { width: 234px; height: 60px; }": на самых маленьких экранах показываем блок adsense размером 234 x 60 пикселей
- Строка "@media(min-width: 350px) { .top-responsive { width: 320px; height: 100px; } }": на экранах с шириной 350 пикселей (минимум) и более показываем блок размером 320 x 100
- Строка "@media(min-width: 500px) { .top { width: 468px; height: 60px; } }": на экранах с шириной 500 пикселей (минимум) и более показываем блок размером 468 x 60
- Строка "@media(min-width: 768px) { .top { width: 728px; height: 90px; } }": на экранах с шириной от 768 пикселей отображать блок adsense размером 728 x 90
В моем примере я указал в четырех строках четыре размера блоков для четырех диапазонов ширины экрана:
- от 1 до 349 пикселей
- от 350 до 499 пикселей
- от 500 до 767 пикселей
- от 768 пикселей
У ваc диапазонов может быть как больше, так и меньше, а значит и строк с описанием диапазонов будет больше или меньше. Тут уже сами смотрите как Вам нравиться и делайте по аналогии.
Не загружать (не показывать) adsense на маленьких экранах:
<style> .my_adslot { width: 320px; height: 50px; } @media(min-width: 945px) { .my_adslot { width: 728px; height: 90px; } } @media(min-width: 1185px) { .my_adslot { width: 970px; height: 90px; } } </style> <ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000"></ins> <script> var width = window.innerWidth || document.documentElement.clientWidth; if (width > 540) { document.write("<scr" + "ipt async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></scr" + "ipt>"); } (adsbygoogle = window.adsbygoogle || []).push({}); </script>
Попробовала организовать такой блок для своего блога, да вот беда: при сохранении кода почему-то не предлагается выбор режима. Никакой расширенности, вставляй что дают.
И ещё почему-то не нахожу, как удалить ненужные блоки. Не помню, была ли раньше такая возможность, но сейчас нигде кнопки «Удалить» не вижу, хучь плачь. Правда, есть кнопка «Скрыть», но я пока не поняла, равносильна ли она удалению.
Княгиня, да, действительно теперь режимы не доступны. Как хорошо что успел задокументировать свой код. Ничего не мешает взять пример моего кода и сделать аналогично =) Попробуй, буду благодарен если потом сообщишь о результатах =)
Скрытые и не используемые блоки не отображаются. Но при желании их можно отобразить. Кнопочку удалить тоже не вижу =)
Увы, ничего не вышло. Как ни крутила, но размер блока оставался неизменным.
А ещё я смотрю и вижу, что сейчас у вас в шапке широкий баннер на малой ширине не ужимается; хотя в коде сss есть стили для .it-top-responsive, но их перебивает element.style — как и у меня. Дело смахивает на то, что эйдисенс зажало все возможности такой настройки.
Княгиня, блок рекламы формируется при загрузке страницы, то есть если сначала сайт открыть в одном размере экрана, потом этот размер поменять без обновления странички, то конечно ничего не ужмется.
А так у меня все корректно отображается. И я даже на днях ввел этот блок у себя на подблоге с притчами. Или же все-таки после обновления странички тоже не сжимается? Если да, то в каком браузере и на какой ширине?
Возможность создавать такие блоки задокументирована вот в этой справке: https://support.google.com/adsense/answer/3543893 — абзац «Указание точного размера», пример кода там же под спойлером.
Ах, вот оно что. Действительно, если окно свёрнуто при загрузке страницы, а не после, баннер у вас отображается маленький. А я до этого не додумалась — я просто тестировала, изменяя туда-сюда ширину окна, чтоб быстрее было видно. Это значит, эйдисенсы такой подвох ввели, а без подсказки и не догадаешься. И да — попробовала перезагружать, и оно заработало и у меня тоже.
Никто, никакой подвох не вводил) Просто реклама запрашивается с сервера лишь одного размера и один раз — при загрузке страницы) Иначе бы ерунда вышла — постоянная работа javascript’а, который бы отслеживал размер экрана и запрашивал бы новые медиафайлы — слишком накладно по ресурсам.
Ну да, когда присмотришься — становится понятно. Но вначале я по привычке пыталась всё средствами css решить: если другие элементы перехватывают нужные стили, то и этот, вроде как должен. А что он не прямой html, а скриптом генерируемый инлайновый фрейм, то от внимания ускользнуло. Сила привычки, шоподелать.
Можно ли сделать так чтобы при маленьком разрешении рекламный блок вообще не показывался?
Юрий, добавил код в конец записи
Владимир, Вы пробовали сжимать свой сайт, реклама под заголовком выскакивает прямо на ваше фото.
Я сделала блок адаптивный и всё тип-топ, синхронно с размерами сайта.
Светлана, сайт обычно не сжимают во время просмотра =) То есть размеры не меняются во время просмотра сайта, если обновить страничку то реклама будет необходимого размера)
Что значит, не сжимают, я уменьшила экран, потому что рядом другое окно открыто и увидела то, что написала выше. Мне-то как бы все равно, просто хотела подсказать, чтобы исправили.
Светлана, спасибо, буду иметь в виду =)
Владимир, поставил такой же код, как у вас, но почему-то вместо 728*90 на большом экране разрешении ужимается блок (подгружается 693*60 пикселей) и блок выглядит урезанным. Может быть, подскажете, в чем проблема?
alex, подозреваю это связано с тем, что максимальная ширина контента в том месте, куда Вы вставляете рекламный блок не может превышать 693 пикселя исходя из шаблона.
На вашем сайте, с мобильного устройства отображается выдвижной баннер внизу экрана от Google Adsense. Подскажите как это реализовать?
Почему-то не верно сие обрабатывается:
document.write(«»);
В итоге получается в коде html:
;
Причину не подскажите?