Отслеживание взаимодействий

Для начала необходимо подключить библиотеку Intro.js в проект. Она включает CSS для стилизации подсказок и JS для работы функционала. Обычно используется следующий способ подключения:

После подключения можно создать экземпляр интерактивного руководства:

const intro = introJs();
intro.setOptions({
    steps: [
        { 
            element: '#step1',
            intro: 'Описание первого шага'
        },
        { 
            element: '#step2',
            intro: 'Описание второго шага'
        }
    ],
    showStepNumbers: true,
    exitOnOverlayClick: false,
    showBullets: true
});

Метод start() запускает интерактивный тур:

intro.start();

Использование событий для отслеживания действий

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

Основные события:

  • onbeforechange(targetElement) — срабатывает перед переходом на новый шаг. Можно использовать для валидации или динамического изменения контента шага.
  • onchange(targetElement) — срабатывает при переходе на новый шаг. Здесь удобно логировать активный шаг или запускать анимации.
  • oncomplete() — вызывается при успешном завершении тура. Часто используется для отметки в базе данных, что пользователь прошёл инструкцию.
  • onexit() — срабатывает при досрочном выходе пользователя. Позволяет фиксировать неполное прохождение.

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

intro.onbeforechange(function(targetElement) {
    console.log('Переход на элемент:', targetElement.id);
});

intro.onchange(function(targetElement) {
    console.log('Текущий шаг:', intro._currentStep);
});

intro.oncomplete(function() {
    console.log('Тур завершён полностью');
});

intro.onexit(function() {
    console.log('Тур был прерван');
});

Отслеживание кликов и пользовательских взаимодействий

Для более точного отслеживания взаимодействий можно использовать onafterchange, которое срабатывает после того, как пользователь увидел новый шаг:

intro.onafterchange(function(targetElement) {
    targetElement.addEventListener('click', function handleClick() {
        console.log(`Элемент ${targetElement.id} был нажат`);
        targetElement.removeEventListener('click', handleClick);
    });
});

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

Динамическое управление шагами

Иногда необходимо добавлять или изменять шаги во время тура. Для этого используется метод setOptions в процессе работы:

intro.onbeforechange(function(targetElement) {
    if(targetElement.id === 'step1') {
        intro.setOptions({
            steps: [
                { element: '#step1', intro: 'Обновлённый первый шаг' },
                { element: '#step2', intro: 'Второй шаг' },
                { element: '#step3', intro: 'Новый шаг, добавленный динамически' }
            ]
        });
    }
});

Это позволяет отслеживать пользовательский путь и адаптировать тур под действия пользователя в реальном времени.

Интеграция с аналитикой

Для полноценного мониторинга можно отправлять события в аналитические сервисы. Например, используя Google Analytics:

intro.onchange(function(targetElement) {
    gtag('event', 'intro_step_view', {
        'step_id': targetElement.id,
        'step_number': intro._currentStep
    });
});

intro.oncomplete(function() {
    gtag('event', 'intro_completed');
});

intro.onexit(function() {
    gtag('event', 'intro_exited');
});

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

Управление прогрессом пользователя

Для отслеживания прогресса часто применяют хранение текущего шага в localStorage:

intro.onchange(function() {
    localStorage.setItem('introCurrentStep', intro._currentStep);
});

window.addEventListener('load', function() {
    const savedStep = localStorage.getItem('introCurrentStep');
    if(savedStep) {
        intro.start().goToStep(Number(savedStep));
    } else {
        intro.start();
    }
});

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

Комбинация событий и пользовательской логики

В сложных сценариях можно комбинировать все события:

intro.onbeforechange(function(element) {
    console.log('Перед переходом:', element.id);
});

intro.onafterchange(function(element) {
    console.log('После перехода:', element.id);
    // например, включить подсказку по клику
});

intro.onexit(function() {
    console.log('Тур был прерван');
});

intro.oncomplete(function() {
    console.log('Тур полностью пройден');
});

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

Оглавление