История успеха компании Брайт Парк - Разметка

Вводные проекта

Компания Брайт Парк – официальный дилер Лада, представлен в 6 регионах, для каждого из которых создан отдельный лендинг. Ежемесячный трафик сайта составляет 85 000 уникальных посетителей. Компания занимается продажей автомобилей и автозапчастей, а также предоставляет техническое обслуживание и сервис.

Структура сайта включает Главную страницу, обобщенную страницу для кузова и модельные страницы. Средний цикл покупки – 30 дней.

Цель проекта: подготовить около 30 data-driven гипотез для увеличения конверсии трафика в заявки.

Выбор продукта и клиентов: для получения быстрого результата были включены клиенты из наиболее успешных регионов Пермь и Ростов-на-Дону, а также самые востребованные модели: Lada Vesta и Lada Granta.

Область UX/UI-исследования: фокус был сделан на анализе конверсионного поведения мотивированной аудитории, то есть посетителей сайта, оставивших заявку и настроенных на покупку. Предполагалось определить наиболее популярные элементы сайта среди этой аудитории, последовательность их шагов и влияние каждого элемента на конверсию. Далее — сравнить результаты с текущей воронкой сайта и оптимизировать путь клиента.

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

Резюме проекта

Проект разметки Брайт Парка оказался нестандартным кейсом и занял 7 дней. Сайт включает 6 одинаковых лендингов для разных городов, что создает сотни правил идентификации для каждого элемента. Кроме того, многие элементы изначально были неправильно названы на уровне бизнес-логики и на уровне элементов сайта — распространенная ситуация, когда аналитика не закладывается на этапе создания сайта и не проверяют разработку.

Такие трудности распространены, но UX Rocket позволил нам решить их с минимальными временными затратами и без привлечения заказчика и его разработчиков. Мы задействовали весь функционал платформы: конструктор, AI-разметку, визуальную разметку атрибутов и многое другое, что есть в арсенале UX Rocket. Поддерживать актуальность разметки, предотвращать дублирование событий и обеспечивать высокое качество аналитики мы также продолжим благодаря специальным функциям UX Rocket.

В рамках проекта наша команда UX/UI-исследователей подготовила основные артефакты разметки (карту разметки и техническое задание) и передала их заказчику. Впереди самое интересное — глубокий анализ поведения пользователей, инсайты и гипотезы.

Как мы разметили события сайта Брайт Парк на 200 лендингах?

Карта разметки. Исследователи команды UX Rocket в рамках проекта всегда передают заказчику артефакты, среди которых обязательно содержится карта разметки (пример ниже). Она помогает бизнес-заказчику работать с разметкой, даже если он не создавал ее сам, но планирует использовать и улучшать.

Целых 44 типовых события потребовалось разметить на сайте Брайт Парка, чтобы найти инсайты. Вся работа заняла около недели. Мы рекомендуем не увеличивать количество событий, чтобы избежать эффекта «засорения эфира», когда технический шум мешает UX/UI-исследователям выявлять закономерности и корреляции, а также требует значительных ресурсов на поддержание такой разметки в актуальном состоянии.

Мы выделили около 50 значимых атрибутов к событиям, которые показались нам значимыми. Например, в атрибуты событий мы включили:

• Все названия баннеров, с которых оставлялись заявки
• Название лендинга по городам, откуда приходили все события посетителя
• Кузов, модель и комплектацию автомобиля, выбранные при оформлении заявки (не в самой заявке, а на странице с которой оставлялась заявка)
• Элементы события КИЦ (выбор комплектации и цены): просмотрел ли пользователь полную комплектацию, пролистывал ли скрытые варианты в карусели, оставил ли заявку из комплектации с пониженной ценой и меткой «лучшая цена» и т. д.
• Источник заявки: главная страница, продуктовая страница, главное меню или каталог

Для разметки атрибутов мы использовали NO-CODE визуальный редактор разметки, который позволяет размечать атрибуты событий. Все атрибуты сохраняются в ТЗ на разметку — одном из ключевых артефактов проекта.

Сайт состоит из 6 лендингов для разных регионов, на каждом из которых представлено по 6 моделей автомобилей. Некоторые модели имеют разные кузова — всего 18 вариантов, причем для каждого кузова создавался отдельный лендинг. Внутри каждого кузова существуют разные комплектации, и для каждой комплектации создавалась отдельная карточка товара – модальное окно.

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

1. 6 лендингов x 18 кузовов = 108 уникальных лендингов,
2. Около 250 карточек комплектаций
3. На каждой такой карточке любое действие пользователей фиксируются как уникальное

Трудности разметки: разметка сайта оказалась сложной из-за дублирования идентичных страниц в разных регионах, что требовало создания сотен уникальных правил идентификации событий. Каждое правило включало URL страницы, CSS-селектор элемента, тип действия (например, клик по кнопке, просмотр страницы) и его название. Для некоторых типовых событий разметки число таких правил превышало 500, а это означало, что исследователь должен был собрать и проверить каждое из них перед началом построения аналитики. Проверить – значит валидировать, т.е. прокликать и убедиться, что Rocket правильно его идентифицирует.

Где нам помогла авторазметка UX Rocket, а где мы обращались к кастомной разметке?

Конструктор разметки. Большинство событий мы разметили с помощью конструктора разметки в UX Rocket. Движок автоматически собирал практически все нужные нам пользовательские действия, а наша задача заключалась в их правильной группировке. Например, заявка на 150 лендингах считалась как 150 уникальных действий («Оставить заявку»), но с помощью конструктора мы быстро объединили их в одно типовое событие.

AI-разметка помогла нам собрать правила для события «Выбор цвета», у которого было более 15 вариантов цветов. На 110 лендингах с моделями, где можно было выбрать цвет, это событие превращалось в масштабную структуру с более чем 1000 правилами. Конструктор не подходил для этой задачи, так как названия цветов были записаны по-разному: в одних случаях они указывались в событиях, в других отсутствовали или содержали ошибки, а также различались CSS-селекторы. Благодаря AI-разметке мы успешно разметили это событие, хотя это требует определенного навыка исследователя

Кастомная разметка событий и атрибутов. Некоторые события и атрибуты UX Rocket не собирает автоматически. Например, нажатие стрелок «вправо/влево» для просмотра фото. Именно в данной конфигурации сайта JS-разработчикам пришлось размечать вручную, что заняло около часа.

Также в UX Rocket возможно вручную менять тип действия с «Button» на «SubmitForm» для кнопок «Отправить заявку», чтобы в аналитике фиксировались только успешные отправки формы, а не просто клики по кнопке. Это помогает избежать ложных срабатываний, так как кнопка может быть настроена, например, просто на редирект.

Около 10 реализаций CTA – На сайте заказчика было около 10 различных кнопок «Отправить заявку», связанных с разными сценариями: раздел трейд-ин, рекламные акции, кредитный калькулятор, всплывающие виджеты и другими. При этом все кнопки имели разные названия. Мы разметили каждую кнопку как уникальную, но для удобства последующей аналитики объединили их в одно типовое событие «Общая заявка», в которое скопировали все правила идентификации из других кнопок.

UX Rocket позволяет дублировать правила в разные типовые события, а в разделе кликстрима (сырые данные) автоматически присваивает событию ту категорию, в которой больше всего правил. В результате в «Общей заявке» оказалось больше всего событий, что привело к определенным сложностям в аналитике. Во время валидации разметки (тестового прокликивания действий на сайте) нажатие абсолютно любой кнопки «Отправить заявку» отражалось только как «Общая заявка». Чтобы устранить эту проблему, мы настроили приоритет отображения типового события, что позволило системе правильно классифицировать действия пользователя.

Какие «подводные камни» в разметке сайта мы встретили?

Ошибки разработки сайта. В Брайт Парке разработчики дали одинаковое название «Оставить заявку» кнопкам с разным функционалом. Можно было попросить заказчика исправить, но в UX Rocket для таких случаев есть более удобное решение — использование CSS-селектора. При настройке типового события мы просто убрали название кнопки из правил идентификации и использовали вариант идентификации – по части CSS-селектора, который автоматически собирается в атрибутах всех событий, кроме события «Просмотра страниц». Это позволило корректно различать кнопки без внесения изменений в код сайта.

Чистовой период разметки – это период, когда данные становятся достаточно точными, чтобы можно было принимать управленческие решения на их основе. Некоторое время ушло на синхронизацию с заказчиком при обновлении разметки: на первых порах он забывал уведомлять нашу команду о внесенных изменениях. Сайт постоянно развивается: добавляются новые акции, виджеты, контент, поэтому поведенческая аналитика требует своевременного обновления разметки. Это можно делать сразу после изменений или регулярно по регламенту. В UX Rocket для этого есть функционал «Рекомендации правил». Система автоматически выявляет новые события в рамках типового события, помечает их как «Новое» или «Устаревшее» и предлагает обновить разметку.

Хотите узнать, как мы нашли data-driven инсайты с этой разметкой?
Читать историю успеха