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

Создание нативной рекламы зона проста и при этом обладает мощными возможностями настройки. В зависимости от ваших потребностей вы можете использовать немного разные процессы настройки зоны нативной рекламы:

Сценарий A: Вы просто хотите настроить рекламную зону, выбрать соотношение сторон изображений зоны нативной рекламы, а затем задать на вашем сайте размер рекламной зоны, соответствующий ему.
Сценарий B: Вы хотите настроить рекламную зону так, чтобы она соответствовала пользовательскому размеру или соотношению сторон изображения, чтобы рекламная зона выглядела так же, как ваш сайт, и идеально вписывалась в него.
Сценарий C: На вашем сайте есть зона определённого размера, и вы хотите создать рекламную зону, которая в неё поместится и будет хорошо выглядеть.

Какой бы сценарий вы ни выбрали, первое, что вам нужно сделать, — это создать зону нативной рекламы.

Создание зоны нативной рекламы

Когда вы вошли как издатель, нажмите Сайты и зоны, Новая зона, и разверните Нативная раздел, выберите формат нативной рекламы Рекомендательный виджет и нажмите Далее.

Заполните сведения о зоне и нажмите Далее.

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

Шаг 1

Выберите Быстрый макет вкладку. В разделе Макет для ПК задайте количество столбцов и рядов объявлений, которые вы хотите видеть на ПК.

Шаг 2

Далее выберите соотношение сторон для ваших изображений в раскрывающемся списке Настройки изображения Вы можете выбрать между 1:1, 4:3 или 16:9, чтобы соответствовать миниатюрам на вашем сайте.

Шаг 3

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

Шаг 4

Повторите шаги 1–3 выше в разделе Мобильный макет чтобы настроить вашу рекламную зону для мобильных устройств.

Шаг 5

Проверьте предварительный просмотр для обоих ПК и Мобильный справа на экране. Вы можете задать, где происходит точка переключения между видом для ПК и мобильным видом, в Точка перехода для мобильных устройств раскрывающемся списке Дополнительные параметры.
Точку переключения можно установить на 800px для iPad, 450px для мобильных устройств и Нереагирующий. Когда мы меняем точку переключения, это изменяет, будут ли наши настройки в разделе Макет для ПК влиять на ПК и iPad или только на сам ПК.
Когда вас устраивает вид предварительного просмотра, нажмите Создать.

Шаг 6

Скопируйте HTML-тег зоны и добавьте его на свой сайт.
Рекламная зона автоматически подстроится до 100% контейнера, в который вы поместите тег. То есть чем больше контейнер, тем больше будут и зона, и объявления.

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

Шаг 1

Выберите Быстрый макет вкладку. В разделе Макет для ПК задайте количество столбцов и рядов объявлений, которые вы хотите видеть на ПК.

Шаг 2

В Настройки изображения раскрывающемся списке выберите Пользовательский размер и задайте ширину и высоту изображений в соответствии с вашим сайтом. Если на сайте есть метатег и сайт адаптивный, то при просмотре сайта изображения тоже будут подстраиваться по мере уменьшения размера экрана. Информация о Размере виджета и Размере изображения будет отображаться в правом верхнем углу над предварительным просмотром.

Шаг 3

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

Шаг 4

Повторите шаги 1–3 в Мобильный макет чтобы настроить вашу рекламную зону для мобильных устройств.

Шаг 5

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

Примечание: Изменение этих параметров изменит общий размер рекламной зоны.

Шаг 6

Проверьте предварительный просмотр для обоих ПК и Мобильный справа на экране. Вы можете задать, где происходит точка переключения между видом для ПК и мобильным видом, в Точка перехода для мобильных устройств раскрывающемся списке Дополнительные параметры.
Точку переключения можно установить на 800px для iPad, 450px для мобильных устройств и Нереагирующий. Когда мы меняем точку переключения, это изменяет, будут ли наши настройки в разделе Макет для ПК влиять на ПК и iPad или только на сам ПК.
Когда вас устраивает вид предварительного просмотра, нажмите Создать.

Шаг 7

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

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

Шаг 1

Выберите Пользовательский макет вкладку. В разделе Макет для ПК разделе задайте Ширину и Высоту общей рекламной зоны, которую вы хотите создать.

Шаг 2

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

Шаг 3

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

Шаг 4

Повторите шаги 1–3 в Мобильный макет чтобы настроить вашу рекламную зону для мобильных устройств.

Шаг 5

Проверьте предварительный просмотр для обоих ПК и Мобильный справа на экране. Вы можете задать, где происходит точка переключения между видом для ПК и мобильным видом, в Точка перехода для мобильных устройств раскрывающемся списке Дополнительные параметры.
Точку переключения можно установить на 800px для iPad, 450px для мобильных устройств и Нереагирующий. Когда мы меняем точку переключения, это изменяет, будут ли наши настройки в разделе Макет для ПК влиять на ПК и iPad или только на сам ПК.
Когда вас устраивает вид предварительного просмотра, нажмите Создать.

Шаг 6

Скопируйте HTML-тег зоны и добавьте его на свой сайт.

Выбор режима Unresponsive в Mobile Breaking Point

Когда в разделе «Дополнительные параметры» для Mobile Breaking Point установлен режим Unresponsive, на экране появится показанное ниже модальное окно.

Нажатие ПРОДОЛЖИТЬ в модальном окне будет применять макет для ПК к объявлениям на всех устройствах, включая мобильные телефоны и планшеты.
Мобильный макет больше не будет доступен для редактирования пользователю, когда выбран режим Unresponsive.
Параметры изображения будут обновлены до пользовательского размера по умолчанию (ширина — 200px и высота — 200px), если они не были сохранены ранее.

Использование пользовательского CSS с нативными объявлениями

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

Примечание: Имейте в виду, что изменения в пользовательском 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 при настройке зоны нативной рекламы в соответствии со своими потребностями.

1. Чтобы разместить текстовый блок поверх изображения.


 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

2. Чтобы изменить размер текстового блока.


 .exo-native-widget-item-content {
      height: 50px  !important;
   }

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


 .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: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

4. Чтобы скруглить границы изображения.


 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }

5. Чтобы задать стиль шрифта. Таким образом издатель может использовать шрифты, доступные на его сайте, а не только те, которые доступны в настройке зоны.


 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

6. Чтобы добавить отступ между изображением и текстом, чтобы текст мог быть либо близко, либо далеко от изображения. Также можно использовать padding-bottom, чтобы добавить отступ под текстом.


 .exo-native-widget-item-content {
    padding: 30px !important;
    }

7. Чтобы настроить цвет фона текстового блока так, чтобы он влиял только на блок текста под каждым изображением, оставляя пространство между изображениями и блоками прозрачным или с другим цветом фона.


 .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: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

8. Чтобы добавить рамку, которая охватывает изображение и его текстовый блок. Это поможет отделить каждое изображение внутри этого нативного виджета.


.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}

ПредыдущаяУправление частотным ограничением для попандеров и полноэкранных межстраничных объявлений СледующаяВыплаты

Последнее обновление 1 месяц назад

Это было полезно?