← All platforms

    Installation Guide · React Native

    How to Add Agent Analytics to Your Website

    One script captures what visitors browse. That becomes memory your analytics can understand. And agents like Jack turn it into actions — recovery emails, demand segments, conversion insights.

    Install on React Native

    📱

    React Native

    Use the @tradly/analytics SDK for React Native apps. It needs no native dependency — events are sent straight to the Tradly endpoint with offline queueing, retries, and batching built in.

    Medium·3 min·3 methods

    Install the SDK

    Add the @tradly/analytics package to your React Native project.

    1
    Install the package with npm (or yarn)

    The package has zero dependencies and ships with TypeScript definitions.

    Paste this
    npm install @tradly/analytics

    Create the analytics client

    Create the client once at the top of your app and reuse it everywhere.

    1
    Create your analytics client with your project key

    The projectKey is your public tenant/project identifier issued by Tradly. It is not a secret. Pass the app name, version, and platform so events are tagged correctly.

    Paste this
    import { createAnalytics } from "@tradly/analytics";

export const analytics = createAnalytics({
  projectKey: "your-tenant-id",
  app: {
    name: "My App",
    version: "1.0.0",
    platform: "ios", // ios, android, web, or omit
  },
});
    2
    Track your first event

    Events stay queued and retry on the next flush if they fail to send.

    Paste this
    await analytics.track("button_click", { name: "signup" });
    3
    Link anonymous history to a known user after login

    Call identify after your own auth flow. Do not use an email address as the identifier.

    Paste this
    await analytics.identify("tenant:123:user:456");

    Native apps use in-memory persistence by default. Pass a synchronous storage adapter backed by secure/local storage if identity should survive app restarts.

    Troubleshooting (3 common issues)
    • →The default event-ingestion URL is https://analytics.tradly.dev — no extra configuration needed
    • →The projectKey must be the tenant/project identifier from the dashboard, not a secret token
    • →Event names like screen_view, button_click, app_error, listing_view, add_to_cart, checkout_started, and purchase_completed are recognized in the dashboard

    Screen tracking with React Navigation

    The SDK never inspects navigation automatically. Add one root-level onStateChange hook so every screen transition is tracked centrally.

    1
    Wire a navigation ref and track the current screen on state changes

    Screen events appear in the dashboard's page and traffic reports.

    Paste this
    import { NavigationContainer, createNavigationContainerRef } from "@react-navigation/native";
import { createAnalytics } from "@tradly/analytics";

const navigationRef = createNavigationContainerRef();
const analytics = createAnalytics({ projectKey: "your-tenant-id" });
let previousRouteName: string | undefined;

function trackCurrentScreen() {
  if (!navigationRef.isReady()) return;
  const route = navigationRef.getCurrentRoute();
  if (!route || route.name === previousRouteName) return;
  previousRouteName = route.name;
  void analytics.screen(route.name);
}

<NavigationContainer
  ref={navigationRef}
  onReady={trackCurrentScreen}
  onStateChange={trackCurrentScreen}
>
  {/* your Stack, Tabs, or Drawer */}
</NavigationContainer>
    2
    Add metadata when you need more than the screen name

    You can call analytics.screen directly with custom properties.

    Paste this
    await analytics.screen("Checkout", { flow: "purchase" });

    Need help? Contact support@tradly.dev or check our FAQ.

    Last updated: January 2025