📊 Единые события в аналитике: не боль, а стандарт

Открываешь отчёт в аналитике, а там:

• buttonClick
• click_button
• btnClick
• clickBtn
• button_clik (да, с опечаткой)

🤦‍♂️ И всё это толькоразные виды кнопок.

Я видел много проектов — и везде одна и та же история: хаос в названиях событий.

🤯 Почему это больно?

• Вы не можете построить адекватный отчёт.
• Аналитика теряет контекст.
• Новые разработчики не понимают, как называть события.
• Вручную маппить и объединять события = ад.
• Любые сегменты и воронки превращаются в лотерею.

✅ Решение: заведите единый стандарт

Названия событий должны быть:

• в едином стиле: snake_case, camelCase или kebab-case (и выбрать только один!)
• читаемыми,
• понятными любому — разработчику, аналитику, продукту.

🔥 Примеры плохих названий событий

• clickBtn
• btnClick
• click_button
• onClick_button
• click-card
• cardClick
• card_click
• open_popap
• pageOpened
• goToPage

👌 Примеры хороших и понятных событий

• click_button
• click_card
• open_popup
• submit_form
• scroll_to_bottom
• start_video
• pause_video
• add_to_cart
• remove_from_cart
• purchase_success
• login_success
• logout
• registration_complete
• error_validation
• click_link

🧠 Совет

Выберите один стиль — например, snake_case, и придерживайтесь его всегда.

Можно даже завести словарь или интерфейс в коде.

🧩 TypeScript-интерфейс событий

export const ANALYTICS_EVENTS = {
	click_button: 'click_button',
	click_card: 'click_card',
	open_popup: 'open_popup',
	close_popup: 'close_popup',
	submit_form: 'submit_form',
	start_video: 'start_video',
	pause_video: 'pause_video',
	add_to_cart: 'add_to_cart',
	remove_from_cart: 'remove_from_cart',
	purchase_success: 'purchase_success',
	login_success: 'login_success',
	logout: 'logout',
	registration_complete: 'registration_complete',
	error_validation: 'error_validation',
	click_link: 'click_link',
	scroll_to_bottom: 'scroll_to_bottom'
} as const;
 
export type AnalyticsEvent = keyof typeof ANALYTICS_EVENTS;
 
export function trackEvent(event: AnalyticsEvent, payload: Record<string, unknown> = {}) {
	if (process.env.NODE_ENV === 'development') {
		console.log('[Analytics]', event, payload);
	}
	window.dataLayer?.push({
		event: ANALYTICS_EVENTS[event],
		...payload
	});
}

🚀 Бонус: как внедрить в команду

1. Опишите список допустимых событий (в Notion, Confluence или прямо в коде).
2. Вынесите список в types.ts или events.ts.
3. Запрограммируйте линтер или runtime-проверку.
4. Делайте code review на события — как на API.
5. Синхронизируйтесь с аналитиками и продактами — пусть они тоже понимают логику.

📝 Вывод

События аналитики — это такой же API, только для мозга.

Хаос в названиях = хаос в голове.
Стандартизация = понимание, автоматизация и мощная аналитика.

Примите стиль. Следуйте ему. И больше никогда не гадайте, как же назывался тот самый клик.

📊 А если хотите больше таких практик — читайте мой блог.