BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как сделать адаптивный рекламный блок AdSense

Как сделать адаптивный рекламный блок AdSense

2016-09-29 / Вр:10:11 / просмотров: 2795

Совсем недавно я получил сообщение от AdSense, что моя площадка нарушает правила, а именно, что рекламный блок на мобильных устройствах сильно большой. Если и у вас возникла такая ситуация, не расстраивайтесь, так как это хороший пинок под зад, чтобы что-то поменять и улучшить сайт.
Мне это сообщение помогло разобраться и улучшить рекламные блоки для мобильных устройств на своем сайте.

улучшить рекламные блоки для мобильных устройств

Улучшить рекламные блоки для мобильных устройств

Итак, в этой статье, я расскажу, как задать размеры адаптивного рекламного блока для экранов мобильных устройств и компьютеров. Буду использовать медиа-запросы CSS.
Идея не моя, а команды AdSense, а это значит, что условия правил о нарушениях речи и быть не может.
В коде ничего сложно нет, разберется даже школьник, а вы тем более.
Используя адаптивный рекламный блок, вы можете автоматически применять разные форматы объявлений в зависимости от параметров экрана и устройства пользователя.

Вот примеры фиксированного размера рекламного блока в зависимости от ширины экрана:

  • для экранов с шириной меньше 500 пикселей – размер рекламного блока 320 x 100;
  • для экранов с шириной в диапазоне от 500 до 799 пикселей – размер рекламного блока  468 x 60;
  • для экранов с шириной 800 пикселей или больше – размер рекламного блока 728 x 90.

А вот так будет у вас на сайте:

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsbygoogle -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXХХXXXХ"
data-ad-slot="XXXXXXXXXX "></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Примечание:
Строка №5 – замените ca-pub-XXXXXXXХХXXXХ своим идентификатором издателя.
Строка №6 – замените XXXXXXXXXX  идентификатором своего рекламного блока.
example_responsive_1 – это уникальный класс для блока, его можно придумывать самостоятельно (название должно быть английскими буквами (A-Z), можно цифрами и символами).

Что мы сделали? Разложу по полочкам.
Изначально у вас на сайте примерно был вот такой рекламный код блока AdSense:

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsbygoogle -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXХХXXXХ"
data-ad-slot="XXXXXXXXXX "></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Теперь добавим CSS стили с медиа-запросами:

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>

и здесь тоже не забудьте указать класс «example_responsive_1»:

...
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
...
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Чтобы установить другие размеры рекламных блоков, выполните следующие действия в образце кода:

  • для экранов с шириной меньше 500 пикселей – замените значения 320px и 100px.
  • для экранов с шириной в диапазоне от 500 до 799 пикселей – замените значения 468px и 60px.
  • для экранов с шириной 800 пикселей или больше – замените значения 728px и 90px.

Размеры рекламных блоков смотрите в своем личном кабинете AdSense

 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Как сделать адаптивный рекламный блок AdSense

  1. МАКСИМ

    ИЗВИНИТЕ, НО ПОМОЕМУ ОНИ И ТАК АДАПТИВНЫЕ, ЕСЛИ ПОСТАВИТЬ ФУНКЦИЮ ТОЛИ АНТИСИНХРОННО ИЛИ НАОБОРОТ СИНХРОНО – НЕ ПОМНЮ, НО МОЖЕТ И ОШИБАЮСЬ

  2. Степан => автор блога Степан => автор блога

    Честно скажу, не пробовал. Видимо я не ищу легких путей :smile:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4540