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

Здравствуйте, друзья. Хорошая новость, рекомендуемый контент AdSense теперь можно настраивать под типы устройств и менять оформление. Эта возможность позволяет настроить внешний вид рекламного блока в целом или создать отдельное оформление для компьютера и мобильных устройств.

Для этого потребуется внести изменения в код рекламного блока. Специальные параметры определяют макет блока и количество строк и столбцов с рекомендациями.

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

Важно: Все параметры, приведённые в статье, являются разрешёнными модификациями кода AdSense и не нарушают правила программы.

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

Первым делом нужно настроить макет блока. Рекомендации в блоке отображаются в табличном виде в строках и столбцах. Вы можете настроить их количество, например, 4х2, 3х1 и так далее. В этом вам помогут специальные параметры:

data-matched-content-columns-num – количество столбцов;

data-matched-content-rows-num – количество строк.

Важно: Параметры работать только вместе, плюс параметр внешнего вида. Существует ограничение на количество рекомендаций в блоке. Общее количество от 1 до 30. Вы должны учитывать это при вводе количества столбцов и строк.

4х1 для компьютеров и планшетов

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-matched-content-ui-type="text"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4х1 смартфоны и 4х2 компьютеры

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="4,2"
data-matched-content-columns-num="1,4"
data-matched-content-ui-type="image_stacked,image_card_sidebyside"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

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

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

Текстовые рекомендации

Макет – только текст. Добавьте в код рекламного блока параметр data-matched-content-ui-type="text".

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="4"
data-matched-content-columns-num="2"
data-matched-content-ui-type="text"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Текстовые рекомендации в отдельных блоках

Макет – текст в отдельных блоках. Параметр data-matched-content-ui-type="text_card".

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="2"
data-matched-content-columns-num="4"
data-matched-content-ui-type="text_card"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Миниатюра с размещением текста сбоку

Макет – миниатюры с кратким описанием (заголовком) сбоку. Параметр data-matched-content-ui-type="image_sidebyside".

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="4"
data-matched-content-columns-num="2"
data-matched-content-ui-type="image_sidebyside"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Миниатюра с текстом в отдельном блоке

Макет – изображение с текстом в отдельных блоках (карточках). Параметр data-matched-content-ui-type="image_card_sidebyside".

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="3"
data-matched-content-columns-num="2"
data-matched-content-ui-type="image_card_sidebyside"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Миниатюра с текстом снизу

Макет – изображение с заголовком, описанием снизу. Параметр data-matched-content-ui-type="image_stacked".

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
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>

Миниатюра с текстом снизу, в отдельных блоках

Макет – изображение с текстом снизу, на отдельных карточках. Параметр data-matched-content-ui-type="image_card_stacked".

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ВАШ ИДЕНТИФКАТОР"
data-ad-slot="КОД ОБЪЯВЛЕНИЯ"
data-matched-content-rows-num="3"
data-matched-content-columns-num="2"
data-matched-content-ui-type="image_card_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Видео по теме

Рассмотрим принципы внесения изменений в код и работу с параметрами.

Возможные ошибки и устранение неисправностей

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

Чаще всего это происходит, когда идёт настройка блока с разным отображением на ПК и мобильных устройствах.

Разобраться с ошибками вам поможет панель разработчика в браузере и вкладка «Консоль». Запустить её можно комбинацией клавиш CTRL + SHIFT + J (Windows, Linux) или CMD + OPT + J (Mac).

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

Вывод

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

В моём случае увеличилось число кликов на рекомендации со смартфонов. Крупные карточки работают лучше мелких изображений с описанием.

На сегодня всё, желаю вам успешных экспериментов с рекламными блоками!

С уважением, Максим Зайцев