Логирование событий

В библиотеке Intro.js логирование событий является важным инструментом для отслеживания действий пользователя во время интерактивного тура. Встроенные события позволяют регистрировать каждый этап, реагировать на начало и завершение шагов, а также получать детальную информацию о взаимодействиях пользователя с интерфейсом.

События жизненного цикла тура

Intro.js предоставляет несколько ключевых событий, которые можно использовать для логирования:

  1. onbeforechange(targetElement) Вызывается перед переходом к следующему шагу. Параметр: targetElement – DOM-элемент текущего шага. Применение: можно проверять состояние элементов, записывать их состояние перед показом следующего шага.

  2. onchange(targetElement) Срабатывает после перехода к новому шагу. Параметр: targetElement – DOM-элемент нового шага. Применение: логировать факт перехода, фиксировать время появления шага, собирать метрики вовлеченности.

  3. oncomplete() Вызывается после завершения тура. Применение: фиксация полного прохождения пользователем, отправка данных на сервер, обновление пользовательских метрик.

  4. onexit() Срабатывает при принудительном завершении тура (например, при закрытии пользователем). Применение: логировать незавершенные действия, учитывать шаги, на которых пользователь покинул интерактивное руководство.

  5. onbeforechange/ondestroy/onafterchange Дополнительные события позволяют реализовать расширенные сценарии логирования, например, запись данных о том, какой элемент был на экране, и что было выполнено до перехода.

Подключение логирования

Для эффективного логирования событий в Intro.js используется синтаксис с функциями обратного вызова:

introJs()
  .onbeforechange(function(targetElement) {
      console.log('Перед шагом:', targetElement.id);
  })
  .onchange(function(targetElement) {
      console.log('Показан шаг:', targetElement.id, 'время:', new Date().toISOString());
  })
  .onexit(function() {
      console.log('Тур завершен пользователем досрочно');
  })
  .oncomplete(function() {
      console.log('Тур завершен полностью');
  })
  .start();

В этом примере ключевым моментом является использование targetElement.id или других атрибутов элемента для идентификации шагов.

Сбор детальных данных о действиях пользователя

Для аналитики важно фиксировать не только факт показа шага, но и время взаимодействия с каждым элементом. Для этого можно использовать комбинацию событий onchange и таймера:

let stepStartTime;

introJs()
  .onchange(function(targetElement) {
      if (stepStartTime) {
          const duration = Date.now() - stepStartTime;
          console.log(`Время на предыдущем шаге: ${duration} мс`);
      }
      stepStartTime = Date.now();
      console.log('Новый шаг:', targetElement.id);
  });

Такой подход позволяет строить тепловые карты взаимодействий, выявлять сложные шаги и оптимизировать последовательность элементов тура.

Интеграция с внешними системами логирования

Intro.js легко интегрируется с системами аналитики, такими как Google Analytics, Mixpanel или собственные серверные логеры. Например, отправка данных о шаге на сервер:

introJs()
  .onchange(function(targetElement) {
      fetch('/log-tour-step', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
              stepId: targetElement.id,
              timestamp: new Date().toISOString()
          })
      });
  });

Это позволяет вести централизованный учет всех действий пользователей, анализировать поведение и выявлять проблемные места в интерфейсе.

Практические рекомендации

  • Использовать onbeforechange для проверки состояния элементов перед показом следующего шага.
  • Логировать все события с временными метками для анализа времени взаимодействия.
  • При интеграции с сервером отправлять минимальный набор данных: идентификатор шага, состояние пользователя, timestamp.
  • Для крупных проектов полезно хранить события в отдельной структуре данных и периодически отправлять пакетами, чтобы уменьшить нагрузку на сеть.

Отслеживание нестандартных действий

Intro.js позволяет отслеживать не только переходы шагов, но и попытки взаимодействия с элементами, которые находятся вне тура. Это делается через собственные обработчики событий DOM и интеграцию с onbeforechange/onchange:

document.querySelector('#button').addEventListener('click', () => {
    console.log('Пользователь кликнул кнопку вне шага тура');
});

Комбинируя внутренние события Intro.js с внешними событиями DOM, можно получать полную картину пользовательского поведения.

Резюме по структуре логирования

  1. Идентификация шагов – уникальные ID элементов.
  2. События Intro.js – onbeforechange, onchange, onexit, oncomplete.
  3. Временные метки – фиксировать время начала и окончания шага.
  4. Серверная интеграция – отправка данных для анализа.
  5. Комбинация с внешними событиями – отслеживание всех значимых пользовательских действий.

Эти методы позволяют создать полнофункциональную систему логирования, которая делает интерактивные туры информативными и управляемыми.

Оглавление