Настройка и публикация компонента

Перед началом

Проверьте установку кода проекта, подготовьте тексты, ссылки и изображения. Для изменения настроек нужны права редактирования проекта. Встраиваемому блоку нужен CSS-селектор элемента страницы: если вы не знаете его, попросите специалиста сайта определить нужный элемент.

В «Полосе преимуществ» выберите «Вид»: компактный показывает иконки рядом с заголовками, подробный — иконки сверху, общий заголовок и описания. Ссылки в компактном виде ведут из заголовков пунктов, в подробном — из «Подробнее». Переключение сохраняет тексты, порядок пунктов и условия.

Создание и редактирование

В разделе «Компоненты» начните создание. Мастер состоит из четырёх шагов: выбор шаблона, настройка, размещение, проверка и публикация. Сравнение шаблонов поможет выбрать подходящий.

Созданный компонент открывается на одной странице редактирования. Название и статус находятся вверху, содержимое, оформление, размещение и условия — ниже. Для правок существующего компонента не нужно повторно проходить выбор шаблона.

Способ показа

В разделе условий выберите Способ показа:

• По условиям — компонент показывается самостоятельно по своим общим условиям.
• В персонализации или A/B-тесте — компонент запускается через выбранный вариант. Общие условия скрыты, но сохраняются для возможного возвращения к самостоятельному показу. Условия внутри содержимого, оформления и размещения продолжают работать.

Компонент для вариантов можно заранее настроить и опубликовать: без связанного варианта он не появится у обычных посетителей. Затем откройте вариант и выберите Добавить действие → Готовые компоненты. Подключение не удаляет другие действия. Полный порядок — в инструкции действий варианта.

Можно подключить и опубликованный компонент, который уже показывается «По условиям». Редактор попросит подтвердить смену способа показа; она произойдёт только после сохранения варианта. Компонент включится и перестанет показываться самостоятельно.

Содержимое и параметры

При выборе «Калькулятора выгоды» в мастере уже заполнен простой пример «Экономия со скидкой»: цена товара, количество, скидка и формула экономии. Измените значения и подписи под свой случай; этот пример сохраняется вместе с компонентом. Пример с электромобилем можно посмотреть в предпросмотре и перенести в форму кнопкой «Использовать этот пример».

Для «Калькулятора выгоды» используйте разделы ниже: поля посетителя, расчёты, результаты и сравнения, тексты и кнопка. Подробности — в настройке калькулятора.

Для «Кредитного калькулятора» настройте основные поля, программы, дополнительные поля и расчёты, ставку и результат. Подробности — в инструкции кредитного калькулятора.

1. Укажите базовые тексты, ссылки и значения. Изображения выбирайте из библиотеки проекта или загружайте через поле изображения. Добавьте описание изображения, если оно передаёт смысл.
2. Для подстановки данных откройте меню «Параметры», выберите доступное значение и вставьте скопированную строку в текст. Данные должны существовать на нужной странице или у посетителя; пример в кабинете их не создаёт.
3. Если часть настроек должна отличаться для отдельных посетителей, нажмите «+ Вариант» во вкладке «Содержимое», «Оформление» или «Размещение». Добавьте только изменяемые поля через «Добавить поле», а условия задайте внизу блока. Каждая вкладка выбирает первый подходящий вариант целиком; пропущенные поля наследуют версию «По умолчанию». Вариант без условий не применяется. При одинаковых условиях используется первый по порядку. Пока данные более раннего варианта ожидаются, показ может ожидать их тоже.
4. Для способа «По условиям» задайте общие условия показа: подходящий вариант вкладки не отменяет их. При запуске через персонализацию или A/B-тест показ определяют условия и выбор варианта этой сущности.

У «Баннера / карусели» настройте список слайдов и изображение каждого слайда. Порядок и состав слайдов можно изменить в варианте вкладки «Содержимое». Перестановка сохраняет текст и изображение каждого слайда; удаление слайда из одного списка не удаляет его из других вариантов. Один подходящий слайд отображается как баннер без навигации. У «Мессенджеров» включите хотя бы один канал, заполните подпись и ссылку. Для круглой кнопки выберите готовую иконку или изображение и заполните выбранный вариант.

Оформление

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

В разделе «Оформление» выберите палитру или измените цвета, рамку, скругление и другие доступные параметры. Предпросмотр меняется сразу, общие настройки сайта — после сохранения. Выбор другой палитры заменяет текущие значения формы, поэтому сначала сохраните нужный результат.

В настройках компонента можно переопределить отдельные параметры оформления. Они сохраняются при изменении общего оформления; наследуемые параметры получают новые общие значения. Ширина задаётся у компонента. Редактора произвольного CSS нет.

Размещение

• Встраиваемый блок: задайте селектор и действие «Заменить», «Вставить перед» или «Вставить после». При замене исходный элемент удаляется со страницы. Не выбирайте важный элемент, который должен оставаться доступным.
• Поповер: выберите позицию на экране. Проверьте, не перекрывает ли он навигацию и другие важные элементы на телефоне.
• Модальное окно: селектор не требуется. Показ учитывает занятость места другими окнами и ограничение повторного показа в сессии.

Предпросмотр и проверочная ссылка

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

Для проверки на сайте укажите целевую страницу, если она не определена точным условием адреса, и получите проверочную ссылку. Действие «Опубликовать превью» выдаёт доступ к проверке и при необходимости сохраняет первоначальный черновик; уже существующий черновик оно не обновляет. Чтобы сохранить правки для продолжения работы, используйте сохранение черновика отдельно.

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

Связанные варианты

В списке компонентов показаны способ показа и отметка Используется в N вариантах. Откройте связи, чтобы перейти к нужной персонализации, A/B-тесту или варианту. Один компонент может использоваться несколькими вариантами: они получают общую опубликованную версию, а не независимые копии.

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

После удаления последней связи компонент останавливается и остаётся в режиме «В персонализации или A/B-тесте». Для самостоятельного показа явно выберите «По условиям», проверьте сохранённые условия, сохраните настройку и отдельно включите компонент.

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

Черновик, публикация и статус

Действие	Что происходит
Сохранить черновик	Сохраняет незавершённые настройки для продолжения работы; посетители их не получают
Опубликовать и запустить	Первая публикация включает компонент; показ зависит от выбранного способа, а для режима персонализации нужна связь с вариантом
Опубликовать изменения	Заменяет опубликованные настройки; без изменения статуса остановленный компонент остаётся остановленным
Запустить	Включает последние опубликованные настройки; отдельный черновик не публикуется
Остановить	Отключает последующие показы после обновления настроек; публикация и черновик сохраняются

«Не опубликовано» означает, что есть только черновик. «Запущено» означает, что публикация включена; показ всё равно зависит от условий и готовности страницы. «Остановлено» сохраняет публикацию, но отключает её показ.

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

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

Уже показанный компонент не заменяется новыми настройками посреди просмотра. Остановка не удаляет его немедленно; он остаётся до закрытия или завершения страницы. При замене элемента страницы не рассчитывайте на автоматическое восстановление исходного элемента после закрытия компонента.

Далее: проверка показа и ограничения.

Осталось до цели

Задайте положительную сумму цели, трёхбуквенный код валюты (RUB, EUR, USD), сообщение с {remaining} и сообщение успеха. Иконка и кнопка необязательны. При неизвестной или нулевой сумме поповер скрыт. Достигнутая цель заполняет прогресс; уменьшение суммы возвращает остаток. Закрытие действует до смены страницы. Обновляется сумма, а не опубликованная конфигурация. Предпросмотр «До цели / Цель достигнута» использует демонстрационные данные, которые не сохраняются в настройках.

Выберите один источник. Автоматического переключения нет:

Источник	Настройка и ограничение
Автоматически из событий	Первое корректное событие корзины разрешает показ в активной сессии; переходы и перезагрузка сохраняют его. Новая сессия снова ждёт событие. Поддерживаются add_to_cart, remove_from_cart, view_cart, begin_checkout, purchase и поддерживаемые старые ecommerce-события. Цены и количества нужны для расчёта. Пропущенные события могут оставить сумму устаревшей: отдельной сверки нет.
JavaScript	Зарегистрируйте registerCartUpdate, передавайте начальную полную сумму и последующие изменения. До первой суммы или после null поповер скрыт.
Элемент страницы	Укажите CSS-селектор единственного элемента с итоговой суммой. Следим за текстом, появлением и заменой элемента. Нет элемента или значение неоднозначно — скрываем до корректных данных.

Для DOM подойдёт <span id="cart-total">6 000,50 ₽</span> и селектор #cart-total. Распознаются 6000.50, 6 000 ₽, Итого: 6 000,50 ₽. Строка «Было 7 000 ₽, стало 6 000 ₽» неоднозначна: выбирайте элемент с итогом. Селектор не должен захватывать дубли, количество товаров или доставку. JavaScript и DOM не подменяют товарную аналитику и не требуют события dataLayer.

Знак вопроса у поля источника открывает «Как настроить»: пояснения и копируемые примеры кода. Сумма и цель должны быть в одной валюте; компонент сам не предоставляет награду, не рассчитывает скидки и не конвертирует деньги.

Рассрочка

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

Выберите один источник цены: Schema.org (по умолчанию, цена основного товара из структурированной разметки) или элемент страницы (CSS-селектор). Автоматического переключения нет. Для элемента подходит, например:

<span id="product-price">12 000,50 ₽</span>
<!-- CSS selector: #product-price -->

Распознаются 12 000,50 ₽, 12000.50, 1,234.56 USD. Текст «Было 15 000, стало 12 000» и несколько совпавших элементов неоднозначны. При неизвестной, нулевой или некорректной цене поповер скрыт. Изменение, появление и замена цены обновляют показ. После ручного закрытия он не возвращается на этой странице.

Добавьте один или несколько сроков. Для каждого задайте число в круглом переключателе, полное название, количество платежей, интервал (дни, недели или месяцы), первый платёж сегодня или позже и процент переплаты за весь срок. Название срока — ваша подпись: оно не вычисляется из интервала. Один срок не показывает переключатель, несколько — показывают в заданном порядке. Первый выбран по умолчанию; выбор сохраняется при изменении цены и временном скрытии.

Переплата — процент к полной цене, не годовая ставка. Итог округляется до точности выбранной валюты; равные платежи округляются вниз, остаток включается в последний. Если последний отличается, показано «платежей от» и его точная сумма. При ненулевой переплате всегда видны переплата и итог. Валюта задаётся явно, конвертации нет.

При первом платеже позже подпись показывает «Сегодня 0», затем все будущие платежи. При оплате сегодня — первый платёж и количество оставшихся. Текст «Покупка на {price}» можно заменить своим или очистить: {price} подставляет цену с валютой. Ссылка на условия также необязательна. Демонстрационная цена в предпросмотре не становится рабочей ценой компонента.

Калькулятор выгоды

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

1. Поля калькулятора. Добавьте число, выбор из списка или переключатель. Для числа можно задать минимум, максимум, шаг, ползунок и быстрые значения. Вариант списка или быстрое значение связывается с нужным полем. Переключатель передаёт 0 или 1.
2. Расчёты. Раздел доступен после добавления хотя бы одного поля калькулятора. Удаление последнего поля блокирует раздел, но сохраняет расчёты. Добавьте постоянные коэффициенты и формулы. Начальное значение можно получить из доступного источника сайта. Оно фиксируется при показе: последующие изменения страницы не затирают ввод посетителя. Если значения нет, зависимый результат недоступен; пустое поле не считается нулём.
3. Результаты и сравнения. Выберите один главный результат. Для диаграммы нажмите «Добавить сравнение», задайте заголовок и внутри него добавьте показатели кнопкой «Добавить показатель». У каждой строки выберите значение, подпись и единицу. Полосы внутри сравнения используют общую шкалу: сравнивайте одинаковые единицы и периоды. В «Дополнительно» можно настроить округление, подписи при нуле и перенести показатель в другое сравнение или в отдельный результат. Кнопки «Выше» и «Ниже» меняют порядок только внутри текущего сравнения. Сравнение удаляется вместе со своими показателями после подтверждения. Поля и формулы остаются. При удалении из базового варианта наследующие варианты тоже теряют это сравнение; варианты с собственным списком сравнений сохраняются.
4. Тексты и кнопка. Укажите заголовки, пояснения, допущения расчёта и действие кнопки. Цвета и шрифты наследуются от оформления проекта.

Формулы и справка

Нажмите «Добавить поле»: в позиции курсора появится бейдж «Выбрать». Нажмите на него и выберите поле через поиск. Формула показывает названия полей, а связи сохраняются при переименовании. Перетащите бейдж на другой для обмена местами или между символами для перемещения. Операции и скобки не переставляются автоматически. С клавиатуры Alt + ← / → меняет бейдж местами с соседним, Delete удаляет его. Числа записываются с точкой. Доступны + - * /, скобки, сравнения == != < <= > >=, логические операции && || !, функции pow(a,b), min(a,b), max(a,b), round(a) или round(a,точность), if(условие,да,нет). Проценты требуют явного деления на 100. if вычисляет только выбранную ветку. Произвольный JavaScript не выполняется.

«Справка по формулам» разделена на четыре вкладки: «Начать» с пошаговым примером экономии, «Примеры» с объяснением каждого расчёта, «Операции» и «Ошибки» с подсказками по исправлению. Названия полей в примерах условные: в своей формуле выбирайте поля через бейджи. Единица результата задаётся в «Результатах и сравнениях»; у промежуточного расчёта отдельной единицы нет.

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

Кнопка «Показать демонстрационный пример» включает пример сравнения бензина и электричества только в предпросмотре. Чтобы редактировать его под себя, нажмите «Использовать этот пример» и подтвердите замену. Поля, расчёты, результаты, тексты и условные варианты содержимого будут заменены. Оформление, размещение и условия показа сохранятся. Затем отредактируйте пример и сохраните черновик; сам перенос ничего не публикует. Проверьте свой калькулятор на компьютере и телефоне перед публикацией.

В демонстрационном примере кнопка выключена, её текст и ссылка пусты. Чтобы добавить переход, включите кнопку в «Текстах и кнопке», задайте подпись и адрес. Пояснения и допущения расчёта отображаются независимо от кнопки.

Кредитный калькулятор

Встраиваемый блок для предварительной оценки кредита, ипотеки или автокредита. При создании уже заполнены две вымышленные программы и два переключателя скидки. Замените условия реальными данными своего предложения; компонент сам не получает банковские ставки.

Основные поля

Выберите «Стоимость покупки и взнос» или «Сумма кредита». В первом случае кредит равен стоимости за вычетом взноса; посетитель может переключать взнос между суммой и процентом. Во втором вводится непосредственно сумма кредита.

Укажите валюту, подписи, начальные значения и границы полей. Ползунки и быстрые значения настраиваются у соответствующего поля. Срок, его границы, шаг и быстрые значения задаются в целых месяцах: 120 месяцев — 10 лет. Настройка «Отображение срока» меняет единицы для посетителя, а не единицы в редакторе.

Выберите схему: «Равные платежи» (аннуитетная), «Уменьшающиеся платежи» (дифференцированная) или «Посетитель выбирает». В последнем случае посетитель начинает с равных платежей.

Кредитные программы

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

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

Дополнительные поля и расчёты

Доступны числа, списки, переключатели, постоянные значения и формулы. У списка видимая подпись отличается от числового значения для расчёта; переключатель передаёт 1 при включении и 0 при выключении. Доступность можно ограничить программами; если ни одна программа не отмечена, поле доступно всем.

Недоступные выбранной программе поля не участвуют в её расчёте. Формула не должна ссылаться на такое поле. Для проверки переключайте программы в предпросмотре. Число под промежуточной формулой в редакторе использует начальные значения и базовую ставку первой программы; результат ставки в «Ставке и условиях» проверяется для выбранной там программы.

Ставка и условия

Для каждой программы выберите один режим:

• По условиям. Добавьте правило, выберите доступный программе переключатель и состояние «Включён» или «Выключен». Кнопка «И ещё условие» добавляет проверку через «и»: нужны все указанные состояния. Затем выберите «Установить ставку» или «Изменить на п. п.» и задайте число. Среди совпавших правил установки применяется первое сверху; после него складываются все подходящие поправки. Если установки не совпали, поправки применяются к базовой ставке. Чтобы скидки не складывались, задайте взаимоисключающие состояния.
• По формуле. Формула возвращает итоговую годовую ставку в процентах. Доступны основные и дополнительные поля, расчёты и «Базовая ставка». Табличные правила в этом режиме не применяются. Для зависимости от числа или списка используйте формулу, например if([Количество] >= 3, [Базовая ставка] - 1, [Базовая ставка]). Названия в скобках заменяйте бейджами полей; подробнее — формулы и справка.

Поправка −1 п. п. превращает 14% в 13%. Снижение самой ставки на 1% дало бы 13,86% — это другое действие. В режиме условий посетитель видит базовую ставку и применённые правила; в режиме формулы — итог и ваше пояснение к формуле.

Результат и ограничения

Главный результат — примерный ежемесячный платёж. Для уменьшающихся платежей показывается диапазон от первого до последнего. Ниже доступны сумма кредита, проценты за срок, общая сумма выплат и итоговая годовая ставка. В «Дополнительных показателях» можно вывести свои расчёты с подписями и единицами. Пользовательская формула не заменяет встроенный расчёт платежа.

Расчёт предполагает ежемесячные платежи и постоянную годовую ставку. Суммы на сайте показаны округлёнными до целых единиц валюты: общая сумма не обязана равняться показанному округлённому платежу, умноженному на срок. График платежей не создаётся. При необходимости включите кнопку, укажите текст и ссылку на предложение или расчёт кредитора; в примере кнопка выключена.

Нулевая ставка поддерживается. При взносе, равном стоимости, отображается «Кредит не требуется». Взнос больше стоимости, недопустимый срок, отрицательная ставка или отсутствие обязательных данных не дают рассчитать платёж. Ошибка отдельной дополнительной формулы оставляет недоступным её результат; независимые показатели продолжают рассчитываться.

Нет расчёта ПСК, страховых платежей и комиссий, досрочного погашения, изменения ставки по месяцам и начисления по календарным дням. Компонент не проверяет одобрение и не оформляет кредит. Укажите допущения в текстах компонента и ссылку на точные условия кредитора.

Варианты, пример и публикация

Кредитные программы выбирает посетитель. Условные варианты вкладок применяются по заданным вами условиям показа — это отдельная настройка. В варианте нажмите «Добавить поле» и выберите только отличия: меню разделено на группы и подгруппы с названиями программ, полей и результатов. Поиск показывает путь поля. Удаление поля из варианта возвращает базовое значение; саму программу или поле калькулятора оно не удаляет. Так же устроены варианты калькулятора выгоды.

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

Сохраните незавершённую настройку как черновик. Перед публикацией исправьте ошибки формул, ссылок и диапазонов во всех программах и вариантах. Проверьте каждый вариант, каждую программу, включённые и выключенные условия, обе доступные схемы и узкий контейнер. Для обоих калькуляторов поддерживаются фиксированная ширина и «На всю ширину контейнера».