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

Чтобы настроить адаптивный блок рекомендуемого контента, добавьте в код объявления специальные параметры. Они определяют макет блока, количество строк и столбцов с рекомендациями и т. д.

Параметры также позволяют задавать разные настройки для мобильных устройств и компьютеров. Например, если вы создадите параметр макета с одним значением, то на разных платформах ваш блок рекомендуемого контента будет оформлен одинаково. Если же значений два, то внешний вид блока на смартфоне (первое значение) будет отличаться от внешнего вида на компьютере (второе значение). Эти параметры также работают с блоками рекомендуемого контента AMP.

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

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

Как изменить внешний вид блока рекомендуемого контента

Параметр макета (data-matched-content-ui-type) позволяет управлять расположением текста и картинок в блоках рекомендуемого контента. Вы можете выбирать разные варианты: изображение и текст рядом друг с другом, изображение над текстом и т. п.

Доступные макеты перечислены ниже.

Изображение сбоку от текста

Здесь изображение и текст расположены рядом. Чтобы выбрать этот макет, добавьте в код объявления параметр data-matched-content-ui-type="image_sidebyside".

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Изображение и текст на карточке

Изображение и текст размещены на карточке рядом. Чтобы выбрать этот макет, добавьте в код объявления параметр data-matched-content-ui-type="image_card_sidebyside".

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Изображение над текстом

Это выглядит как подпись под картинкой. Чтобы выбрать такой макет, добавьте в код объявления параметр data-matched-content-ui-type="image_stacked".

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Изображение над текстом карточки

Этот макет похож на предыдущий, но изображение и текст расположены внутри карточки. Чтобы выбрать такой макет, добавьте в код объявления параметр data-matched-content-ui-type="image_card_stacked".

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Только текст

Текстовый макет без изображения. Чтобы выбрать этот макет, добавьте в код объявления параметр data-matched-content-ui-type="text".

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Текст на карточке

Текст, оформленный как карточка. Чтобы выбрать этот макет, добавьте в код объявления параметр data-matched-content-ui-type="text_card".

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Количество строк и столбцов в блоках рекомендуемого контента

Рекомендации внутри блока рекомендуемого контента расположены в строках и столбцах. Вы можете указать их количество. Например, задайте конфигурацию блока как 2 x 2, 4 x 1 и т. п.

За количество строк отвечает параметр data-matched-content-rows-num, количество столбцов – data-matched-content-columns-num. Необходимо использовать оба параметра вместе с data-matched-content-ui-type.

Примечания

• Существуют ограничения на количество строк и столбцов. Общее количество рекомендаций в блоках рекомендуемого контента может быть от 1 до 30. Если вы попытаетесь показать менее 1 или более 30 рекомендаций, блок рекомендуемого контента окажется пустым.
• Иногда система не может показать именно столько строк или столбцов, сколько вы задали. Например, так бывает, если вы добавили много столбцов, но блок рекомендуемого контента недостаточно широкий. В этом случае система изменит количество строк и/или столбцов, чтобы блок выглядел хорошо.

Примеры конфигураций строк и столбцов

4 x 1 (смартфоны, компьютеры)

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2 x 2 (смартфоны, компьютеры)

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3 x 3 (смартфоны, компьютеры)

В этом примере показано, как создать блок из трех строк и трех столбцов с девятью рекомендациями.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4 x 1 (мобильные устройства) и 2 x 2 (компьютеры) для адаптивного дизайна

В этом примере показано, как создать блоки 4 x 1 для мобильных устройств и 2 x 2 для компьютеров. Применяйте эту конфигурацию, если у вас сайт с адаптивным дизайном.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="98765"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Отправьте отзыв

Оставьте отзыв о настройке блоков рекомендуемого контента. Расскажите нам, что оказалось полезно, а что можно улучшить.

Устранение неполадок

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

Блок рекомендуемого контента пуст

Вероятные причины:

• Общее количество рекомендаций в блоке меньше 1 или больше 30. Измените количество строк и/или столбцов блока, чтобы общее количество рекомендаций соответствовало ограничениям.
• Блок слишком широк для заданного количества рекомендаций. Уменьшите ширину блока рекомендуемого контента.

В блоке меньше рекомендаций, чем ожидалось

Это бывает, если не хватает места, чтобы показать именно столько рекомендаций, сколько вы задали. Например, так может случиться, если вы хотите показывать много рекомендаций, а блок слишком узкий или открыт на маленьком экране. При этом система учитывает доступное пространство и подгоняет количество видимых строк и/или столбцов. Советуем изменить ширину блока рекомендуемого контента или использовать разное количество строк и столбцов на смартфонах и компьютерах.

Показываются только текстовые рекомендации

Это возможно, если блок слишком узкий для количества рекомендаций, которое вы задали. Попробуйте увеличить ширину блока.

Используйте консоль для поиска ошибок в блоках рекомендуемого контента

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

Если вы работаете в Chrome, выполните следующие действия, чтобы проверить код объявления в консоли разработчика:

1. Перейдите на страницу со своими блоками рекомендуемого контента.
2. Нажмите CTRL + SHIFT + J (Windows, Linux) или CMD + OPT + J (Mac).
3. Посмотрите сообщения об ошибках в консоли.