Метрики эффективности

Для начала работы с библиотекой необходимо установить её через npm или подключить через CDN. Установка через npm производится командой:

npm install shepherd.js

После установки в проекте можно импортировать необходимые модули:

import Shepherd from 'shepherd.js';
import 'shepherd.js/dist/css/shepherd.css';

Подключение через CDN выглядит следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js/dist/css/shepherd.css">
<script src="https://cdn.jsdelivr.net/npm/shepherd.js/dist/js/shepherd.min.js"></script>

После этого библиотека готова к использованию для создания интерактивных пошаговых руководств.

Создание тура

Основной объект Shepherd.js — Tour. Он управляет последовательностью шагов, настройками поведения и визуальным оформлением.

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

Ключевые параметры:

  • scrollTo: автоматически прокручивает страницу к элементу шага.
  • cancelIcon: отображает кнопку закрытия шага.
  • classes: задаёт тему оформления.

Шаги добавляются через метод addStep:

tour.addStep({
  id: 'step-1',
  text: 'Описание первого шага.',
  attachTo: { element: '.button-start', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Параметры шага:

  • id: уникальный идентификатор шага.
  • text: основной текст, который отображается пользователю.
  • attachTo: указывает элемент страницы и позицию тултипа.
  • buttons: массив кнопок с действиями (next, back, cancel).

Метрики эффективности тура

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

1. Вовлечённость пользователей

Измеряется количеством завершённых шагов на пользователя и временем, проведённым на каждом шаге. Пример реализации:

tour.on('show', (event) => {
  const stepId = event.step.id;
  console.log(`Шаг показан: ${stepId} в ${Date.now()}`);
});

tour.on('complete', () => {
  console.log('Тур завершён пользователем');
});

Данные можно отправлять на сервер для анализа и построения графиков вовлечённости.

2. Успешное выполнение задач

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

tour.on('complete', () => {
  if (task.isCompleted()) {
    console.log('Задача выполнена успешно после тура');
  } else {
    console.log('Задача не завершена');
  }
});

3. Среднее время на шаг

Время, проведённое пользователем на каждом шаге, помогает выявить сложные или непонятные моменты интерфейса:

let stepStartTime;

tour.on('show', () => {
  stepStartTime = Date.now();
});

tour.on('hide', (event) => {
  const duration = Date.now() - stepStartTime;
  console.log(`Пользователь провёл на шаге ${event.step.id}: ${duration} мс`);
});

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

4. Пропуски и возвраты

Слежение за тем, сколько шагов пользователи пропускают или к каким шагам возвращаются, выявляет точки непонимания. Используется событие cancel и логика кнопок back:

tour.on('cancel', () => {
  console.log('Пользователь прервал тур');
});

tour.on('show', (event) => {
  if (event.step.previousStep) {
    console.log(`Пользователь вернулся к шагу ${event.step.id}`);
  }
});

5. Коэффициент завершения

Коэффициент завершения — отношение количества пользователей, завершивших тур, к общему числу участников. Вычисляется на основе событий complete и cancel:

let totalUsers = 100;
let completedUsers = 45;

const completionRate = (completedUsers / totalUsers) * 100;
console.log(`Коэффициент завершения тура: ${completionRate}%`);

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

Для получения полноценной статистики часто используют интеграцию с внешними системами аналитики:

  • Google Analytics / GA4: отправка событий через gtag или dataLayer.
  • Mixpanel / Amplitude: фиксация шагов, времени и завершения.
  • Собственные системы: API для сохранения логов шагов и действий пользователей.

Пример отправки события в Google Analytics:

tour.on('complete', () => {
  gtag('event', 'tour_complete', { tour_id: 'onboarding_tour' });
});

tour.on('show', (event) => {
  gtag('event', 'tour_step_shown', { step_id: event.step.id });
});

Оптимизация туров

Ключевые рекомендации:

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

Эти практики позволяют создавать интерактивные руководства, которые реально повышают продуктивность и удовлетворённость пользователей.

Оглавление