Привет всем! Меня зовут Антон Галич, я фронтенд-инженер в департаменте разработки Analytics Platform в Авито. Команда занимается разработкой и поддержкой платформы для сбора и доставки аналитики в Авито – Clickstream. В этой статье я рассказываю историю о том, как мы перевели аналитику для внутренних сервисов компании на нашу собственную платформу, отказавшись от стороннего решения Amplitude.
Дисклеймер: сущности, относящиеся к нашей платформе, далее в тексте называю, используя префикс cs-.
Почему нам понадобилось свое решение?
Для аналитики фронтендов внутренних сервисов в Авито долгое время использовали Amplitude — мощный инструмент, который хорошо подходил владельцам внутренних сервисов. Его привлекательность – в простоте внедрения: достаточно подключить SDK, чтобы сервис начал отправлять дефолтные события (сессии, клики, просмотры страниц и так далее). Еще один плюс – возможность быстро строить визуализации и готовые дашборды в интерфейсе Amplitude без необходимости привлекать аналитиков и писать запросы. Это особенно удобно для команд, которым нужно оперативно получать выводы из данных.
Однако, несмотря на эту простоту, Amplitude имеет и свои существенные недостатки:
- риски безопасности. Все аналитические данные уходили на внешние серверы, что создавало потенциальную угрозу конфиденциальности;
- зависимость от стороннего вендора. Любые сбои в работе Amplitude могли негативно повлиять на аналитику сервисов, при этом не оставляя компании простого пути к исправлению ситуации;
- уход Amplitude с российского рынка. С августа 2024 года инструмент стал доступен только через VPN и есть реальный риск полной блокировки сервиса.
Именно в августе 2024 года к нам пришли стейкхолдеры с вопросом: можно ли сделать свой инструмент, который сочетал бы простоту Amplitude, но оставался полностью под контролем Авито? Мы взялись за эту задачу.
Основные вызовы
Наш инструмент должен был отвечать трём ключевым требованиям:
- быть простым в интеграции, чтобы различные команды без проблем могли переключиться с Amplitude на новое решение;
- иметь удобный интерфейс для визуализации данных, чтобы команды могли анализировать результаты без привлечения аналитиков;
- не зависеть от сторонних поставщиков, обеспечивая контроль над данными и минимизируя риск блокировок или утечек.
На какие аналоги мы ориентировались?
Перед тем как писать своё решение, мы рассмотрели альтернативы. Среди них:
Open Source-решения: Matomo, Posthog, Countly.
- плюсы: бесплатные, безопасные (развёртывание на своих серверах), предоставляют доступ к исходному коду.
- минусы: требуют настройки под наши нужды.
- еще одна система логирования, незачем плодить одинаковые инструменты в рамках одной компании.
Российские коммерческие аналоги: Яндекс.Метрика, Roistat.
- плюсы: простые в использовании и безопасные с точки зрения локализации;
- минусы: данные уходят конкурентам (например, Яндекс.Метрика), зависимость от стороннего вендора.
Что такое Clickstream?
Clickstream — это масштабная система сбора и обработки аналитических событий в Авито. Она обеспечивает:
- надежную доставку 20 миллионов cs-событий в минуту;
- централизованное управление описанием событий;
- клиентскую валидацию данных;
- единый формат событий, что важно для сквозной аналитики.
Платформа построена на событийно-ориентированной архитектуре с единой семантикой полей. Она поддерживает более 500 источников данных и обеспечивает гарантии доставки (at least once).
Подробнее о платформе, ее концепциях и возможностях можно узнать в этой статье.
Реализация внутренней аналитики
После ряда встреч со стейкхолдерами и анализа данных, отправляемых Amplitude, мы определили 5 базовых аналитических событий с необходимыми полями:
Таблица 1 — общие поля для каждого события:
Дефолтные события:
1) session_start (при загрузке приложения): только общие поля;
2) session_end (при закрытии приложения): только общие поля;
3) page_open (при открытии/переходе на страницу).
Таблица 2 — поля события page_open:
1) session_start (при загрузке приложения): только общие поля;
2) session_end (при закрытии приложения): только общие поля;
3) page_open (при открытии/переходе на страницу).
Таблица 2 — поля события page_open:
4) element_clicked (при клике по интерактивному элементу).
Таблица 3 — поля события element_clicked:
Таблица 3 — поля события element_clicked:
5) element_changed (при вводе в инпут, кликах на radiobutton, checkbox).
те же поля что у element_clicked
Библиотека Clickstream-insights
Для сбора этих полей мы разработали библиотеку Clickstream-insights, которая добавляет соответствующие слушатели событий на фронте сервиса и формирует объекты cs-событий для отправки.
Библиотека экспортирует класс, который агрегирует и инициализирует, в зависимости от настроек, переданных в конструктор, другие классы для сбора каждого типа событий: ClickTracker, InputChangeTracker, RouteChangeTracker.
Поскольку админки в Авито обычно представляют собой SPA (одностраничные приложения), интересным аспектом стал RouteChangeTracker. Для отслеживания изменения роутера нам потребовалось переопределить нативное History API:
Визуализация данных в Redash
В качестве инструмента для визуализации был выбран Redash, а именно redash-charts, который разработали в Авито, позволяющий строить визуализации в формате no-code, выбирая поля датасетов в качестве разрезов.
Redash — это инструмент бизнес-аналитики и визуализации данных с открытым исходным кодом, предназначенный для анализа, визуализации и совместной работы с данными.
В Авито есть команда, которая занимается развитием данного инструмента. Ребята сделали доработки, позволяющие использовать в качестве источника для датасетов топик Kafka, в который попадают события аналитики.
Интерфейс redash-charts (Bar chart):
Интерфейс redash-charts (Pie chart):
Визуализации из чартов можно собирать в информативные дашборды, которые дают всестороннее представление о работе внутренних сервисов.
Дашборд в redash:
Интеграция в сервисы
Процесс подключения нового фронтенд-сервиса к нашей аналитической платформе максимально упрощен:
- в админке нашей платформы создается cs-окружение;
- в него подоокружением добавляется cs-окружение библиотеки Clickstream-insights;
- бэкенд платформы при добавлении подокружения отправляет событие в асинхронную очередь, которое обрабатывается воркером, создающим датасеты и дефолтные дашборды в Redash;
- в коде фронтенд-сервиса инициализируется инстанс Clickstream-insights, в конструктор которого передается клиент платформы из SDK;
- cs-события проходят по нашему пайплайну и роутятся в отдельный топик Kafka;
- датасеты redash наполняются данными из топика.
На этом настройка завершена — дефолтные cs-события начинают отправляться, а в Redash уже готовы стандартные дашборды для анализа.
Пример инициализация инстанса Clickstream-insights со всеми настройками:
Возможности кастомных событий
Помимо стандартного набора cs-событий многим пользователям критично отправлять кастомные. Мы реализовали это требование, что значительно расширило гибкость внутренней аналитики для всех команд Авито.
Реализация
При добавлении нового cs-события в cs-окружение, где уже подключена Clickstream-insights, в асинхронную очередь отправляется событие. На него подписан воркер, который добавляет поля cs-события в датасет, соответствующий cs-окружению.
Теперь команды могут добавлять уникальные события для сбора информации о специфических действиях пользователей, которые важны именно для их сервиса и сразу становятся доступны для визуализаций в Redash.
Heatmaps (Тепловые карты)
От стейкхолдеров поступил запрос о возможности построения тепловых карт на основе собранных данных. Тепловые карты используются для наглядного отображения зон активности пользователей на страницах административных интерфейсов.
Для решения этой задачи мы разработали браузерное расширение, накладывающее оверлей с тепловой картой поверх страницы.
Это расширение считывает:
- ID источника данных (проставляемый библиотекой в пиксель);
- URL страницы (либо задаваемое пользователем регулярное выражение);
- ширину/высоту экрана пользователя;
- временной отрезок (выбирается пользователем).
Попап в расширения:
Эти данные отправляются в бэкенд-сервис. Он ходит за данными о кликах в датасет соответствующий cs-окружению. Далее сервис преобразует результаты в формат, пригодный для построения тепловой карты (массив точек с координатами и весами).
Браузерное расширение получает эти данные и создает оверлей с тепловой картой поверх интерфейса. Для визуализации используется библиотека heatmap.js, которая преобразует точки в градиентную карту, где цвет указывает на интенсивность кликов.
Тепловая карта:
Заключение
В результате мы получили собственный мощный инструмент, не зависящий от внешних вендоров, который можно использовать для постоянного улучшения внутренних процессов и сервисов, что в конечном итоге положительно повлияет на эффективность работы всей компании.
Спасибо вам за уделенное статье время!
Вообще мы в Авито создаем десятки сервисов для ускорения разработки и блага инженеров. Некоторые из этих сервисов уже вышли на внешний рынок, например платформа для А/B-тестирования Trisigma и self-service-решение для ускорения разработки AvitoPlato.
Больше о наших решениях и команде можно узнать здесь. И подпишитесь на канал AvitoTech в Telegram, там мы каждый день выкладываем интересные штуки.
