Лендинг для онкопроекта: mobile-first, переход в Telegram-бот, трекинг конверсии

Используемые навыки CSS HTML JavaScript Python Веб-аналитика

Описание

Проект поддержки онкопациентов (женская онкология). Заказчик запускал рекламу в соцсетях и хотел довести пользователя до разговора в Telegram-боте — мягко, без форм и давления на странице.

Контекст: чувствительная медицинская тема, основной трафик — с мобильных устройств (Instagram, таргет). Вторичная цель — познакомить с информационным порталом партнёра (Onkoff).

Ограничения: никаких форм сбора данных на лендинге, быстрая загрузка, деликатный UX, измеримая конверсия «клик по рекламе → лендинг → бот».

Решение

Сверстал и настроил одностраничный лендинг + аналитику:

• mobile-first вёрстка — основной сценарий с телефона;
• 4 контентных блока с единой логикой: сначала доверие, потом переход в бот;
• кнопки «Начать разговор» с одной ссылкой на Telegram-бота во всех блоках;
• быстрая загрузка: без видео-автозапуска и тяжёлой графики;
• трекинг кликов по каждому блоку отдельно — видно, где чаще уходят в бота;
• UTM-метки на ссылках для сравнения трафика «напрямую в бот» vs «через лендинг»;
• отслеживание глубины скролла (25 / 50 / 75 / 100%) — где пользователи отваливаются;
• связка: лендинг → бот → внешний информационный портал (без форм на странице).

Стек: HTML, CSS, адаптивная вёрстка, JavaScript для событий, веб-аналитика.

Результат

• Рабочий лендинг, готовый к рекламным кампаниям;
• измеримая воронка: видно, из какого блока чаще переходят в бота;
• сравнение эффективности «реклама → лендинг → бот» и «реклама → бот напрямую»;
• мобильная версия без «ломающегося» UX на маленьком экране;
• заказчик может принимать решения по контенту на основе данных, а не догадок.