JavaScript API виджетов
Объекты lpTool и lpUser, события виджета, функции LP_show, LP_close, LP_submit, LP_send и события на странице сайта.
Виджеты LeadPlan можно дополнять своим JavaScript-кодом: отправлять цели в Яндекс Метрику, добавлять в заявку данные со страницы, показывать виджеты по клику или по цепочке. Код пишется на вкладке JavaScript в режиме тонкой настройки — как его включить, читайте в статье «Тонкая настройка формы в поп-апе».
Код на вкладке JavaScript
При включении тонкой настройки поле JavaScript пустое. Код из этого поля выполняется внутри виджета: здесь доступны объекты lpTool и lpUser. Со страницы сайта эти объекты не видны.
Поле пригодится, например, чтобы после заявки отправить цель в Яндекс Метрику, добавить к данным формы значение со страницы или из cookies, показать следующий виджет.
Объект lpTool
Содержит поля и события текущего виджета. На странице может быть несколько виджетов, в том числе скрытых, поэтому работайте с элементами через lpTool, а не через поиск по всей странице.
lpTool.element
Ссылка на DOM-элемент виджета. Например, поле email можно получить так:
var email = lpTool.element.querySelector('input[name="email"]');
lpTool.data
Значения всех страниц формы: {email, phone, name, …}. Ключи — системные имена полей.
События
На события подписываются вызовом функции, например lpTool.onShow(fn). Присваивание вида lpTool.onShow = fn из старых примеров на текущей версии ничего не делает.
| Событие | Когда срабатывает |
|---|---|
lpTool.beforeShow(fn) |
Перед показом виджета. Если обработчик вернёт false, показ отменится. DOM виджета здесь ещё недоступен — для работы с ним используйте onShow |
lpTool.onShow(fn) |
При показе виджета |
lpTool.beforeSubmit(fn) |
Перед отправкой заявки. Данные в e.data можно изменить — изменения попадут в заявку. Если вернуть false, отправка отменится |
lpTool.onSubmit(fn) |
После того как сервер принял заявку |
lpTool.onClose(fn) |
При закрытии виджета |
lpTool.onCloseSuccess(fn) |
После закрытия окна с благодарностью за подписку |
В обработчик приходит объект {id, data, testId}: id — номер виджета, data — данные формы (то же, что в lpTool.data).
Цель в Яндекс Метрике после заявки:
lpTool.onSubmit(e => {
ym(12345, 'reachGoal', 'lead', { email: e.data.email });
});
Город посетителя в данных заявки:
lpTool.beforeSubmit(e => {
e.data.city = lpUser.environment.cityName || '';
});
Объект lpUser
Доступен только в коде виджета.
lpUser.data — данные из прошлой заявки посетителя на этом сайте: name, email, phone, surName и другие поля. У нового посетителя объект пустой. Подходит, чтобы обратиться к посетителю по имени или заполнить форму заранее.
lpUser.environment — данные о посетителе. Значения могут быть null, проверяйте их перед использованием.
| Поле | Что это |
|---|---|
id |
ID посетителя (GUID), тот же, что visitor_key в вебхуке |
ipAddress, countryName, regionName, cityName, locale |
Данные по текущему IP-адресу и язык браузера |
browserType, deviceType, deviceOs |
Браузер, тип устройства и ОС |
utmSource, utmMedium, utmCampaign, utmContent, utmTerm, lastReferer |
Метки и источник из прошлой заявки. У нового посетителя пустые |
createdOn, lastUpdated |
Первый и последний визит |
Например, lpUser.environment можно добавить к заявке, чтобы передать в CRM, или подставить город в текст виджета.
Функции для управления виджетами
Эти функции доступны на странице сайта, где установлен код LeadPlan. Аргумент id — номер виджета из личного кабинета, число. Если вызвать функцию до загрузки скрипта LeadPlan, вызов встанет в очередь и выполнится после загрузки.
| Функция | Что делает |
|---|---|
LP_show(id) |
Показывает виджет в обход условий показа |
LP_close(id) |
Закрывает виджет. Без id закрывает все открытые виджеты |
LP_submit(id) |
Отправляет заявку из виджета |
LP_send(id, data) |
Отправляет заявку без интерфейса и без событий виджета |
Имена функций пишутся заглавными буквами: LP_show, а не lp_show.
Показ виджета по клику на кнопку:
document.querySelector('#promo-btn').addEventListener('click', () => LP_show(85116));
Показ второго виджета после заявки в первом (код в поле JavaScript первого виджета):
lpTool.onSubmit(() => {
LP_show(85117);
});
События виджетов на странице сайта
Со страницы сайта события виджетов ловятся через объект window.leadplan. Например, заявка из виджета 85116:
leadplan.onSubmit(85116, e => console.log(e.data));
Не нашли ответ? Напишите нам — разберёмся вместе.