Разработка сайтов
ИТ-бестиарий в Telegram
Дизайн Вёрстка Кастомизация JS
Как мы превратили квиз в Mini App с аналитикой
18.08.2026

Как мы сделали ИТ-бестиарий Selecty в формате Telegram Mini App

Для Selecty мы дорабатывали интерактивный тест «ИТ-бестиарий» и переносили его в формат Telegram Mini App.
Задача была не просто открыть существующий тест внутри Telegram. Нужно было собрать полноценную последовательность из нескольких экранов, связать их между собой, сохранить пользователя по всей цепочке, передавать технические данные и аналитику, а в конце корректно определить одну из семи сущностей по совокупности ответов.
В результате получился сценарий:
стартовый экран → запуск теста → прохождение квиза → расчет результата → страница сущности → шаринг результата
При этом аналитическая цепочка не обрывается ни на одном этапе.

Стартовая страница Mini App

Первой точкой входа стала отдельная стартовая страница.
На ней находился основной экран Mini App, а также техническая часть, которая нужна была для дальнейшей работы сценария.
Здесь размещались:
  • ссылки на политики;
  • разрешения и согласия;
  • технические поля;
  • данные, необходимые для следующего этапа;
  • логика Telegram Mini App;
  • запуск аналитики при открытии приложения.
То есть первая страница выполняла не только визуальную функцию.
Она была точкой инициализации всего сценария.
Именно здесь мы получали данные Telegram-пользователя и начинали связывать дальнейшие действия с его Telegram ID.

Отдельная сложность — checkbox без собственной кнопки

На стартовом экране был checkbox согласия на рекламные рассылки.
При этом он не был обязательным.
Пользователь мог оставить его включенным или выключенным, а нам в любом случае нужно было передать его состояние дальше:
да или нет.
На первый взгляд задача простая, но технически возникла особенность Tilda.
Checkbox находился в отдельной форме, у которой:
  • не было собственной кнопки отправки;
  • не было других значимых данных;
  • форма сама по себе фактически не должна была отправляться привычным способом.
Поэтому стандартная логика формы Tilda здесь не подходила.
Нужно было самостоятельно считать состояние checkbox и передать его как отдельное значение независимо от того, отметил пользователь согласие или нет.
Это важно: отсутствие галочки — тоже данные.
В итоге система всегда получала однозначное значение:
yes / no
а не только факт заполнения поля.

Переход на отдельную страницу с квизом

Сам тест мы не размещали в попапе.
После стартового экрана пользователь переходил на отдельную страницу с квизом.
Это позволило четко разделить сценарий на этапы и значительно упростило контроль состояния приложения.
При открытии страницы теста происходило следующее:
  • фиксировался факт запуска теста;
  • событие отправлялось в аналитику;
  • запуск связывался с Telegram ID пользователя.
Таким образом мы могли отличить обычное открытие Mini App от фактического начала прохождения теста.
Это принципиально разные события.
Пользователь мог открыть приложение, но не перейти к квизу.
Поэтому аналитика строилась не только вокруг посещения страницы, а вокруг реального движения по сценарию.

Самая интересная часть — собственная система подсчета результата

Стандартной логики Tilda для этого теста оказалось недостаточно.
Обычный квиз в Tilda хорошо работает, когда результат можно определить по простому условию:
  • выбран конкретный вариант;
  • набрано определенное значение;
  • выполнено одно из заданных правил.
В «ИТ-бестиарии» логика была сложнее.
Результат должен был определяться по совокупности всех ответов пользователя.
Для этого мы разработали собственную систему баллов.
Каждый вариант ответа влиял на итоговый расчет, а после завершения теста скрипт анализировал накопленные значения и определял, какая сущность больше всего соответствует набору ответов.
Это позволило уйти от слишком примитивной схемы вроде:
выбрал вариант А — получил результат А.
Вместо этого результат формировался на основании всей последовательности прохождения.
То есть пользователь мог выбирать разные варианты на разных шагах, а итог определялся уже после полного подсчета.

Семь отдельных результатов

Всего в тесте было семь сущностей.
Для каждой из них мы сделали отдельную страницу результата.
После завершения квиза система:
  1. подсчитывала итоговые баллы;
  2. определяла сущность;
  3. перенаправляла пользователя на нужную страницу.
Такой подход дал несколько преимуществ.
У каждой сущности появилась своя:
  • страница;
  • визуальная подача;
  • картинка;
  • ссылка;
  • логика шаринга.
А главное — результат было удобно передавать дальше в аналитику.

Передача результата в аналитику

После перехода на страницу конкретной сущности отправлялось еще одно событие.
Оно уже содержало сам результат тестирования.
То есть к этому моменту аналитическая цепочка выглядела примерно так:
Mini App открыт → тест запущен → пользователь получил конкретный результат
При этом данные продолжали связываться с тем же Telegram ID.
Это позволило не смотреть на каждую страницу как на отдельное посещение, а сохранить единый путь пользователя.
Именно сохранение этой связи было одной из важных технических задач проекта.
Поскольку сценарий состоит из нескольких страниц, при обычной реализации очень легко потерять контекст между переходами.
У нас же цепочка сохранялась на протяжении всего прохождения.

Сквозная аналитика по нескольким страницам

По сути Mini App был не одной страницей, а небольшой системой.
В ней были:
  • стартовый экран;
  • отдельная страница теста;
  • семь страниц результатов.
И все эти страницы должны были понимать, что перед ними один и тот же пользователь.
Для этого мы связывали действия с Telegram ID.
В результате можно было последовательно сопоставить:
кто открыл приложение → кто начал тест → какой результат получил.
И при этом отдельно сохранить технические параметры, включая состояние согласия на рекламные сообщения.
Это намного надежнее, чем анализировать каждую страницу отдельно.

Почему Telegram ID оказался ключевым элементом

Обычная веб-аналитика часто строится вокруг cookie, session ID или параметров браузера.
В Telegram Mini App появляется еще одна важная сущность — идентификатор пользователя внутри Telegram.
Мы использовали его как связующий элемент между этапами.
Благодаря этому после перехода между страницами аналитика не превращалась в набор несвязанных событий.
Можно было сохранить единый путь одного пользователя от запуска до результата.
Для многостраничного Mini App это особенно важно.

Шаринг результата в Telegram Stories

После получения сущности пользователь мог поделиться результатом.
Для этого мы отдельно интегрировали сценарий публикации в Telegram Stories.
Это был не просто переход по ссылке.
Скрипт:
  • загружал нужную картинку результата;
  • формировал текст;
  • добавлял ссылку;
  • передавал данные в Telegram;
  • открывал стандартный интерфейс публикации Stories.
Таким образом пользователь получал уже подготовленную историю со своим результатом.
Ему не нужно было отдельно:
  • сохранять изображение;
  • возвращаться в Telegram;
  • создавать Story вручную;
  • копировать ссылку.
Весь сценарий запускался непосредственно из результата теста.

Обычный шаринг ссылки

Дополнительно мы оставили более простой сценарий — стандартную возможность поделиться ссылкой.
Для этого использовали штатную механику Telegram.
Пользователь мог отправить результат:
  • в личный чат;
  • в группу;
  • другому пользователю.
То есть у результата было два сценария распространения:
поделиться в Stories
и
поделиться ссылкой
Они решали разные задачи и дополняли друг друга.

Почему мы разделили Mini App на несколько страниц

Технически весь сценарий можно было попытаться поместить на одну страницу.
Но для этой задачи многостраничная архитектура оказалась удобнее.
Она позволила четко разделить роли:

Страница 1 — инициализация

Telegram ID, политики, согласия, технические данные и стартовая аналитика.

Страница 2 — тест

Сам квиз, запуск тестирования и индивидуальная логика подсчета баллов.

Страницы 3–9 — результаты

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

Что было сложнее всего

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

Tilda

Использовалась как основа интерфейса и квиза.

Telegram Mini App

Давал данные пользователя и среду, внутри которой работало приложение.

Кастомный JavaScript

Отвечал за передачу параметров, подсчет баллов и переходы.

Аналитика

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

Telegram Stories

Требовали отдельной логики подготовки и передачи изображения, текста и ссылки.
Каждая часть по отдельности достаточно понятная.
Основная работа была именно в их интеграции.

Что получилось в итоге

В результате мы превратили обычный тест в полноценный Telegram Mini App с собственной логикой.
В проекте реализовали:
  • стартовый экран приложения;
  • получение и использование Telegram ID;
  • аналитику открытия Mini App;
  • передачу состояния согласия на рекламные рассылки независимо от того, установлен checkbox или нет;
  • фиксацию запуска квиза в аналитике;
  • собственную систему начисления и подсчета баллов;
  • определение результата по совокупности ответов;
  • семь отдельных страниц сущностей;
  • передачу итогового результата в аналитику;
  • сохранение единой аналитической цепочки между всеми страницами;
  • публикацию результата в Telegram Stories;
  • стандартный шаринг ссылки через Telegram.

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

Со стороны пользователя все выглядит максимально просто:
открыл → ответил → получил сущность → поделился.
Но внутри этого сценария работает значительно больше логики.
Нужно сохранить пользователя между страницами, правильно передать технические параметры, отдельно зафиксировать запуск теста, подсчитать результат не стандартными средствами Tilda, отправить итог в аналитику и после этого подготовить данные для Telegram Stories.
Именно поэтому этот проект для нас был не просто настройкой блока с вопросами.
Это была небольшая система, собранная поверх Tilda и Telegram Mini App, где интерфейс, логика теста, аналитика и Telegram API работают как единый сценарий.
В результате «ИТ-бестиарий» остался легким и игровым для пользователя, но технически получил значительно более сложную механику под капотом.
Попробуйте пройти тест: https://t.me/Selecty_bestiary_bot/start
Смотрите также