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

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

Подключение и настройка событий

Для начала работы с логированием необходимо создать экземпляр Driver и подписаться на его события через метод on. Driver.js поддерживает следующие основные события:

  • start – срабатывает при запуске тура.
  • stop – вызывается при завершении тура.
  • next – фиксируется при переходе к следующему шагу.
  • previous – фиксируется при возврате к предыдущему шагу.
  • elementClick – срабатывает при клике на элемент, на котором установлен шаг.
  • highlighted – событие подсветки элемента на шаге.
  • reset – фиксируется при сбросе текущего тура.

Пример подписки на события:

const driver = new Driver();

driver.on('start', () => {
    console.log('Тур начат');
});

driver.on('next', (step) => {
    console.log(`Переход к следующему шагу: ${step.id}`);
});

driver.on('stop', () => {
    console.log('Тур завершён');
});

Логирование шагов тура

Каждый шаг тура в Driver.js имеет уникальный идентификатор и набор параметров (id, popperOptions, description, nextBtnText, prevBtnText). Для подробного анализа можно логировать информацию о каждом шаге при его активации.

driver.on('highlighted', (element, step) => {
    console.log('Элемент подсвечен:', element);
    console.log('Текущий шаг:', step.id);
    console.log('Описание шага:', step.description);
});

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

Фильтрация и форматирование логов

Для удобства анализа рекомендуется использовать фильтры и структурированные форматы, например JSON. Это позволяет интегрировать логи с внешними аналитическими системами или инструментами мониторинга.

driver.on('elementClick', (element, step) => {
    const logEntry = {
        event: 'elementClick',
        stepId: step.id,
        elementTag: element.tagName,
        timestamp: new Date().toISOString()
    };
    console.log(JSON.stringify(logEntry));
});

Такой формат облегчает последующий анализ и построение статистики по действиям пользователей.

Логирование ошибок и исключений

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

driver.on('error', (error, step) => {
    console.error('Ошибка в шаге', step.id, 'Сообщение:', error.message);
});

Сохранение логов для дальнейшего анализа

Логи можно сохранять не только в консоль, но и на сервер или локальное хранилище для последующего анализа:

driver.on('next', (step) => {
    const log = {
        action: 'next',
        stepId: step.id,
        time: Date.now()
    };
    localStorage.setItem(`driverLog_${step.id}`, JSON.stringify(log));
});

Использование локального хранилища или отправка данных на сервер позволяет собирать статистику использования туров в реальном времени и выявлять проблемные зоны интерфейса.

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

Логи Driver.js легко интегрируются с любыми системами аналитики, например Google Analytics или собственными сервисами мониторинга:

driver.on('next', (step) => {
    fetch('/log-driver-event', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ event: 'next', stepId: step.id, timestamp: Date.now() })
    });
});

Такой подход позволяет создавать детальную статистику и строить отчёты о прохождении пользовательских туров.

Настройка глобального логирования

Можно создать обёртку для всех событий, чтобы централизованно вести журнал действий пользователя:

const events = ['start', 'stop', 'next', 'previous', 'highlighted', 'elementClick', 'reset', 'error'];

events.forEach(event => {
    driver.on(event, (data, step) => {
        console.log(`[${new Date().toISOString()}] Событие: ${event}`, step ? step.id : '', data);
    });
});

Такой подход упрощает управление логами, снижает дублирование кода и обеспечивает единый стандарт ведения журнала.

Эти методы позволяют строить детальное логирование работы туров Driver.js, фиксировать ошибки и поведение пользователей, а также интегрировать данные с внешними системами аналитики для анализа интерфейса и улучшения UX.

Оглавление