Подписка на события виджетов

Читать 9

Общая информация

Помимо отправки данных в Google Analytics и Яндекс Метрику, вы можете получать расширенные данные по виджетам напрямую с вашего сайта. Ниже описывается схема подключения отслеживания событий виджета.

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

Подписка на события

Формат события

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

window.ct('modules', 'widgets', 'subscribeToEvent', subsribeSettings)[{
   object: <string>
action: <string>
callback: <callback>
}
...
]

Где параметр subsribeSettings является массивом объектов (событий), которые имеют следующую структуру:

  • object: <string> // строка, обозначающая элемент, с которым произошло событие. Возможные варианты: 'module', 'button', 'form', 'dialog', 'request', 'multi-button'
  • action: <string> // строка, обозначающая  действие, которое произошло с объектом. Возможные варианты: 'loaded', 'show', 'close', 'create', 'fail', 'click', 'open'
  • callback: <callback> // строка, обозначающая функцию обратного вызова. 

Функция обратного вызова имеет вид:

function(event) {}

где event это объект вида:

{
object: <string>
action: <string>
data: <object|null>
}

Объекты виджетов

Модуль (module)

Типы виджетов, на которых может возникать событие:

Действия:

  • show — показ кнопки
  • loaded — загрузка завершена

Данные по событию:

  • siteId — идентификатор сайта, виджет которого сработал
  • sessionId — идентификатор сессии, в рамках которой произошло событие
  • actionType — тип действия, может принимать одно из 2 значений
    • manual — действие произведено пользователем
    • auto — действие произведено автоматически (по таймеру или автоматически происходит при загрузке в соответствии с настройками виджета)
  • isMobile — флаг, мобильное ли устройство, на котором произошло событие
  • isMultiButton — флаг, был ли виджет, над объектом которого было произведено действие, в составе мультикнопки

Кнопка виджета (button)

Типы виджетов, на которых может возникать событие:

Действия:

  • click — клик по кнопке

Данные по событию:

  • widgetId — идентификатор виджета, над объектом которого было произведено действие; 
  • widgetType — тип виджета, над объектом которого было произведено действие; 
  • siteId — идентификатор сайта, виджет которого сработал;
  • sessionId — идентификатор сессии, в рамках которой произошло событие;
  • workMode — режим работы виджета, может принимать одно из 2 значений:
    • working_hours — рабочее время;
    • non_working_hours — нерабочее время;
  • actionType - тип действия, может принимать одно из 2 значений:
    • manual — действие произведено пользователем;
    • auto — действие произведено автоматически (по таймеру или автоматически происходит при загрузке в соответствии с наcтройками виджета);
  • isMobile — флаг, мобильное ли устройство, на котором произошло событие;
  • isMultiButton — флаг, был ли виджет, над объектом которого было произведено действие, в составе мультикнопки.

Всплывающий диалог виджета (dialog)

Типы виджетов, на которых может возникать событие:

Действия:

  • show — показ всплывающего диалога;
  • close — закрытие всплывающего диалога.

Данные по событию:

  • widgetId — идентификатор виджета, над объектом которого было произведено действие;
  • widgetType — тип виджета, над объектом которого было произведено действие;
  • siteId — идентификатор сайта, виджет которого сработал;
  • sessionId — идентификатор сессии, в рамках которой произошло событие;
  • workMode — режим работы виджета, может принимать одно из 2 значений:
    • working_hours — рабочее время;
    • non_working_hours — нерабочее время;
  • actionType — тип действия, может принимать одно из 2 значений:
    • manual — действие произведено пользователем;
    • auto — действие произведено автоматически (по таймеру или автоматически происходит при загрузке в соответствии с настройками виджета);
  • isMobile — флаг, мобильное ли устройство, на котором произошло событие;
  • isMultiButton — флаг, был ли виджет, над объектом которого было произведено действие, в составе мультикнопки.

Форма виджета (form)

Типы виджетов, на которых может возникать событие:

Действия:

  • show — показ формы;
  • close — закрытие формы.

Данные по событию:

  • widgetId — идентификатор виджета, над объектом которого было произведено действие;
  • widgetType — тип виджета, над объектом которого было произведено действие;
  • siteId — идентификатор сайта, виджет которого сработал;
  • sessionId — идентификатор сессии, в рамках которой произошло событие;
  • workMode — режим работы виджета, может принимать одно из 2 значений:
    • working_hours — рабочее время;
    • non_working_hours — нерабочее время;
  • actionType — тип действия, может принимать одно из 2 значений:
    • manual — действие произведено пользователем;
    • auto — действие произведено автоматически (по таймеру или автоматически происходит при загрузке в соответствии с настройками виджета);
  • isMobile — флаг, мобильное ли устройство, на котором произошло событие;
  • isMultiButton — флаг, был ли виджет, над объектом которого было произведено действие, в составе мультикнопки.

 

Заявка с виджета (request)

Типы виджетов, на которых может возникать событие:

Действия:

  • create — заявка создана успешна;
  • fail — в ходе отправки заявки произошла ошибка.

Данные по событию:

  • widgetId — идентификатор виджета, над объектом которого было произведено действие;
  • widgetType — тип виджета, над объектом которого было произведено действие;
  • siteId — идентификатор сайта, виджет которого сработал;
  • sessionId — идентификатор сессии, в рамках которой произошло событие;
  • workMode — режим работы виджета, может принимать одно из 2 значений working_hours - рабочее время, non_working_hours — нерабочее время;
  • actionType — тип действия, может принимать одно из 2 значений:
    • manual — действие произведено пользователем;
    • auto — действие произведено автоматически (по таймеру или автоматически происходит при загрузке в соответствии с настройками виджета);
  • isMobile — флаг, мобильное ли устройство, на котором произошло событие;
  • isMultiButton — флаг, был ли виджет, над объектом которого было произведено действие, в составе мультикнопки;
  • timePeriodType — тип временного периода, на которое заказана заявка, может принимать одно из 2 значений:
    • now — выполнить сейчас;
    • exact — выполнить в конкретное время;
  • fields — массив пользовательских данных, введенных в форме.

Объекты мультикнопки

Кнопка мультикнопки (multi-button)

Действия:

  • open — открыт блок с кнопками виджета;
  • close — закрыт блок с кнопками виджета.

Данные по событию:

  • siteId — идентификатор сайта, виджет которого сработал;
  • sessionId — идентификатор сессии, в рамках которой произошло событие.

Примеры использования

Подписка на событие клика по кнопке виджета

Типовой скрипт подписки на событие клика по кнопке определенного типа виджета будет выглядеть так:

window.ct('modules', 'widgets', 'subscribeToEvent', [{
object: 'button', action: 'click', callback: function(event) { if (event.data.widgetType=='whatsapp-messenger'){ /*произвольный код, сработает по событию клика на кнопку виджета WhatsApp*/ } } }]);

Подписка на событие отправки формы

Если необходимо выполнить какой-либо скрипт или настроить цель по событию отправки формы, то можно воспользоваться примером:

window.ct('modules', 'widgets', 'subscribeToEvent', [{
object: 'request',
action: 'create',
callback: function(event){
if (event.data.widgetType=='promotion'){
/*произвольный код, сработает по событию отправки заявки виджета Промо-баннера*/
}
}
}]);

Подписка на разные события виджета

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

window.ct('modules','widgets','subscribeToEvent',[{
object: 'button',
action: 'click',
callback: function(event){
/*произвольный код, сработает по событию клика*/
}},
{object: 'form',
action: 'close',
callback: function(event){
/*произвольный код, сработает по событию закрытия формы*/
}}
]);

Не нашли решение проблемы?
Заполните форму, и мы вам поможем.