Інтеграція Mixpanel аналітики на сайт

Інтеграція Mixpanel аналітики

Mixpanel — event-based аналітика з фокусом на поведінку користувачів, а не на сторінки. Замість переглядів рахують події: хто натиснув, коли, з якими властивостями. Сильні сторони — retention-аналіз, воронки, A/B-звіти та можливість будувати когортні звіти без SQL.

Встановлення SDK

Два варіанти: NPM-пакет для SPA або CDN-скрипт для класичних сайтів.

NPM:

npm install mixpanel-browser

// src/analytics/mixpanel.ts
import mixpanel from 'mixpanel-browser';

mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN, {
  debug: import.meta.env.DEV,
  track_pageview: false,   // керуємо вручну
  persistence: 'localStorage',
  ignore_dnt: false,
  batch_requests: true,
  batch_flush_interval_ms: 5000,
});

export default mixpanel;

CDN для класичних сайтів:

<script>
(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e].concat([call2]))}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
mixpanel.init('YOUR_TOKEN');
</script>

Трекінг подій

Mixpanel будується на трьох примітивах: track, identify, people.set.

// Базові події
mixpanel.track('Page Viewed', {
  page_title: document.title,
  page_url: window.location.pathname,
  referrer: document.referrer || 'direct',
});

// Подія з деталями
mixpanel.track('Button Clicked', {
  button_text: 'Залишити заявку',
  button_location: 'hero_section',
  page: window.location.pathname,
});

// Форма відправлена
mixpanel.track('Form Submitted', {
  form_name: 'contact_form',
  has_phone: true,
  source_page: window.location.pathname,
});

// Електронна комерція
mixpanel.track('Purchase Completed', {
  order_id: 'ORDER-789',
  revenue: 14500,
  currency: 'RUB',
  items_count: 3,
  category: 'software',
});

Ідентифікація користувачів

Без identify кожен сеанс — анонімний користувач. Після логіну або заповнення форми з email потрібно пов'язати анонімний профіль з реальним:

// Після успішного логіну
function onUserLoggedIn(user: { id: string; email: string; name: string; plan: string }) {
  mixpanel.identify(user.id);

  mixpanel.people.set({
    $email: user.email,
    $name: user.name,
    plan: user.plan,
    created_at: new Date().toISOString(),
  });

  // Додаткові властивості, які будуть у всіх майбутніх подіях
  mixpanel.register({
    user_id: user.id,
    user_plan: user.plan,
  });
}

// Якщо користувач заповнив форму без реєстрації
function onLeadFormSubmitted(email: string) {
  mixpanel.alias(email); // пов'яже анонімний ID з email
  mixpanel.people.set({ $email: email });
}

Суперпроперті та контекст

Суперпроперті автоматично додаються до кожної наступної події — зручно для A/B-варіантів, версії додатка, мови:

// Встановлюємо один раз при ініціалізації
mixpanel.register({
  app_version: '2.4.1',
  locale: navigator.language,
  ab_variant: getABVariant(),
  device_type: /Mobi/.test(navigator.userAgent) ? 'mobile' : 'desktop',
});

// register_once — не перезапише, якщо вже встановлено
mixpanel.register_once({
  first_visit_date: new Date().toISOString(),
  landing_page: window.location.pathname,
  utm_source: new URLSearchParams(window.location.search).get('utm_source') ?? 'direct',
});

Інтеграція з React Router

// hooks/useMixpanelPageview.ts
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import mixpanel from '@/analytics/mixpanel';

export function useMixpanelPageview() {
  const location = useLocation();

  useEffect(() => {
    mixpanel.track('Page Viewed', {
      page_path: location.pathname,
      page_search: location.search,
      page_hash: location.hash,
    });
  }, [location.pathname]);
}

Server-side трекінг

Для подій, які відбуваються тільки на бекенді (оплата через webhook, активація аккаунту по email), використовуйте Mixpanel HTTP API:

// app/Services/MixpanelService.php
class MixpanelService
{
    private string $token;
    private string $endpoint = 'https://api.mixpanel.com/track';

    public function __construct()
    {
        $this->token = config('services.mixpanel.token');
    }

    public function track(string $event, string $distinctId, array $properties = []): bool
    {
        $data = [
            'event'      => $event,
            'properties' => array_merge($properties, [
                'token'       => $this->token,
                'distinct_id' => $distinctId,
                'time'        => time(),
                '$insert_id'  => uniqid('srv_', true),
            ]),
        ];

        $response = Http::asForm()->post($this->endpoint, [
            'data' => base64_encode(json_encode([$data])),
        ]);

        return $response->body() === '1';
    }

    public function setPeopleProperties(string $distinctId, array $properties): bool
    {
        $data = [
            '$token'       => $this->token,
            '$distinct_id' => $distinctId,
            '$set'         => $properties,
        ];

        $response = Http::asForm()->post('https://api.mixpanel.com/engage', [
            'data' => base64_encode(json_encode([$data])),
        ]);

        return $response->body() === '1';
    }
}

Експорт даних та Lookup Tables

Для об'єднання даних (наприклад, додати категорію товару до подій покупки), Mixpanel підтримує Lookup Tables:

# Завантаження lookup table через API
curl -X POST 'https://api.mixpanel.com/lookup-tables/v1/TABLE_ID' \
  -H 'Authorization: Basic BASE64_ENCODED_SERVICE_ACCOUNT' \
  -F '[email protected]'

CSV-формат:

id,category,brand,price_tier
SKU-001,software,acme,enterprise
SKU-002,hardware,techco,smb

Налагодження

// Включити debug-режим вручну
mixpanel.set_config({ debug: true });

// У консолі з'являться логи кожного track-виклику:
// [Mixpanel] Sending request: POST https://api.mixpanel.com/track/...
// [Mixpanel] Response: 1

// Перевірка черги подій до ініціалізації
console.log(window.mixpanel);

Розширення Mixpanel у Chrome DevTools показує всі події в реальному часі без додаткового налаштування.

Строки

Встановлення SDK та базовий трекінг подій — 4–6 годин. Повна настройка identify/alias, суперпропертей, server-side подій — 1–2 дні. Налаштування воронок та дашбордів у особистому кабінеті — 4–8 годин окремо.