React / Next.js SDK

@trektik/react v0.1.2 — тонкая React-обёртка. Свой мини-клиент (~2 KB gzip), независимый от @trektik/browser. Только track / identify / reset.

Установка

React SDK выдаётся приватно — аккаунт-менеджер пришлёт trektik-react-0.1.2.tgz после активации подписки. Установка из локального пути:

bash

# положите присланный файл в ./vendor/
npm install ./vendor/trektik-react-0.1.2.tgz

Peer dependency: react >= 18. @trektik/browser подтянется автоматически из публичного npm.

<TrektikProvider>

Оборачивает дерево и создаёт SDK-инстанс один раз через useRef.

tsx

import { TrektikProvider } from '@trektik/react';

export default function App() {
  return (
    <TrektikProvider
      apiKey="pk_..."
      endpoint="https://collect.trektik.ru" // необязательно
      debug={false}                          // необязательно
      trackPageViews={true}                  // необязательно, по умолчанию true
    >
      <YourApp />
    </TrektikProvider>
  );
}

При trackPageViews (true по умолчанию) провайдер шлёт $pageview c title при монтировании. Он не подписывается на SPA-навигацию — для этого есть <TrackPageView />.

useTrektik()

tsx

import { useTrektik } from '@trektik/react';

function CheckoutButton() {
  const { track, identify, reset } = useTrektik();
  return (
    <button onClick={() => track('checkout_clicked', { plan: 'pro' })}>
      Pay
    </button>
  );
}

Бросает ошибку, если вызван вне <TrektikProvider>.

<TrackPageView /> для Next.js App Router

Автотрекинг SPA-навигации. Ставьте в layout.tsx:

tsx

// app/layout.tsx
import { TrektikProvider, TrackPageView } from '@trektik/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TrektikProvider apiKey="pk_..." trackPageViews={false}>
          <TrackPageView />
          {children}
        </TrektikProvider>
      </body>
    </html>
  );
}

Слушает popstate, патчит pushState / replaceState. Дедуплицирует подряд идущие одинаковые пути. Поставьте trackPageViews={false} на провайдере, чтобы первая страница не трекалась дважды.

Только client-side

В Next.js App Router провайдер должен быть client component. Создайте обёртку:

tsx

// components/trektik-wrapper.tsx
'use client';
import { TrektikProvider, TrackPageView } from '@trektik/react';

export function TrektikWrapper({ children }: { children: React.ReactNode }) {
  return (
    <TrektikProvider apiKey={process.env.NEXT_PUBLIC_TREKTIK_KEY!} trackPageViews={false}>
      <TrackPageView />
      {children}
    </TrektikProvider>
  );
}

Когда брать @trektik/browser напрямую

React-обёртка умышленно тонкая: нет автозахвата, записей сессий, тепловых карт, подсказок и опросов. Если вам это нужно — подключайте @trektik/browser в useEffect:

tsx

'use client';
import { useEffect } from 'react';
import { init } from '@trektik/browser';

export function TrektikProviderFull({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    init({ apiKey: process.env.NEXT_PUBLIC_TREKTIK_KEY!, replay: true, guides: true });
  }, []);
  return <>{children}</>;
}