Рекламные блоки

Настройка кода адаптивного рекламного блока

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

Внимание!

Примечание. Приведенные в этой статье примеры являются разрешенными модификациями кода объявлений AdSense. Это означает, что, изменив код адаптивного рекламного блока указанными ниже способами, вы не нарушите правила программы 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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Как применить этот образец кода к вашему сайту

  1. Создайте медийный рекламный блок в аккаунте AdSense, выбрав в разделе "Размер объявления" вариант Адаптивный. Сохраните из кода объявления следующую информацию:
    • идентификатор издателя (например, ca-pub-1234567891234567);
    • идентификатор рекламного блока в поле data-ad-slot (например, 1234567890).
  2. В образце кода выполните следующие действия:
    • Замените все экземпляры example_responsive_1 на уникальное название, например Glavnaya_stranitsa или glavnaya_stranitsa_123.
      Примечания:
      • Уникальное название должно содержать только английские буквы (A–Z), цифры и символы подчеркивания и начинаться с английской буквы.
      • Каждый раз, адаптируя этот фрагмент кода, необходимо использовать новое уникальное название.
    • Замените ca-pub-XXXXXXX11XXX9 своим идентификатором издателя.
    • Замените 8XXXXX1 идентификатором своего рекламного блока.
  3. Определите, какое пространство на экране должен занимать ваш рекламный блок.
    • Если вас устраивают размеры, указанные в образце кода, не изменяйте значения.
    • Если вы хотите установить другие размеры, выполните следующие действия в образце кода.
      • Замените значения 320px и 100px шириной и высотой рекламного блока, который вы хотите использовать для экранов с шириной меньше 500 пикселей.
      • Замените значения 468px и 60px шириной и высотой рекламного блока, который вы хотите использовать для экранов с шириной в диапазоне от 500 до 799 пикселей.
      • Замените значения 728px и 90px шириной и высотой рекламного блока, который вы хотите использовать для экранов с шириной 800 пикселей или больше.
  4. Скопируйте и вставьте измененный код объявления в исходный HTML-код нужных страниц.
    Примечание. Добавив рекламный код, проверьте, корректно ли отображаются объявления на разных устройствах и экранах.

Расширенные функции кода адаптивного рекламного блока

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

Примечание. Мы рекомендуем использовать эти дополнительные функции, только если вы умеете редактировать код рекламного блока.

Фиксированная высота и переменная ширина

В CSS можно указывать фиксированную высоту и переменную ширину рекламного блока.

Пример
Код адаптивного рекламного блока с фиксированной высотой в 90 пикселей и переменной шириной в 400–970 пикселей будет выглядеть так:
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Фиксированный размер в зависимости от ширины экрана

В CSS можно указывать точный размер рекламного блока.

Пример
Запросы @media в CSS3 позволяют указывать точный размер адаптивного рекламного блока в зависимости от устройства. Ниже показан пример кода, который позволяет этого добиться.
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
В правилах @media используется синтаксис CSS3, и они поддерживаются всеми современными браузерами. Если вы хотите обеспечить совместимость с более ранними версиями браузеров, например Internet Explorer 7 и ниже, советуем прежде всего установить размер по умолчанию. В этом случае объявление будет отображаться корректно, даже если запросы @media не обрабатываются. Обратите внимание, что указание точных размеров рекламных блоков с помощью внешних файлов таблицы стилей CSS официально не поддерживается.

Функция скрытия рекламного блока

В некоторых случаях вам может понадобиться скрыть рекламный блок (например, при показе на мобильном устройстве с маленьким экраном). Это можно сделать с помощью специального параметра запросов @media в коде CSS. Ниже приведен пример.

Пример скрытия рекламного блока при определенном размере экрана
Вот как можно скрывать рекламный блок на экранах определенного размера:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

В этом примере объявления не показываются, если ширина экрана менее 400 пикселей.

Всегда соблюдайте правила размещения объявлений AdSense. Помните о том, что правила программы накладывают определенные ограничения на редактирование кода.
Эта информация оказалась полезной?
Как можно улучшить эту статью?