Интеграция с Google Analytics

Intro.js предоставляет гибкий механизм создания пошаговых интерактивных руководств для веб-интерфейсов. Одним из ключевых аспектов продвинутого использования библиотеки является возможность отслеживания действий пользователей в этих интерактивных турах с помощью Google Analytics (GA). Это позволяет оценивать эффективность обучающих сценариев, выявлять проблемные шаги и улучшать пользовательский опыт.

Подключение Google Analytics

Для корректного сбора данных необходимо убедиться, что на странице подключён GA-трекер. В современных реализациях чаще всего используется gtag.js или analytics.js. Пример подключения через gtag.js:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXX-Y');
</script>

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

Отслеживание запуска тура

Intro.js предоставляет события жизненного цикла тура, такие как onbeforechange, onchange, oncomplete, onexit. Для отслеживания старта тура используется событие onbeforechange или onchange на первом шаге:

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Описание шага 1' },
    { element: '#step2', intro: 'Описание шага 2' }
  ]
});

intro.onbeforechange(function(targetElement) {
  if (this._currentStep === 0) {
    gtag('event', 'tour_start', {
      'event_category': 'IntroJS',
      'event_label': targetElement.id
    });
  }
});

intro.start();

В этом примере создается событие tour_start, которое фиксируется в GA при начале тура. event_label используется для передачи идентификатора элемента, с которого начинается интерактивный шаг.

Отслеживание переходов между шагами

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

intro.onchange(function(targetElement) {
  gtag('event', 'tour_step', {
    'event_category': 'IntroJS',
    'event_label': `Step ${this._currentStep + 1}: ${targetElement.id}`
  });
});

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

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

Когда пользователь проходит весь тур до конца, важно зафиксировать событие oncomplete:

intro.oncomplete(function() {
  gtag('event', 'tour_complete', {
    'event_category': 'IntroJS'
  });
});

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

Отслеживание прерывания тура

В реальных сценариях пользователи могут прервать тур. Для фиксации выхода используется событие onexit:

intro.onexit(function() {
  gtag('event', 'tour_exit', {
    'event_category': 'IntroJS',
    'event_label': `Exited at step ${this._currentStep + 1}`
  });
});

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

Передача пользовательских данных

Intro.js позволяет передавать дополнительную информацию о пользователе или контексте:

intro.onchange(function(targetElement) {
  gtag('event', 'tour_step', {
    'event_category': 'IntroJS',
    'event_label': `Step ${this._currentStep + 1}`,
    'user_id': window.currentUserId,
    'page_path': window.location.pathname
  });
});

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

Объединение с событиями интерфейса

Интеграция Intro.js с GA может комбинироваться с другими событиями страницы. Например, отслеживание кликов на элементы внутри шага:

document.querySelectorAll('#step2 button').forEach(button => {
  button.addEventListener('click', () => {
    gtag('event', 'button_click_in_tour', {
      'event_category': 'IntroJS',
      'event_label': 'Step 2 button'
    });
  });
});

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