Flowtomate

Туры ​

Тур ведёт посетителя по шагам на сайте. Откройте «Туры» и нажмите «Создать тур». На вкладке «Запуск и аудитория» укажите «Адрес начала тура», задайте «Приоритет» и при необходимости добавьте «Условия показа». Условия по окружению в текущем редакторе нет.

Доступ и права ​

Для списка нужен «Просмотр» в строке «Туры». Для черновика — «Создание»; для сохранения, публикации и смены статуса — «Изменение». Владелец аккаунта имеет все права.

Автозапуск и поведение ​

В блоке «Автозапуск» выберите:

  • «Не запускать автоматически»;
  • «При открытии страницы» — задайте «Совпадение страницы» («Одна страница», «Страница и вложенные» или «Сайт и страница»), «Адрес или путь страницы» и «Задержка, мс»;
  • «После события» — выберите «Событие автозапуска». Этот вариант доступен, когда есть активные события; их сбор настраивается в «Интеграции».

Поле «Максимум автоматических запусков» принимает значение от 1 до 10. Код сайта и связанные материалы могут открыть тур и при отключённом автозапуске; условия ручного вызова описаны в справке по запуску.

В «Поведение тура» выберите «Выход из тура»: «Нельзя пропустить», «Только крестик», «Только “Пропустить”» или «Крестик и “Пропустить”». Здесь же включаются «Разрешить возвращаться назад» и «Показывать прогресс».

Шаги ​

На вкладке «Шаги» нажмите «Добавить шаг». Выберите «Тип»: «Подсказка у элемента» или «Модальное окно». Для шага заполните «Заголовок», «Текст» и правило «Страница», затем укажите «Адрес или путь страницы». Для подсказки у элемента выберите «Положение».

Для «Подсказки у элемента» обязателен «CSS-селектор элемента». Выбирайте устойчивый селектор, например атрибут data-flowtomate-target. Он должен находить ровно один элемент; элемент внутри iframe или Shadow DOM другого компонента виджет не найдёт. Модальному шагу селектор не нужен.

Редактор черновика тура с модальным шагом

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

В «Переход после шага» выберите «Кнопка», «Клик по элементу» или «Событие». Клик по элементу доступен только для Tooltip; переход по событию — только при наличии активных событий. Для кнопки заполните «ID действия основной кнопки» и «Текст основной кнопки», а при необходимости «URL основной кнопки». URL должен быть относительным или вести на тот же origin.

Чтобы собрать шаги визуально, используйте Chrome-расширение. Оно сохраняет тур сразу в выбранный проект Flowtomate.

Кнопка «Предпросмотр» в кабинете показывает содержимое и порядок шагов. Переходы и события здесь имитируются, статистика не записывается. Чтобы проверить переход по ссылке, поиск элемента и поведение на сайте, используйте просмотр через расширение на странице с виджетом того же проекта.

Сборка в Chrome-расширении ​

Расширение работает в Chrome и на открытых HTTP(S)-страницах. До начала на сайте должен быть установлен Web SDK; код и проверка подключения описаны в «Интеграции».

  1. Откройте боковую панель расширения и в «Подключить аккаунт» войдите в Flowtomate.
  2. Выберите аккаунт (рабочее пространство), затем проект. Если проекта нет, нажмите «Создать проект».
  3. В проекте выберите существующий тур или нажмите «Создать первый тур». Укажите «Название тура» и «Стартовая страница».
  4. Откройте в активной вкладке нужную страницу сайта. Нажмите «Выбрать элемент», затем выберите элемент на странице: расширение откроет редактор Tooltip. Проверьте, что выбран устойчивый CSS-селектор, предпочтительно data-flowtomate-target.
  5. Заполните заголовок и текст шага, выберите положение и «Способ перехода». Нажмите «Выбрать следующий элемент» для следующего Tooltip или «Добавить модалку» для шага без элемента. В редакторе можно добавить дополнительную ссылку и медиа с HTTP(S)-URL.
  6. Для перехода или автозапуска после события создайте его в проекте: откройте «События проекта», в разделе «Добавить кастомное событие» заполните «Technical name», название и описание, нажмите «Создать событие», затем «Выбрать элемент» и отметьте элемент на странице. Вернитесь к туру и выберите это событие.
  7. Нажмите «Сохранить и завершить тур» после настройки шага, затем «Сохранить тур» или «Сохранить изменения». В списке шагов нажмите «Показать на экране», чтобы проверить каждый шаг на странице.

После сохранения откройте «Туры», найдите тур и нажмите «Открыть». Проверьте шаги и показ, затем нажмите «Включить». Для действующего тура «Сохранить черновик» оставляет прежнюю версию на сайте; «Опубликовать изменения» выпускает правки без отключения тура.

Снимок страницы шага ​

При сохранении шага расширение снимает видимую область страницы без своего редактора. Дождитесь окончания сохранения перед переходом на другую страницу. Если снимок не получился, повторите попытку или нажмите «Сохранить без снимка»; введённый текст останется в форме.

В редакторе Flowtomate раскройте «Макет шага», чтобы увидеть страницу на момент записи и текущий текст подсказки поверх неё. Положение подсказки приблизительное; для проверки поведения используйте предпросмотр на сайте. Смена URL сама не обновляет снимок — запишите шаг заново на нужной странице.

Снимки доступны пользователям с правом просмотра туров в этом проекте. Публичный виджет их не загружает. У старых шагов без снимка редактор предложит записать страницу заново.

Связанные материалы ​