3 аналитики из одного модуля за вечер

Три аналитики на сайте. Один вызов trackEvent(). Десять типов событий трекаются автоматически - без единой правки в компонентах. Собрал за 4.5 часа с Claude Code - вместе с OG-картинками и SEO-фиксами.

В осознал проблему: prodfeat.ai рос, появился блог, CTA-кнопки, соцссылки - уже почти месяц, но без аналитики. Самое время подключать.

Что сделал

Централизованный модуль

Создал analytics.ts - 38 строк TypeScript. Одна функция trackEvent(name, params). Внутри она шлёт событие в три места:

// GA4
window.gtag('event', name, { ...params, send_to: GA4_ID })

// Yandex Metrica
window.ym(YM_ID, 'reachGoal', name, params)

// Vercel Analytics
track(name, strParams)

Компоненты не знают, сколько аналитик под капотом. Вызываешь trackEvent('cta_click', { label: 'Start' }) - улетает в GA4, Yandex Metrica и Vercel одновременно. Добавишь четвёртый сервис - правишь только модуль, ноль изменений в компонентах.

Event delegation вместо обвязки компонентов

Второй файл - analytics-events.ts. 132 строки. Один document.addEventListener('click') трекает всё через CSS-селекторы и URL-паттерны.

Один слушатель на document ловит все клики. Дальше цепочка проверок:

• Клик в .sticky-nav? Шлём nav_click
• Кнопка .btn-primary? Шлём cta_click
• Ссылка на /blog/tag/*? Шлём tag_click
• Внешняя ссылка? Определяем соцсеть по домену или шлём outbound_click

10 типов событий. Ни одной правки в React-компонентах. Добавил новую кнопку с классом btn-primary - она автоматически трекается.

Отдельно - scroll depth для блога. Четыре порога (25%, 50%, 75%, 100%). Слушатель вешается только на страницах /blog/* и сам себя снимает после 100%.

Почему именно эта тройка

Выбрал GA4 + Yandex Metrica + Vercel Analytics, хотя хватило бы одного GA4.

• GA4 - стандарт, бесплатный, event-based модель. Минус - нет хитмапов.
• Yandex Metrica - бесплатные хитмапы и запись сессий. Microsoft Clarity тоже умеет бесплатно, но Метрика привычнее и данные хранит дольше.
• Vercel Analytics - без куков, GDPR-friendly. Показывает Core Web Vitals прямо в дашборде Vercel.

Можно было взять только GA4 и Clarity для хитмапов. Но я уже привык к Метрике, а Vercel Analytics даёт перформанс без настройки - он уже встроен в деплой. Три инструмента, каждый закрывает свою нишу. Так же всегда у вас не будет точной аналитики с одним инструментом, лучше иметь несколько - больший шанс, что вы увидите более точные данные.

Результат

analytics.ts - 38 строк. analytics-events.ts - 132 строки. 10 типов событий работают без ручной обвязки:

• cta_click - кнопки CTA
• outbound_click - внешние ссылки
• social_click - соцсети (Telegram, YouTube, LinkedIn, GitHub, X)
• blog_post_click - клик на пост в блоге
• tag_click - клик на тег
• nav_click - навигация
• guide_click, project_click, resource_click - секции лендинга
• scroll_depth - глубина прокрутки (25/50/75/100%)

Что понял

Первые 40 минут я пытался идти через React-обёртки для каждой кнопки. withTracking(Button), withTracking(Link) - обернул три компонента, понял что утону. Бросил. Event delegation решил задачу в 10 раз проще - один слушатель на document вместо трекинга в каждом компоненте. Добавляешь новые элементы - они трекаются автоматически по CSS-классам.

Ранее обходился без централизованного модуля (на других проктах). Каждая новая аналитика откладывалась на “потом добавлю”. Когда наконец собрал trackEvent() - стало стыдно, что не делал такого раньше. Пока не уверен, стоит ли добавлять Amplitude для продуктовой аналитики - при 150 посетителях в месяц это оверкилл. Посмотрю, когда трафик вырастет хотя бы до 2-3 тысяч.

Источники

1. GA4 Implementation Guide - Simo Ahava
2. Reactalytics - centralized analytics library
3. Event Delegation for Tracking
4. Event Delegation - javascript.info
5. GA4 vs Yandex Metrica
6. Vercel Analytics Quickstart
7. Microsoft Clarity - Free Heatmaps & Session Recordings