Аналитика и отслеживание

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

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

Каждый шаг тура в Shepherd.js поддерживает набор событий: show, hide, complete, cancel. Эти события можно использовать для отправки данных в систему аналитики (например, Google Analytics, Mixpanel или внутреннюю систему логирования).

Пример настройки события show для шага:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep({
  id: 'intro-step',
  text: 'Это первый шаг вашего тура.',
  attachTo: { element: '#start-button', on: 'bottom' },
  buttons: [
    { text: 'Далее', action: tour.next }
  ],
  when: {
    show: () => {
      analytics.track('tour_step_shown', { stepId: 'intro-step' });
    }
  }
});

Здесь функция analytics.track вызывается при показе шага, передавая идентификатор шага. Это ключевой подход для детального анализа прохождения тура.

Отслеживание завершения и отмены тура

Shepherd.js предоставляет глобальные события на уровне всего тура: complete и cancel. Использование этих событий позволяет фиксировать, завершил ли пользователь весь тур или прервал его на каком-либо этапе.

tour.on('complete', () => {
  analytics.track('tour_completed', { userId: currentUser.id });
});

tour.on('cancel', () => {
  analytics.track('tour_cancelled', { userId: currentUser.id });
});

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

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

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

tour.addStep({
  id: 'feature-step',
  text: 'Здесь мы показываем важную функциональность.',
  attachTo: { element: '#feature', on: 'right' },
  buttons: [
    {
      text: 'Далее',
      action: () => {
        analytics.track('next_clicked', { stepId: 'feature-step' });
        tour.next();
      }
    },
    {
      text: 'Назад',
      action: () => {
        analytics.track('back_clicked', { stepId: 'feature-step' });
        tour.back();
      }
    }
  ],
  when: {
    show: () => {
      stepStartTime = new Date();
    },
    hide: () => {
      const duration = new Date() - stepStartTime;
      analytics.track('step_time', { stepId: 'feature-step', duration });
    }
  }
});

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

Интеграция с системами A/B-тестирования

Shepherd.js удобно использовать совместно с системами A/B-тестирования. Например, можно запускать разные варианты тура для отдельных сегментов пользователей и отслеживать поведение через события show, complete, cancel.

if (userGroup === 'A') {
  tour.addStep({ id: 'step-a1', text: 'Вариант A, шаг 1' });
} else {
  tour.addStep({ id: 'step-b1', text: 'Вариант B, шаг 1' });
}

tour.start();

Каждое событие фиксируется в аналитике с указанием варианта, что позволяет сравнивать эффективность разных туров.

Логирование ошибок и нестандартных сценариев

Для комплексного анализа важно отслеживать ошибки отображения тура и непредвиденные сценарии, такие как отсутствие целевого элемента на странице. Shepherd.js предоставляет обработчики ошибок через промисы при вызове tour.start():

tour.start()
  .catch(error => {
    analytics.track('tour_error', { message: error.message });
  });

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

Рекомендации по структуре аналитических данных

  1. Идентификатор шага – уникальный ключ для каждого шага (stepId), необходимый для анализа прохождения тура.
  2. Время взаимодействия – длительность нахождения пользователя на шаге (duration).
  3. Действия пользователя – клики по кнопкам next, back, skip.
  4. События завершения – complete или cancel, фиксирующие итоги прохождения.
  5. Дополнительные метаданные – информация о пользователе, сегменте, варианте A/B-теста.

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

Практические советы

  • Каждое событие фиксировать с минимальной нагрузкой на интерфейс, чтобы не тормозить работу пользователя.
  • Использовать уникальные идентификаторы шагов и туров, чтобы отчеты были однозначны.
  • Регулярно анализировать собранные данные и корректировать шаги, исходя из поведения пользователей.
  • Интегрировать метрики с внешними аналитическими системами для объединенного анализа пользовательского опыта и конверсий.

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

Оглавление