React Native SDK

@trektik/react-native v0.1.0 — полный клиент для RN с офлайн-очередью (AsyncStorage), событиями жизненного цикла и помощниками для React Navigation.

Установка

React Native SDK выдаётся приватно — аккаунт-менеджер пришлёт trektik-react-native-0.1.0.tgz после активации подписки.

bash

# положите присланный файл в ./vendor/
npm install ./vendor/trektik-react-native-0.1.0.tgz @react-native-async-storage/async-storage
# iOS: cd ios && pod install

Peer deps:

react >= 18
react-native >= 0.70
@react-native-async-storage/async-storage >= 1.17
@react-navigation/native >= 6 — опционально

TrektikProvider (рекомендуется)

tsx

import { TrektikProvider, useTrektik } from '@trektik/react-native';

function App() {
  return (
    <TrektikProvider apiKey="pk_...">
      <RootNavigator />
    </TrektikProvider>
  );
}

function HomeScreen() {
  const { track, identify, revenue, reset } = useTrektik();
  return (
    <Button onPress={() => track('button_tap', { screen: 'home' })} title="Tap" />
  );
}

TrektikRN (ручное управление)

import { TrektikRN } from '@trektik/react-native';

const client = new TrektikRN();
await client.init({ apiKey: 'pk_...' });

client.track('event_name', { prop: 'value' });
client.identify('user-123', { email: 'u@example.com' });
client.revenue(4990, 'RUB', { productId: 'pro-monthly' });
await client.flush();
await client.reset();
client.destroy();

Конфиг TrektikRNConfig

Поле	Тип	Default
`apiKey`	string	required
`endpoint`	string	https://collect.trektik.ru
`debug`	boolean	false
`autocapture`	bool \| { appOpen?, appState? }	true
`flushInterval`	number (ms)	30000
`flushSize`	number	20
`sessionTimeout`	number (ms)	1800000
`maxQueueSize`	number	1000

Автозахват жизненного цикла

В отличие от браузерного SDK, в RN автозахват — только события жизненного цикла, без UI-событий:

app_open — при cold start (appOpen: true, по умолчанию)
app_foreground / app_background — при переключении (appState: true)

При возврате в foreground SDK пытается флашить offline-очередь.

useTrackScreen

tsx

import { useTrackScreen } from '@trektik/react-native';

function Profile() {
  useTrackScreen('Profile');
  return <View>...</View>;
}

Шлёт screen_view один раз при монтировании с screen_name.

React Navigation

tsx

import { NavigationContainer } from '@react-navigation/native';
import {
  createTrektikNavigationContainerRef,
  trackScreenChange,
} from '@trektik/react-native';

const navigationRef = createTrektikNavigationContainerRef();

export default function RootApp() {
  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={() => trackScreenChange(navigationRef)}
    >
      {/* your navigators */}
    </NavigationContainer>
  );
}

Offline queue

Очередь сохраняется в AsyncStorage. При init() восстанавливается, при возврате приложения в foreground — попытка реплея. При отправке в background очередь дополнительно сохраняется.