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

Читать 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){ 
       /*произвольный код, сработает по событию закрытия формы*/ 
   }}
]);

Не нашли решение проблемы?
Заполните форму, и мы вам поможем.
х
Заполните форму
и мы поможем вам
Похожие статьи
Недавно просмoтренные