Display Ads — различия между версиями

Материал из Справочник сервиса Kadam.net
Перейти к: навигация, поиск
 
(не показаны 3 промежуточные версии этого же участника)
Строка 1: Строка 1:
Данный формат является самым популярным форматом в рекламной сети Kadam.<br/>  
+
Данный формат является самым популярным в рекламной сети Kadam.<br/>  
 
Он включает в себя поддержку сразу нескольких форматов: нативный и медийный, за счет этого достигается максимальный доход от размещения.<br/>
 
Он включает в себя поддержку сразу нескольких форматов: нативный и медийный, за счет этого достигается максимальный доход от размещения.<br/>
 
Алгоритм сам выбирает формат для каждого посетителя Вашего сайта.<br/>
 
Алгоритм сам выбирает формат для каждого посетителя Вашего сайта.<br/>
Строка 5: Строка 5:
 
==Создание блока==
 
==Создание блока==
  
Перейдите в раздел управления блоками вашего сайта ('''Сайты → Название сайта''') и кликните по кнопке Добавить блок в правом верхнем углу страницы.<br/>
+
Перейдите в раздел управления блоками ('''Сайты → Название сайта''') и кликните по кнопке '''Добавить блок''' в правом верхнем углу страницы.<br/>
 
<br/>
 
<br/>
 
Заполните название и выберите формат блока '''Display Ads'''.<br/>
 
Заполните название и выберите формат блока '''Display Ads'''.<br/>
  
[[Файл:DisplayAds2.png|centre|frame]]
+
[[Файл:Screenshot 6.jpg|centre|frame]]
  
 
На втором шаге Вы можете выбрать размеры графических баннеров, которые будут участвовать в аукционе и создать свои собственные нативные шаблоны.<br/>
 
На втором шаге Вы можете выбрать размеры графических баннеров, которые будут участвовать в аукционе и создать свои собственные нативные шаблоны.<br/>
 
<br/>
 
<br/>
[[Файл:DisplayAds2.png|centre|frame]]
+
[[Файл:Screenshot 1.jpg|centre|frame]]
 
<br/>
 
<br/>
 
С помощью конструктора нативных шаблонов Вы сможете без знаний HTML-верстки собрать свой собственный дизайн, который будет гармонично вписываться в дизайн Вашего сайта.<br/>
 
С помощью конструктора нативных шаблонов Вы сможете без знаний HTML-верстки собрать свой собственный дизайн, который будет гармонично вписываться в дизайн Вашего сайта.<br/>
 
<br/>
 
<br/>
[[Файл:DisplayAds3.png|centre|frame]]
+
[[Файл:Screenshot 2.jpg|centre|frame]]
 
<br/>
 
<br/>
 
На третьем этапе Вам необходимо получить JavaScript-код блока и разместить его на сайте, в желаемое место размещения.<br/>
 
На третьем этапе Вам необходимо получить JavaScript-код блока и разместить его на сайте, в желаемое место размещения.<br/>
Строка 23: Строка 23:
 
[[Файл:DisplayAds4.png|centre|frame]]
 
[[Файл:DisplayAds4.png|centre|frame]]
 
<br/>
 
<br/>
После размещения рекламного блока на Вашем сайте блок становится активным через несколько минут.
+
После размещения рекламного блока на Вашем сайте он становится активным через несколько минут.
  
 
==Описание параметров Javascript-кода==
 
==Описание параметров Javascript-кода==
Строка 44: Строка 44:
 
|}
 
|}
 
<br/>
 
<br/>
==Настройка ТГБ==
 
В конструкторе нативных шаблонов можно выбрать один из готовых базовых шаблонов и кастомизировать его под Ваш дизайн.<br/>
 
<br/>
 
'''Адаптивный таргетинг дизайна'''
 
<br/>
 
Особенностью нашего конструктора является возможность таргетировать дизайны под разные разрешения экрана также как Ваш дизайн адаптируется под разрешения экранов пользователя.<br/>
 
<br/>
 
[[Файл:DisplayAds5.png|centre|frame]]
 
<br/>
 
По умолчанию новый шаблон будет показываться на всем диапазоне ширины экранов Ваших пользователей.<br/>
 
Но если Вы планируете, что для десктопных устройств блок должен быть горизонтальным (например 4 объявления в ряд), а для мобильных устройств становиться вертикальным (например, колонка из 2 объявлений), то вам достаточно сделать 2 шаблона, которые будут таргетированы на разрешение разрешения страниц ('''0 - 500px''' и '''500px - ∞''').<br/>
 
<br/>
 
==Сетка блоков==
 
<br/>
 
Сетка - это инструмент, определяющий, какое количество рекламных объявлений будет показано по горизонтали и по вертикали.<br/>
 
Управляя ползунками, Вы можете определить то количество блоков, которое будет отображаться в рекламном блоке.<br/>
 
Помимо адаптивного таргетинга дизайнов, горизонтальная сетка блоков также является адаптивной. Это означает, что количество рекламных блоков по горизонтали будет зависеть от ширины обрамляющего контейнера и параметра “базовой ширины“ рекламного объявления, но не более максимального значения количества рекламных материалов по горизонтали.<br/>
 
<br/>
 
В области предпросмотра можно оценить, как блок будет отображаться в разных обрамляющих контейнерах. Для этого Вы можете указать ширины и высоту контейнера.<br/>
 
<br/>
 
[[Файл:DisplayAds6.png|centre|frame]]
 
<br/>
 
==Настройка блока==
 
<br/>
 
Во всех базовых дизайнах имеется стандартный набор настроек блока:<br/>
 
*Высота отступа<br/>
 
*Значение верхнего и нижнего отступа блока в px<br/>
 
*Ширина отступа<br/>
 
*Значение правого и левого отступа блока в px<br/>
 
Совокупность данных параметров аналогичны css свойству '''margin: высота_отступа ширина_отступа''';<br/>
 
*Скругление углов. Значение свойства css border-radius для всего рекламного блока.<br/>
 
*Цвета фона. Селектор выбора фона и его прозрачности для рекламного блока<br/>
 
*Маркировка рекламы. Селектор выбора маркировки рекламы, если установлен в значении включен, то на рекламных объявлениях будет добавлена фраза “Реклама” и добавлено меню с информацией о рекламодателе.<br/>
 
<br/>
 
==Заголовок==
 
<br/>
 
Включение данной настройки добавит логотип Kadam над рекламным блоком и позволит добавить над ним дополнительный текст.<br/>
 
<br/>
 
[[Файл:DisplayAds7.png|centre|frame]]
 
<br/>
 
*Текст заголовка. Дополнительный текст который будет добавлен над блоком слева<br/>
 
*Размер шрифта. Размер текста заголовка в px<br/>
 
*Цвет шрифта. Цвет шрифта текста заголовка<br/>
 
*Жирный шрифт. Переключатель размера шрифта<br/>
 
*Логотип. Активирует показ заголовка и позволяет выбрать, какой текст будет показываться рядом с логотипом Kadam<br/>
 
<br/>
 
==Настройка материала==
 
<br/>
 
Внешний вид рекламного объявления также можно настраивать, для этого есть следующий набор настроек:<br/>
 
*Высота. Высота материала в px<br/>
 
*Ширина. Базовая ширина в px. Базовая ширина материала, вокруг которой строится адаптивность сетки по горизонтали. Грубый пример расчета кол-ва тизеров по горизонтали: ширина обрамляющего контейнера / базовая ширина материала = целое число количества материалов по горизонтали<br/>
 
*Отступ сверху \ отступ снизу \ отступ слева \ отступ справа. Размеры персонального отступа рекламного материала в px, для css свойства margin<br/>
 
*Толщина обводки. Размер в px первоначальной обводки рекламного материала<br/>
 
*Скругление углов. Значение css свойства border-radius материала в px<br/>
 
*Цвет обводки. Селектор выбора цвета обводки рекламного материала<br/>
 
*Цвет фона. Селектор цвета фона рекламного материала<br/>
 
*Цвет фона при наведении.Селектор цвета фона рекламного материала при наведении<br/>
 
*Тень. Селектор включения отключения эффекта тени на рекламном материале<br/>
 
<br/>
 
Общая схема размеров рекламного блока:<br/>
 
<br/>
 
[[Файл:DisplayAds8.png|centre|frame]]
 
<br/>
 
 
==Настройка изображения==
 
*Высота. Высота изображения в px. Присутствует в шаблоне Графический с текстом снизу (адаптив) и определяет высоту изображения. В других шаблонах высота изображения равна высоте материала<br/>
 
*Ширина. Ширина изображения в px. Присутствует в шаблонах Графический с текстом справа (адаптив) и Графический с текстом слева (адаптив), определяет ширину изображения<br/>
 
*Отступ снизу. Отступ от изображения снизу в px. Присутствует в шаблоне Графический с текстом снизу (адаптив)<br/>
 
*Скругление углов. Значение css свойства border-radius изображения в px. Только для шаблона Графический с текстом справа (адаптив)<br/>
 
<br/>
 
 
==Настройка текста==
 
Во всех шаблонах доступно изменение визуального стиля текстов:<br/>
 
*Высота отступа. Размер отступа сверху и снизу от текста в px<br/>
 
*Ширина отступа. Размер отступа справа и слева от текста в px<br/>
 
 
Совокупность параметров дает следубщее css свойство: margin: высота ширина отступов<br/>
 
 
*Максимальная длинна текста. Максимальное количество символов в заголовке рекламного объявления<br/>
 
*Шрифт. Селектор выбора шрифтов<br/>
 
*Размер шрифта. Выбор высоты шрифта в px, css свойства font-size<br/>
 
*Межстрочный интервал. Значение css свойства line-height, мы рекомендуем устанавливать значение больше на несколько px чем значение параметра “размер шрифта”<br/>
 
*Цвет шрифта. Селектор выбора цвета шрифта<br/>
 
*Жирный шрифт. Переключатель размера шрифта<br/>
 
*Подчеркивание ссылки. Переключатель режима подчеркивания ссылок при наведении<br/>
 
*Цвет шрифта при наведении. Селектор выбора цвета шрифта<br/>
 
  
==Настройка кнопки==
+
==См. также==
Некоторые шаблоны имеют возможность добавления в дизайн дополнительную кнопку, позволяющую заинтересовать пользователя рекламным объявлением.<br/>
+
*[[Настройка ТГБ (нативные шаблоны)]]
При активации кнопки в шаблоне блока появляется кнопка, которую можно дополнительно настроить под вашу стилистику сайта:<br/>
+
*[[Размещение блока через Adfox Header Bidding]]
*Текст. Селектор выбора текста, который будет отображаться на кнопке (Далее, Подробнее, Читать далее, Узнать больше →)
+
*[[Push]]
*Цвет шрифта \ цвет шрифта при наведении. Селекторы выбора цвета шрифта
+
*[[Clickunder]]
*Цвет фона \ цвет фона при наведении \ цвет обводки \ цвет обводки при наведении. Селекторы выбора цветов фона
+
*[[Native SDK]]
*Расположение. Селектор выбора позиции расположения кнопки (слева, по центру, справа)
+
*[[Рекламные блоки]]

Текущая версия на 14:08, 22 ноября 2022

Данный формат является самым популярным в рекламной сети Kadam.
Он включает в себя поддержку сразу нескольких форматов: нативный и медийный, за счет этого достигается максимальный доход от размещения.
Алгоритм сам выбирает формат для каждого посетителя Вашего сайта.

Создание блока

Перейдите в раздел управления блоками (Сайты → Название сайта) и кликните по кнопке Добавить блок в правом верхнем углу страницы.

Заполните название и выберите формат блока Display Ads.

Screenshot 6.jpg

На втором шаге Вы можете выбрать размеры графических баннеров, которые будут участвовать в аукционе и создать свои собственные нативные шаблоны.

Screenshot 1.jpg


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

Screenshot 2.jpg


На третьем этапе Вам необходимо получить JavaScript-код блока и разместить его на сайте, в желаемое место размещения.

DisplayAds4.png


После размещения рекламного блока на Вашем сайте он становится активным через несколько минут.

Описание параметров Javascript-кода


Название параметра Тип данных Описание Примечания Необходимость
domain string Домен для запросов Kadam Обязательно
fallback Function(string) => void Функция, вызывающаяся если сервер не сумел отдать рекламу В аргумент функции передаётся строка, объясняющая причину отказа (напр., 204 или 500) Необязательно
id string ID рекламного блока в формате 6 случайных латинских букв + id Например, VDOuge331256 Обязательно
next integer Время в минутах, которое должно пройти между заходами одного пользователя, чтобы ему снова показалась реклама Если параметр не указан, реклама будет показываться пользователю при каждом заходе Необязательно
refresh boolean Обновлять баннеры или нет после того, как пользователь ушёл на другую вкладку или свернул браузер, а потом вернулся на страницу По умолчанию равен false Необязательно
type bn Тип рекламного блока Обязательно у баннера и Display Ads


См. также