Онбординг без разработчика: что можно делать самим и что всё-таки останется за программистом

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

Примеры чужих первых экранов, пройденных вручную и посчитанных по шагам, — в разборах живых продуктов.

Почему онбординг застревает в бэклоге

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

Если каждая подсказка — это вёрстка и релиз, между «заметили» и «исправили» проходит спринт, а то и два. За это время интерфейс успевает поменяться, и подсказка выходит уже устаревшей. Вынести подсказки из кода — значит сократить этот путь и отдать его тому, кто отвечает за активацию.

Что остаётся за разработчиком

1. Вставить тег

Одна строка перед </body>. Если доступа к коду нет, её можно поставить через Google Tag Manager, Яндекс Тег Менеджер, Tilda или Битрикс — для каждого способа есть инструкция по установке.

<script src="https://tryclew.ru/widget/ВАШ_КЛЮЧ.js" async></script>

2. Повесить data-tour на важные элементы

Это необязательно, но избавляет от большинства поломок. Когда вы кликаете по элементу, редактор сначала ищет атрибут data-tour и, если он есть, берёт селектор вида [data-tour="invite"]. Такой селектор переживает любую пересборку фронтенда.

Если атрибута нет, редактор строит селектор сам. Берёт id, если он похож на написанный человеком, а не на сгенерированный. Иначе поднимается по родителям и использует тег и не больше двух классов, пропуская классы с хешами, суффиксами CSS-модулей и длиннее 24 символов. Это снижает шанс поломки, но не исключает её: поменялась вёрстка — селектор может перестать находить элемент.

3. Передать свойства пользователя — если нужно

Чтобы показать тур только новым пользователям или только администраторам, виджету нужны факты о пользователе. Их передают одним вызовом. Значения остаются в браузере, на сервер уходят только названия свойств. Без identify() остаются правила по адресу страницы и cookie.

TutorKit.identify({ plan: 'pro', role: 'admin', signedUpDaysAgo: 0 });

Что делаете вы

• Открыть редактор. В кабинете — кнопка «Создать тур на своём сайте». Страница откроется с панелью редактора по одноразовой ссылке, которая действует 30 минут. Если тега на сайте ещё нет, можно начать на тестовой странице.
• Выбрать элемент. «Выбрать элемент» — и клик по кнопке на странице. Селектор подставится сам по правилам выше; его можно поправить руками.
• Написать текст. Заголовок, пояснение, ссылка или кнопка действия. Предпросмотр — сразу на странице.
• Решить, где показывать. Точный путь, префикс, «содержит» или регулярное выражение. Точный путь и префикс сравнивают только путь, без домена и параметров; «содержит» и regex смотрят на весь адрес.
• Решить, кому. Правила по cookie или свойствам пользователя: есть или нет, равно или не равно, содержит, больше или меньше. Их можно объединять через «все условия» или «любое».
• Решить, когда. Сразу; через N секунд (по умолчанию 5); при прокрутке до N% страницы; по клику на элемент; при наведении; на N-й визит.
• Опубликовать с частотой «один раз» или «всегда».

Детали, о которые спотыкаются

• «Один раз» значит: после того как человек прошёл или закрыл тур, он не вернётся. Отметка хранится в cookie браузера, поэтому в другом браузере или в приватном окне тур покажется снова. Проверять себя удобнее как раз в приватном окне.
• «N-й визит» считается по загрузкам страницы с виджетом в этом браузере, а не по сессиям. Открыли три страницы подряд — это уже три визита.
• Подсказка по наведению срабатывает, если курсор задержался на элементе 400 мс. С клавиатуры она открывается по фокусу, на телефоне — по первому касанию.
• Одновременно на экране — один тур или модалка. Если под страницу подходят два, покажется один. Чеклист при этом висит рядом и места не занимает.
• Когда вы впервые открываете редактор на своём сайте, Clew запоминает домен и отдаёт туры только ему и поддоменам. Визиты со стейджа попадают в статистику, поэтому для стейджа удобнее завести отдельный сайт со своим ключом.

Как понять, что это работает

В статистике тура три вещи, на которые стоит смотреть в первую очередь.

• Доходимость — сколько человек из увидевших дошли до последнего шага.
• Отвал по шагам. Он считается от предыдущего шага, а не от первого, — так видно, какой именно шаг теряет людей.
• Сломанные шаги. Если элемент шага не появился на странице примерно за 5 секунд, виджет пропускает шаг и сообщает об этом. Вкладка «Здоровье» показывает селектор, число сбоев и время последнего. Если не нашёлся элемент последнего шага, тур не отмечается просмотренным — после исправления люди увидят его снова.

Когда без разработчика не обойтись

• Элемент появляется только в состоянии, которое трудно воспроизвести в редакторе, — например, после оплаты. Проще попросить повесить data-tour и вписать селектор вручную.
• Пункт чеклиста должен отмечаться по событию в продукте: «оплатил», «пригласил коллегу». Для этого нужен вызов Clew.complete('ключ') в том месте кода, где событие происходит.
• Сбор статистики должен ждать согласия на cookie. Тогда на теге нужен data-no-track, а после согласия — вызов TutorKit.setTracking(true). Так сделано у нас на tryclew.ru.