Как изменить код адаптивных объявлений

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

Важно!

• Если вы никогда не работали с запросами @media в CSS и не вносили изменения в код объявлений, начните с раздела Фиксированный размер рекламного блока в зависимости от ширины экрана.
• Если вы раньше уже использовали запросы @media в CSS и настраивали код объявлений, перейдите к разделу Расширенные функции кода адаптивного рекламного блока.

Примечание. Приведенные в этой статье примеры являются разрешенными модификациями кода объявлений 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?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Как адаптировать этот образец кода для вашего сайта

1. Создайте медийный рекламный блок в аккаунте AdSense, выбрав в разделе "Размер объявления" вариант Адаптивный. Сохраните из кода объявления следующую информацию:
   • идентификатор издателя (например, ca-pub-1234567890123456);
   • идентификатор рекламного блока в поле data-ad-slot (например, 1234567890).
2. В образце кода выполните следующие действия:
   • Замените все экземпляры example_responsive_1 на уникальное название, например Glavnaya_stranitsa или glavnaya_stranitsa_123.
     Примечания

     • Уникальное название должно содержать только английские буквы (A–Z), цифры и символы подчеркивания и начинаться с английской буквы.
     • Каждый раз, адаптируя этот фрагмент кода, необходимо использовать новое уникальное название.
   • Замените ca-pub-1234567890123456 своим идентификатором издателя.
   • Замените 8XXXXX1 идентификатором своего рекламного блока.
3. Определите, какое пространство на экране должен занимать ваш рекламный блок.
   • Если вас устраивают размеры, указанные в образце кода, не изменяйте значения.
   • Если вы хотите установить другие размеры, выполните следующие действия в образце кода:
     • Замените значения 320px и 100px шириной и высотой рекламного блока, который вы хотите использовать для экранов с шириной меньше 500 пикселей.
     • Замените значения 468px и 60px шириной и высотой рекламного блока, который вы хотите использовать для экранов с шириной в диапазоне от 500 до 799 пикселей.
     • Замените значения 728px и 90px шириной и высотой рекламного блока, который вы хотите использовать для экранов с шириной 800 пикселей или больше.
4. Скопируйте и вставьте измененный код объявления в исходный HTML-код нужных страниц.
   Примечание. Добавив рекламный код, проверьте, корректно ли отображаются объявления на разных устройствах и экранах.

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

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

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

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

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

Пример

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

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

Вы можете изменить код рекламного блока, чтобы указать его точные размеры с помощью CSS. Ниже приведен пример.

Пример

Запросы медиа в CSS3 позволяют указывать точный размер адаптивного рекламного блока в зависимости от устройства. Ниже показан пример кода с запросом медиа 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:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

В правилах @media используется синтаксис CSS3, и они поддерживаются всеми современными браузерами. Обратите внимание, что указание точных размеров рекламных блоков с помощью внешних файлов таблицы стилей CSS официально не поддерживается.

Скрытие рекламных блоков

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

Пример скрытия рекламного блока при определенном размере экрана

Вот как можно скрывать рекламный блок на экранах определенного размера:
<style type="text/css">
.adslot_1 { display: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-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

Всегда соблюдайте правила размещения объявлений AdSense. Помните о том, что правила программы накладывают определенные ограничения на редактирование кода.