Что такое Нативный смартблок?

Материал из OfferGate
Перейти к навигации Перейти к поиску

Нативная реклама - это вид рекламы, который органично вписывается в сайт и выглядит как его элемент, тем самым не вызывая у аудитории отторжения.


Для нативной рекламы в OfferGate используется смартблок - это несколько рекламных баннеров на сайте. Отличие этого инструмента от обычных баннеров, в том, что расположение, форма, размеры и количество креативов внутри блока конфигурируется в зависимости от контекста источника:

Example 1 smartblock.png Example 2 smarblock.png


Каждый баннер состоит из ряда элементов, которые вы также можете настроить самостоятельно:

Elem smartblock.png


Как самостоятельно создать смартблок?

Перейдите в раздел Нативный смартблок (1) и нажмите кнопку Создать (2):

Add smartblock.png


Первый шаг:

Задайте произвольное название и выберите источник, где будет распологаться смартблок.
Список Тип трафика позволяет отфильтровать офферы по типу разрешенного трафика.
Далее требуется выбрать офферы - количество выбранных офферов никак не связано с количеством баннеров в смартблоке. Офферов может быть больше, чем баннеров в блоке.
Задайте Количество баннеров в смартблоке:

Step1 smartblock.png


Второй шаг:

Здесь требуется выбрать рекламные материалы для блока и базовые элементы баннеров.
Размер баннера используется для того, чтобы отфильтровать рекламные материалы по размеру. Не влияет на финальный размер баннеров.
Выберите любое количество креативов по каждому офферу.
В блоке элементов нативного баннера требуется выбрать базовые элементы для отдельного баннера в смартблоке. Будет ли у него кнопка, только описание или заголовок? Что из этого будет ссылкой?
В блоке ширина и высота баннеров настраиваются параметры именно баннеров. Каждого отдельно взятого баннера, а не всего смартблока. Здесь укажите нужные размеры. Они необязательно должны соответствовать размеру выбранного баннера - должно быть близко и с соблюдением пропорций, тогда масштабирование не станет проблемой.

Step2 smartblock.png


Третий шаг:

Задайте тип отображения и тип сортировки:
Для того, чтобы получить смартблок такого типа, как в примерах в начале статьи, задайте тип отображения - Список.
Тип сортировки отвечает за частоту ротации материалов. Если упростить:

  • Список - смартблок будет более статичным, ротация офферов будет происходить реже,
  • Колесо - смена материалов и офферов будет происходить чаще,

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


Селектор элемента - это CSS селектор родительского блока, внутри которого будет размещаться смартблок. В примере на скриншоте селектор div.ad соответствует узлу:

some content

В поле Пользовательские стили отображения вы можете задать необходимые свойства CSS. Например, изменить тип шрифта на тот, что используется у вас на сайте и т.д.
К самому смартблоку и вложенным элементам вы можете обращаться через макрос Id. Например, чтобы изменить фон смартблока:

[[Id]] {
  background-color: red;
}

Чекбокс Подключить стили Bootstrap применяет стили CSS фреймворка Bootstrap. Это простейший способ сделать ваш смартблок адаптивным.

В поле сгенерированный JS после сохранения появится код, для подключения смартблока на источник:

Step3 smartblock.png


После того, как вы выполнили настройки блока и сохранили их, в поле Сгенерированный JS появляется строка вида:

<script src="//offersrc.com/api/scripts/creo?id=197"></script>

Вставьте ее в код на своем источнике или в другой родительский блок перед закрывающимся тегом </body> или в родительский блок.


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