Уведомление

Перейдите на персональную страницу AdSense. Там вы найдете информацию о своем аккаунте, которая поможет вам достичь отличных результатов с AdSense.

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

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

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

Подготовка

Примечание. Приведенные в этой статье примеры являются разрешенными модификациями кода объявлений 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 официально не поддерживается.

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

В некоторых случаях вам может понадобиться скрыть рекламный блок (например, при показе на мобильном устройстве с маленьким экраном). Это можно сделать с помощью специального параметра запросов медиа в коде 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. Помните о том, что правила программы накладывают определенные ограничения на редактирование кода.

Эта информация оказалась полезной?

Как можно улучшить эту статью?
true
Разблокируйте потенциал роста

Используйте ценные данные AdSense, чтобы увеличивать свой доход. Получайте отчеты об эффективности, индивидуальные советы и приглашения на вебинары.

Перейти

Поиск
Очистить поле поиска
Закрыть поиск
Приложения Google
Главное меню