Настройка нативной рекламы
Creating a Native Ad zone is simple and yet powerfully customizable. You are able to use slightly different processes for setting up a native ad zone depending on your needs:
- Сценарий A: Вы просто хотите установить рекламную зону, выбрать соотношение сторон изображений в родной рекламной зоне, а затем установить соответствующий размер рекламной зоны на вашем сайте.
- Сценарий B: Вы хотите настроить рекламную зону в соответствии с пользовательским размером или соотношением изображений, чтобы рекламная зона выглядела так же, как и ваш сайт, и идеально вписывалась в него.
- Сценарий C: У вас на сайте есть зона определенного размера, и вы хотите создать рекламную зону, которая впишется в нее и будет хорошо выглядеть.
Какой бы сценарий вы ни выбрали, первое, что вам нужно сделать, - это создать зону нативной рекламы.
Создание зоны нативной рекламы
Войдя в систему как издатель, нажмите на Сайты и зоны, Новая зона, разверните раздел Нативная, выберите формат нативной рекламы Рекомендательный виджет и нажмите Нажать.
Заполните данные о зоне и нажмите Next.
Сценарий A: Быстрый макет: Установка соотношения сторон
В этом случае вы задаете соотношение сторон изображений в панели администратора, и нет необходимости задавать общий размер рекламной зоны. При использовании Quick Layout созданная вами рекламная зона будет автоматически подстраиваться под размер контейнера, в который вы ее поместите.
Шаг 1:
Выберите вкладку Быстрый макет. В разделе Макет рабочего стола установите количество колонок и строк объявлений, которые вы хотите видеть на рабочем столе.
Шаг 2:
Затем выберите соотношение сторон изображений в раскрывающемся списке Настройки изображения. Вы можете выбрать соотношение сторон 1:1, 4:3 или 16:9, чтобы они соответствовали миниатюрам на вашем сайте.
Шаг 3:
- После того как вы выбрали соотношение сторон, с помощью флажка выберите, показывать ли текст или нет, а затем определите, где он будет отображаться.
- Этот текст состоит из Заголовка и Описания. При желании вы можете включать и выключать их по отдельности в разделах Заголовок и Описание.
- Посмотрите на предварительный просмотр справа, чтобы увидеть, как выглядит ваша рекламная зона, и при необходимости еще раз подкорректируйте настройки.
Шаг 4:
- Повторите шаги 1-3 выше в разделе Мобильный макет, чтобы настроить рекламную зону для мобильных устройств.
Шаг 5:
- Проверьте предварительный просмотр для Desktop и Mobile в правой части экрана. Вы можете установить точку разрыва между настольным и мобильным видом в раскрывающемся меню Мобильная точка разрыва в Дополнительные параметры.
- Точка останова может быть установлена на 800px для iPad, 450px для мобильных устройств и Unresponsive. При изменении точки останова меняется, влияют ли наши настройки в разделе Desktop Layout на десктоп и iPad, или только на десктоп.
- Когда вы будете довольны тем, как выглядит предварительный просмотр, нажмите Создать.
Шаг 6:
- Скопируйте HTML-тег Zone и добавьте его на свой сайт.
- Рекламная зона будет автоматически подстраиваться под 100% контейнера, в который вы поместили тег. То есть чем больше контейнер, тем больше будет и зона, и объявления.
Сценарий B: Быстрый макет: Установка пользовательского размера изображения
В этом случае вы хотите иметь возможность изменять размер изображения и интервал между объявлениями, чтобы они соответствовали вашему сайту. Вы сделаете это, если действительно хотите, чтобы нативные объявления выглядели так, будто они являются частью редакционного контента вашего сайта.
Шаг 1:
- Выберите вкладку Быстрый макет. В разделе Макет рабочего стола установите количество колонок и строк объявлений, которые вы хотите видеть на рабочем столе.
Шаг 2:
- В выпадающем списке Настройки изображения выберите Настроить размер и установите ширину и высоту изображений в соответствии с размерами вашего сайта. Если сайт содержит метатег и является отзывчивым, то при просмотре сайта изображения будут также реагировать на уменьшение размера экрана. Информация о Размере виджета и Размере изображения будет отображаться в правом верхнем углу над превью.
Шаг 3:
- После того как вы установили размер изображения, установите флажок Text и выберите, где будет отображаться текст.
- Посмотрите на предварительный просмотр справа, чтобы увидеть, как выглядит ваша рекламная зона, и при необходимости еще раз подкорректируйте настройки.
Шаг 4:
- Повторите шаги 1-3 в разделе Мобильный макет, чтобы настроить рекламную зону для мобильных устройств.
Шаг 5:
- В разделе Дополнительные параметры вы можете установить, сколько пикселей Вертикального интервала и Горизонтального интервала вы хотите разместить вокруг каждого объявления.
Примечание: Изменение этих параметров приведет к изменению общего размера рекламной зоны.
Шаг 6:
- Проверьте предварительный просмотр для Desktop и Mobile в правой части экрана. Вы можете установить точку разрыва между настольным и мобильным видом в раскрывающемся меню Мобильная точка разрыва в Дополнительные параметры.
- Точка останова может быть установлена на 800px для iPad, 450px для мобильных устройств и Unresponsive. При изменении точки останова меняется, влияют ли наши настройки в разделе Desktop Layout на десктоп и iPad, или только на десктоп.
- Когда вы будете довольны тем, как выглядит предварительный просмотр, нажмите Создать.
Шаг 7:
- Скопируйте HTML-тег Zone и добавьте его на свой сайт.
- Убедитесь, что размер рекламной зоны на вашем сайте соответствует размеру зоны, которую вы только что создали.
Сценарий C: Пользовательский макет: Установите фиксированный размер зоны
В этом случае вы хотите иметь возможность установить размер рекламной зоны в соответствии с потребностями вашего сайта и настроить параметры, чтобы объявления отображались хорошо.
Шаг 1:
Выберите вкладку Настроить макет. В разделе Макет рабочего стола установите Ширину и Высоту общей рекламной зоны, которую вы хотите создать.
Шаг 2:
Затем выберите, сколько столбцов и строк объявлений вы хотите отобразить в рекламной зоне. Проверьте предварительный просмотр справа, чтобы узнать, какие настройки подходят для выбранного вами размера.
Шаг 3:
После того как вы выбрали количество столбцов и строк, установите флажок Текст и выберите место отображения текста с помощью выпадающего списка Положение текста.
Шаг 4:
Повторите шаги 1-3 в разделе Мобильный макет, чтобы настроить рекламную зону для мобильных устройств.
Шаг 5:
- Проверьте предварительный просмотр для Desktop и Mobile в правой части экрана. Вы можете установить точку разрыва между настольным и мобильным видом в раскрывающемся меню Мобильная точка разрыва в Дополнительные параметры.
- Точка останова может быть установлена на 800px для iPad, 450px для мобильных устройств и Unresponsive. При изменении точки останова меняется, влияют ли наши настройки в разделе Desktop Layout на десктоп и iPad, или только на десктоп.
- Когда вы будете довольны тем, как выглядит предварительный просмотр, нажмите Создать.
Шаг 6:
Скопируйте HTML-тег Zone и добавьте его на свой сайт.
Выбор неотзывчивых в Mobile Breaking Point
- Если для параметра Mobile Breaking Point в разделе Advanced Options установлено значение Unresponsive, на экране появится следующее модальное окно.
- Если нажать CONTINUE на модале, реклама будет размещаться на всех устройствах, включая мобильные и планшетные, в макете для рабочего стола.
- Макет Mobile больше не будет доступен пользователю для редактирования, если выбрана опция Unresponsive.
- The image settings are updated to default custom size (Width - 200px and height - 200px) if not saved previously.
Использование пользовательского CSS в нативной рекламе
In the Custom CSS section, you can add custom CSS to ensure that the ad zone displays correctly on your site. The most important CSS classes are provided as a starting point. Find out more about CSS here.
Примечание: Имейте в виду, что изменения в пользовательском CSS не будут отображаться в предварительном просмотре: они будут видны только на самом сайте.
Классы CSS для нативной рекламы
Для начала в блоке предлагается пять классов CSS, а затем вы можете вставить дополнительные стили по своему усмотрению. Эти пять классов CSS стилизуют наиболее важные элементы нативного объявления следующим образом:
| Класс | Действие |
|---|---|
| .exo-native-widget-outer-container | Придает стиль всему контейнеру виджета. |
| .exo-native-widget-item | Стилизуйте контейнеры для отдельных предметов. |
| .exo-native-widget-item-image | Стилизация изображения. |
| .exo-native-widget-item-title | Стилизация текста заголовка. |
| .exo-native-widget-item-text | Стилизация текста описания |
Дополнительные классы CSS
Вы также можете стилизовать нативную рекламу, используя эти дополнительные классы CSS:
| Класс | Действие |
|---|---|
| .exo-native-widget | Оборачивает весь виджет. |
| .exo-native-widget-header | Обертывает элементы заголовка. |
| .exo-native-widget-outer-container | Обертки со всеми объявлениями. |
| .exo-native-widget-item-container | Оборачивает рекламный блок. |
| .exo-native-widget-item-image-wrapper | Обертывает изображение в рекламном блоке. |
| .exo-native-widget-item-image-ratio | Устанавливает соотношение сторон рекламного изображения. |
| .exo-native-widget-item-content | Оборачивает весь текст рекламного блока. |
| .exo-native-widget-item-content-box | В него заворачиваются заголовок, описание и бренд рекламной обертки. |
| .exo-native-widget-item-brand | Стили рекламного бренда. |
Примеры
- Следующие примеры показывают, как издатели могут адаптировать стили CSS в настройках Native Ad Zone в соответствии со своими потребностями.
- Чтобы разместить текстовое поле над изображением.
.exo-native-widget-item-content {
position: absolute !important;
bottom: 0px !important;
z-index: 3 !important;
top: unset !important;
height: 50px !important;
left: 15px;
}
- Чтобы изменить размер текстового поля.
.exo-native-widget-item-content {
height: 50px !important;
}
- Чтобы поместить текстовое поле над изображением и добавить фон к текстовому полю с непрозрачностью.
.exo-native-widget-item-content {
position: absolute !important;
bottom: 0px !important;
z-index: 3 !important;
top: unset !important;
height: 50px !important;
background-color: black !important;
opacity: 0.7 !important;
}
.exo-native-widget-item-title {
margin-left: 15px;
color: white !important
}
.exo-native-widget-item-text {
margin-left: 15px;
color: white !important
}
- Чтобы изогнуть границы изображения.
.exo-native-widget-item-image {
border-radius: 5% !important;
}
- Чтобы задать стиль для шрифта. Таким образом, издатель может использовать шрифты, доступные на его сайте и отличные от тех, что доступны в настройках Zone.
.exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
font-family: fantasy !important;
}
- Чтобы добавить подложку между изображением и текстом, текст может располагаться как близко, так и далеко от изображения. Вы также можете использовать padding-bottom, чтобы добавить подложку под текст.
.exo-native-widget-item-content {
padding: 30px !important;
}
- Чтобы настроить цвет фона текстового поля, он влияет только на текстовое поле, расположенное под каждым изображением, оставляя пространство между изображениями и полями прозрачным или с другим цветом фона.
.exo-native-widget-item-content {
background-color: #ABE1FA !important;
padding: 10px !important
}
.exo-native-widget-outer-container {
background-color: white !important;
padding: 10px !important;
}
.exo-native-widget-item-title {
margin-left: 15px;
}
.exo-native-widget-item-text {
margin-left: 15px;
}
- Чтобы добавить границу, закрывающую изображение и его текстовое поле. Это поможет разделить каждое изображение в рамках данного виджета Native Widget.
.exo-native-widget-item-container {
border: 2px #0073B7 solid !important;
padding-right: 0px !important;
padding-bottom: 0px !important
}
.exo-native-widget-outer-container {
margin-bottom: 10px !important;
margin-right: 10px !important
}