Интеграция Amplitude аналитики на сайт: настройка, трекинг, воронки

Вы запустили сайт, настроив Google Analytics, но не видите, почему пользователи уходят после регистрации. GA не даёт продуктовых инсайтов. Интеграция Amplitude с вашим сайтом — решение: эта product analytics платформа строит воронки конверсий, когорты удержания и предоставляет инструменты поведенческого анализа. Мы с 5-летним опытом поможем настроить Amplitude под ваш бизнес. Экономия на рекламном бюджете за счёт улучшения ретеншена может достигать 30%. Получите консультацию — оценим ваш проект.

Проблемы, которые решает Amplitude

Отток пользователей на ранних этапах

Без корректного трекинга вы не видите, где именно пользователь застревает. Amplitude строит воронки конверсий с точностью до шага. Например, между «Регистрация» и «Загрузка первого файла» теряется до 70% пользователей — вы это увидите и сможете оптимизировать UX. В одном из проектов мы снизили отток на этапе онбординга на 25% за счёт кастомных воронок и A/B-тестов. Дополнительно настроили отслеживание событий с задержкой более 30 секунд, что выявило ещё 12% точек трения.

Слепые зоны в поведении

GA фиксирует pageviews, но не действия внутри страницы. Amplitude трекает клики по кнопкам, скроллы, заполнение форм — любые события с произвольными свойствами. Это даёт полную картину взаимодействия с продуктом. Средний LTV пользователей, интегрировавших с API Amplitude, вырастает на 40% по данным нашей практики. При этом количество замеряемых событий на сессию увеличивается с 5 до 20+.

Низкая конверсия в повторные покупки

Cohorts и Retention показывают, какие группы пользователей возвращаются и что их удерживает. Сегментируйте аудиторию по поведению и запускайте персонализированные кампании. Например, пользователи с просмотром премиум-фичи на 50% чаще конвертируются. Мы помогли SaaS-продукту увеличить repeat purchase rate на 35% за 2 месяца.

Как настроить трекинг событий за 1 день?

Базовая установка — 1 день. Устанавливаем SDK, инициализируем с ключом API, добавляем ключевые события: просмотр страницы, клик по CTA, заполнение формы, регистрация, покупка. Amplitude лучше GA в построении воронок благодаря поведенческим когортам — это ключевое преимущество для product-команд. Amplitude Documentation рекомендует начинать с минимального набора событий, постепенно расширяя.

npm install @amplitude/analytics-browser 

import * as amplitude from '@amplitude/analytics-browser';

amplitude.init(import.meta.env.VITE_AMPLITUDE_API_KEY, {
  defaultTracking: {
    sessions: true,
    pageViews: false,
    formInteractions: false,
    fileDownloads: true,
  },
  logLevel: import.meta.env.DEV ? amplitude.Types.LogLevel.Debug : amplitude.Types.LogLevel.Warn,
  flushIntervalMillis: 10000,
  flushQueueSize: 30,
  serverUrl: undefined, // EU: 'https://api.eu.amplitude.com'
});

Отправка событий

Используем единый нейминг — Noun Verb или Subject Action:

import { track } from '@amplitude/analytics-browser';

// Просмотр страницы
track('Page Viewed', {
  page_path: window.location.pathname,
  page_title: document.title,
  page_type: 'product_listing',
});

// Клик по CTA
track('CTA Clicked', {
  cta_text: 'Попробовать бесплатно',
  cta_position: 'header',
  page_section: 'hero',
});

// Заполнение формы
track('Form Completed', {
  form_type: 'lead',
  fields_filled: ['name', 'email', 'phone'],
  time_to_complete_seconds: 45,
});

// Просмотр товара
track('Product Viewed', {
  product_id: 'SKU-001',
  product_name: 'Professional Plan',
  product_category: 'subscription',
  price: 2990,
  currency: 'USD',
});

Идентификация пользователей

Для авторизованных пользователей обязательно вызываем setUserId и устанавливаем свойства через Identify. Это позволяет строить когорты по плану, дате регистрации и т.д. Гарантируем корректную настройку — без этого данные будут неполными.

import { Identify, identify, setUserId } from '@amplitude/analytics-browser';

function onUserAuthenticated(user: {
  id: string;
  email: string;
  plan: 'free' | 'pro' | 'enterprise';
  company?: string;
  createdAt: string;
}) {
  setUserId(user.id);
  const identifyEvent = new Identify();
  identifyEvent.set('email', user.email);
  identifyEvent.set('plan', user.plan);
  identifyEvent.set('company', user.company ?? '');
  identifyEvent.setOnce('signup_date', user.createdAt);
  identifyEvent.add('login_count', 1);
  identify(identifyEvent);
}

Как интегрировать server-side трекинг?

Для действий, происходящих на сервере (например, оплата подписки), используем HTTP API Amplitude. Пример на Laravel:

class AmplitudeService {
    private string $apiKey;
    private string $endpoint = 'https://api2.amplitude.com/2/httpapi';

    public function __construct()
    {
        $this->apiKey = config('services.amplitude.api_key');
    }

    public function track(string $userId, string $eventType, array $eventProperties = []): bool
    {
        $payload = [
            'api_key' => $this->apiKey,
            'events' => [[
                'user_id' => $userId,
                'event_type' => $eventType,
                'event_properties' => $eventProperties,
                'time' => (int) (microtime(true) * 1000),
                'insert_id' => uniqid('srv_', true),
                'platform' => 'web',
            ]],
        ];

        $response = Http::timeout(5)->post($this->endpoint, $payload);

        return $response->ok() && ($response->json('code') === 200);
    }
}

Сравнение Amplitude и Google Analytics 4

Процесс работы

1. Аналитика — разбираем вашу бизнес-модель, определяем ключевые метрики (DAU, конверсия, LTV).
2. Проектирование — составляем карту событий, выбираем нейминг и свойства.
3. Реализация — интегрируем SDK, настраиваем трекинг на клиенте и сервере.
4. Тестирование — проверяем в debug-режиме, пишем автотесты для критических событий.
5. Деплой и мониторинг — подключаем дашборды, обучаем команду.

Что входит в работу

• Документация по всем событиям и свойствам (формат Notion или Confluence).
• Доступ к demo-дашборду с ключевыми метриками.
• Обучение команды (1 вебинар на 2 часа).
• Поддержка 2 недели после запуска для корректировок.

Сроки и типичные ошибки

Стоимость full‑stack интеграции с учётом server-side и Session Replay составляет от $1.5k–3.5k в зависимости от сложности кастомных воронок и количества платформ.