Частота показа туров

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

Основные механизмы контроля показа

1. Состояние завершения тура

Intro.js позволяет отслеживать, завершил ли пользователь тур. Для этого используется событие oncomplete:

intro.oncomplete(function() {
    localStorage.setItem('tourCompleted', 'true');
});

Здесь localStorage используется для хранения информации о том, что тур пройден. При последующем посещении страницы можно проверять это состояние:

if (!localStorage.getItem('tourCompleted')) {
    intro.start();
}

Этот подход гарантирует, что тур показывается только один раз для каждого пользователя, пока данные в localStorage не будут удалены или не истечёт срок хранения.

2. Пропуск туров с помощью флагов

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

const userRole = getUserRole(); // функция получения роли пользователя

if (!localStorage.getItem('tourCompleted') && userRole === 'admin') {
    intro.start();
}

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

3. Таймауты и задержки перед показом

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

setTimeout(() => {
    if (!localStorage.getItem('tourCompleted')) {
        intro.start();
    }
}, 2000); // запуск через 2 секунды

Также можно запускать тур после события, например, нажатия кнопки:

document.getElementById('startTourBtn').addEventListener('click', function() {
    intro.start();
});

Повторное показ туров

1. Сброс состояния

Если требуется позволить пользователю пройти тур несколько раз, нужно очищать или обновлять флаги:

localStorage.removeItem('tourCompleted');

После этого тур снова будет доступен для запуска.

2. Версия тура

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

const currentTourVersion = 'v2';
if (localStorage.getItem('tourVersion') !== currentTourVersion) {
    intro.start();
    localStorage.setItem('tourVersion', currentTourVersion);
}

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

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

Для более долговременного контроля частоты показа туров можно использовать куки или серверное хранение состояния. Пример с куки:

function setCookie(name, value, days) {
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/';
}

function getCookie(name) {
    return document.cookie.split('; ').reduce((r, v) => {
        const parts = v.split('=');
        return parts[0] === name ? decodeURIComponent(parts[1]) : r
    }, '');
}

if (!getCookie('tourCompleted')) {
    intro.start();
    setCookie('tourCompleted', 'true', 30); // тур не будет показываться 30 дней
}

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

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

  • Условные туры по контексту — запускать тур только на конкретных страницах или в определённых разделах.
  • Динамическое управление шагами — исключать шаги, которые уже известны пользователю, или добавлять новые шаги для новых функций.
  • Отложенный повторный показ — показывать тур через определённое время после первого прохождения, например через неделю, чтобы напомнить о функциях.

Выводы по управлению частотой

  • Использование localStorage и куки обеспечивает простое клиентское управление показом туров.
  • Версионность туров позволяет обновлять инструкции без навязчивого повторного показа старых шагов.
  • Серверное хранение состояния обеспечивает синхронизацию между устройствами и более гибкое управление.
  • Комбинирование условий, задержек и событий позволяет создавать туры, которые учитывают поведение пользователя и контекст страницы, избегая раздражения и повышая эффективность обучения интерфейсу.
Оглавление