Appearance
Баннеры и слайдеры
Управление баннерами и слайдерами для рассылок находится в разделе "Общий контент", подраздел "Баннеры и слайдеры". Здесь можно создавать и настраивать баннеры без ограничений по сроку действия.
Инструмент позволяет маркетологам управлять полным стеком баннеров из одной панели.
Настройка баннеров и слайдеров
При переходе в подраздел отображается список групп баннеров. Группа — это набор баннеров, объединённых под одним уникальным кодом (стеком). Каждый баннер в группе может отличаться по изображению, ссылке и другим параметрам.
Как создать баннер
Платформа поддерживает возможность создания двух типов баннеров: графические и HTML.
Графический баннер
- Загрузите изображение в формате JPG или PNG. Рекомендуется предварительно оптимизировать файл для уменьшения размера
- Укажите целевую ссылку — пользователь будет перенаправлен по ней при клике на баннер
- Добавьте диплинк для iOS
- Добавьте диплинк для Android
- Укажите теги — они используются для фильтрации баннеров на стороне клиента
- Задайте позицию баннера в списке
- Выберите статус: активен или неактивен
Позиция
По умолчанию баннеры возвращаются в порядке создания. Позиция позволяет вручную задать порядок. Например, баннер с позицией 3 будет третьим в ответе API.
Баннер HTML
При создании html-баннера потребуется заполнить поля настроек.
Некоторые вам уже знакомы, но мы разберём все
- Содержимое баннера - в это поле нужно вставить HTML разметку вашего баннера.
- Целевая ссылка - определяет куда пользователь будет перенаправлен после клика на банер
- Диплинк iOS - специальная ссылка, которая ведёт на конкретный экран мобильного приложения
- Диплинк Android - то же самое для Android
- Теги - для фильтрации баннеров на стороне клиента
- Позиция - порядок возвращения баннеров в ответе API
- Статус - баннер активен или не активен
- Erid - поле для размещения рекламного Erid-токена
- Segment ids - сегменты аудитории, которым будет показан баннер
- Exclude segment ids - для выбранных сегментов аудитории данный баннер не будет показан
- Start date - дата начала показа этого баннера
- Start time - время начала показа этого баннера
- Finish date - дата окончания показа
- Finish time - время окончания показа
Работа с баннерами через API
При создании группы баннеров задаётся уникальный код, по которому стек можно получить через API:
json
curl https://api.rees46.ru/slider?shop_id=...&code=...&did=...&email=...&phone=...&external_id=...&tags=...json
{
"status": "success",
"payload": {
"properties": {
"code": "homepage_mobile",
"width": 1000,
"height": 160
},
"banners": [
{
"image_url": "...",
"url": "...",
"deeplink_ios": "...",
"deeplink_android": "...",
"content_type": "...",
"content": "...",
"html": "..."
},
...
]
}
}javascript
/* Вы можете использовать стандартную реализацию, добавив следующий блок на свою страницу */
<div class="rees46-slider" data-slider-code="SLIDER_CODE"></div>
/*
Самостоятельная отрисовка (получение "сырых" данных). Следующий пример предполагает, что SDK уже импортирован и инициализирован.
Убедитесь, что указан корректный код слайдера. Это обязательное требование. В ответ возвращается JSON с данными. Используйте этот режим, если вы хотите реализовать собственную отрисовку слайдера.
*/
r46('slider', {code: "SLIDER_CODE"}, r => console.log(r))
/*
Кастомная отрисовка в указанный блок с возможностью изменения настроек.
В этом случае обязательны два параметра: code и block.
block — ID элемента, в который будет встроен слайдер.
config — необязательный параметр для конфигурации слайдера.
*/
r46('slider', {code: 'demoshop_main', block: 'rees46-slider', config: {dotBgColor: 'red', dotActiveBgColor: 'green', dotHoverBgColor: 'yellow'}})markdown
### HTTP Запрос
`GET https://<%= config[:api_endpoint] %>/slider`
### Параметры запроса
| Параметр | Обязательный | Описание |
|-------------|--------------|-----------------------------------------------------------|
| did | нет | Идентификатор устройства. Получается из метода `init` SDK |
| email | нет | Email пользователя |
| phone | нет | Телефон пользователя |
| external_id | нет | ID пользователя из вашей базы данных |
| shop_id | да | Ваш API ключ |
| code | да | Уникальный код слайдера |
| tags | нет | Теги для фильтрации баннеров (список тегов через запятую) |
### Ответ API
Структура объекта
| Название | Тип | Описание |
|:-----------|:---------|-------------------------------|
| properties | object | Объект со свойствами слайдера |
| slides | banner[] | Список баннеров |
Структура объекта `properties`:
| Название | Тип | Описание |
|:---------|:--------|----------------------------|
| code | string | Уникальный код слайдера |
| width | integer | Ширина баннера в пикселях |
| height | integer | Высота баннера в пикселях |
Содержимое `banner`:
| Название | Тип | Описание |
|:-----------------|:-------|---------------------------------------------|
| image_url | string | URL изображения |
| url | string | URL назначения |
| deeplink_ios | string | Deeplink для iOS |
| deeplink_android | string | Deeplink для Android |
| content_type | string | Тип контента (зарезервированное поле) |
| content | text | Содержимое баннера (зарезервированное поле) |
| html | html | Содержимое баннера (HTML) |Также важно указать теги: с их помощью можно выбрать конкретные баннеры внутри стека.
Иными словами:
- Уникальный код определяет группу (стек) баннеров.
- Теги определяют конкретные баннеры внутри этой группы.
Баннеры для рассылок
Баннеры можно использовать в любых типах рассылок: массовых и триггерных. Чтобы отобразить нужный баннер, достаточно указать тег в шаблоне.
Главное преимущество — управление содержимым без правки шаблона. Если в шаблоне уже указан тег, вы можете в любой момент заменить изображение, ссылку или диплинк — и новый баннер автоматически подставится в рассылку. Это снижает риск ошибок и упрощает редактирование контента.