Как мы написали, а потом переписали онбординг сервис

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

ManyChat — это платформа для автоматизации маркетинга в Instagram, WhatsApp, Telegram и Facebook Messenger, которая помогает бизнесам строить осмысленную и эффективную коммуникацию с клиентами. С помощью ManyChat бизнесы масштабируют лидогенерацию, повышают вовлеченность, запускают маркетинговые кампании и обеспечивают непрерывную поддержку пользователей.

Основной функционал ManyChat – это конструктор чат-ботов, который позволяет пользователю создавать различные сценарии взаимодействия с помощью визуального программирования. Вот как это выглядит:

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

1. Упростили интерфейс, чтобы новые пользователи не пугались функционала, который им не нужен на старте.

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

Обучающая кампания — сценарий, который воспроизводится в несколько шагов, на каждом шаге доступна полезная информация и призыв к действию. Такими действиями могут быть клик или ввод текста. Информация доносится через тултипы или модальные окна. Фокус пользователя удерживается с помощью изолированной и подсвеченной области.

Мы сформировали следующие требования к сервису:

• Ведет пользователя по сценарию. Следит, чтобы последовательность шагов не нарушалась;

• Умеет подсвечивать и изолировать определенные области интерфейса:

  • Работает с DOM;

  • Работает с Canvas. Наш основной инструмент использует его.

• Обрабатывает ввод текста, клики по области, двойные клики, ввод в определенной последовательности. Позволяет легко добавлять новые механики;

• Приводит приложение в определенное состояние перед тем, как пользователь совершит действие. Например, создает необходимые сущности, открывает модальные окна или скрывает отвлекающую информацию;

• Его легко поддерживать и расширять.

После того как мы поняли требования, сразу возник вопрос: нет ли готовых решений? Мы не нашли решение, которое бы удовлетворяло всем нашим условиям.

Вот пример ограничений у большинства решений:

• Ограничения по механикам:

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

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

• Ограничение по жизненному циклу шагов:

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

• Ограничение для изолированной области:

  • Нельзя «подружить» с нашим инструментом, который использует Canvas. Нельзя изменить механизм поиска элемента и определения координат, необходимых для изолирующей области.

• Элементы донесения информации:

  • Нельзя добавить собственные компоненты или темизировать существующие.

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

Первое с чего мы начали — нарисовали схему взаимодействия сущностей:

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

Шаг 1. Клик по элементу (Add Trigger)

Шаг 2. Клик по самому триггеру (Instagram Keyword)

Результат: у пользователя есть триггер (ключевое слово), который запускает автоматизацию.

Теперь перейдем к тому, что нужно добавить в код, чтобы запустить эту обучающую кампанию.

1. Создаем Onboarding config:

const OUR_FIRST_ONBOARDING = {
	id: "НАШ_ПЕРВЫЙ_ОНБОРДИНГ",
	steps: [
		{
			id: "ID_ПЕРВОГО_ШАГА",
			type: StepTypes.CLICK,
			views: {
				pointer: {
					type: PointerType.CANVAS,
					// Элемент на который хотим получить клик
					elementId: 'ADD_TRIGGER_ELEMENT_ID',
				},
				progress: {
					current: 1,
					total: 2,
				},
			},
		},
		{
			id: "ID_ВТОРОГО_ШАГА",
			type: StepTypes.CLICK,
			views: {
				pointer: {
					type: PointerType.DOM,
					// Элемент на который хотим получить клик
					elementId: 'INSTAGRAM_KEYWORD_ELEMENT_ID',
				},
				progress: {
					current: 2,
					total: 2,
				},
			},
		}
	]
}

2. Регистрируем его:

onboardingService.create(OUR_FIRST_ONBOARDING)

3. Запускаем Onboarding:

onboardingService.run("НАШ_ПЕРВЫЙ_ОНБОРДИНГ")

4. Отправляем событие:

onboardingService.emitEvent({ 
	type: EventTypes.CLICK,
	eventId: "ID_ПЕРВОГО_ШАГА"
})

5.