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


Здравствуйте, друзья. Хорошая новость, рекомендуемый контент 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>

текст 4 на 2

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

Макет – текст в отдельных блоках. Параметр 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>

3 на 3

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

Макет – изображение с заголовком, описанием снизу. Параметр 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).

код ошибки

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

Вывод

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

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

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

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

Адаптивная, SEO подготовленная WordPress тема



Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку «Отправить комментарий», я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности этого сайта

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

  • Кирилл

    Спасибо за столь подробный материал.
    Попробовал данное нововведение, а в итоге оставил как и было.
    Очень жаль, что до сих пор разработчики не внедрили возможность управлять длинной заголовков статей. Тут вообще жёсткая дискриминация — если в блоке рекламная запись, то её заголовок умещается полностью в любом случае.за счёт уменьшения размера шрифта, а заголовки обычных записей в большинстве случаев урезаются настолько, что едва ли можно понять, о чём статья. И переходов нет..

    • Максим Зайцев От автора

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

  • Сергей

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

    • Максим Зайцев От автора

      Да, всё меняется. Сайты меняются, стандарты меняются и реклама соответственно тоже. Рекламодатели делают всё больше материалов под новые форматы и владельцам сайтов нужно держать руку на пульсе.

  • Цифровой

    У меня вот без настроек отображается блок рекомендаций, а когда добавляю эти атрибуты для стилизации, то почему-то блок перестает отображаться. Ошибок нет, уже 200 раз все перепроверил. В чем может быть проблема?

    • Максим Зайцев От автора

      Пробуйте совмещение стилей, в некоторых темах встречаются конфликты. Меняйте стили и смотрите на результат, и не забывайте сбрасывать кэш браузера.

  • Анто

    Привет! А как настроить блок с рекламой, чтобы получилось как у тебя в самом веху (после названия статьи)?

    • Максим Зайцев От автора

      В этом блоке я использую ротацию двух блоков через плагин Ad Inserter. Ссылка на эту статью: https://1zaicev.ru/ad-inserter-rotatsiya-reklamy/

  • Сергей

    Максим, спасибо за полезный материал. Я установил себе такой блок, но он отображается только в последней опубликованной записи. В других записях его нет. Для проверки добавил строчку текста перед рекламным кодом «Рекомендовано Вам». Так вот строчка появляется во всех записях. А содержимое блока рекомендуемого контента только в одной. Прошли сутки после установки кода. Что посоветуете?

    • Максим Зайцев От автора

      Сергей, я вижу блок в каждой статье, значит всё сделали правильно. Удачи!

  • Павел

    Что-то я туплю. Не пойму в каком разделе панели Адсенс вообще искать и настраивать эти блоки

    • Максим Зайцев От автора

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