JS API и события — Заявки для Webasyst

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

События

Событие	Когда	Данные в `event.detail`
`requests:form:init`	Форма инициализирована	`formId`
`requests:submit:start`	Перед отправкой	`formId`
`requests:submit:success`	Заявка принята	`formId`, `requestId`, `message`, `redirectUrl`
`requests:submit:error`	Отправка не прошла	`formId`, `error`, `validationErrors`, `source`
`requests:modal:open`	Модальное окно открылось	`formId`
`requests:modal:close`	Модальное окно закрылось	`formId`

Откуда пришла ошибка

У события ошибки есть поле source:

client — не прошла проверка в браузере: пустое обязательное поле, неверный формат. До сервера запрос не дошёл, validationErrors пустой.
server — ответ приложения.

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

Пример: своя обработка успеха

document.addEventListener('requests:submit:success', (event) => {
    console.log('Заявка №', event.detail.requestId);
});

document.addEventListener('requests:submit:error', (event) => {
    if (event.detail.source === 'client') {
        // посетитель не заполнил обязательное поле
    }
});

Код можно положить в блок скриптов темы — он подключается на всех страницах, где выводится форма.

Цели Яндекс.Метрики без кода

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