Лендинг мюзикла «Остров Сокровищ» с продажей билетов

Задача

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

Что есть на лендинге

1. Первый экран с видео и ближайшим показом.
2. Что вас ждёт и отзывы зрителей скриншотами с площадок-афиш.
3. Расписание с покупкой билета на конкретный сеанс.
4. Как купить в три шага, предложение для групп и подарочный блок.
5. Трейлер, «маршрут приключения», создатели.
6. Десять частых вопросов, контакты, схема проезда.

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

Билеты и аналитика

Билеты продаются через сервис intickets. Кнопка каждого сеанса открывает окно покупки сразу на нужную дату, а не общий список. Вместе с переходом в кассу передаются идентификатор посетителя из Яндекс Метрики и рекламные метки, поэтому покупка связывается с визитом и с рекламным объявлением.

Все ключевые действия размечены целями Метрики: клики по сеансам и кнопкам покупки в каждом месте страницы, просмотр расписания, запуск трейлера, переходы в мессенджеры, заявки групп. Организаторы видят, какие блоки работают, а какие нет.

A/B-тест первого экрана

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

Видео, которое не мешает

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

Детали

• Ближайший показ вычисляется автоматически, прошедшие сеансы гаснут.
• Форма связи открывает мессенджер или почту с готовым текстом, заявки групп уходят на отдельный номер.
• Пасхалка: сундук в подвале сайта. Монеты вылетают при каждом клике, а самым настойчивым достаётся звание юнги и пирата.

Как устроено

HTML, CSS и JavaScript без фреймворков, анимации на GSAP, шрифты и скрипты лежат локально. На странице есть микроразметка спектакля с датами показов. После оптимизации картинок и загрузки скриптов оценка скорости Lighthouse на компьютере выросла с 95 до 100. Сайт работает на домене заказчика.

Скриншоты

Частые вопросы