Alytica Docs
SDKs

React Native SDK

The Alytica React Native SDK provides a simple way to track user behavior in your React Native applications. This document details the installation process and explains how to use the React Native SDK within your mobile app.

Overview

A React Native SDK for integrating with the Alytica analytics platform. Track events, identify users, and gain valuable insights into your app's performance and user behavior.

Installation

npm install alytica-react-native
# or
yarn add alytica-react-native

Quick Start

import Alytica from 'alytica-react-native';
 
// Initialize the Alytica client
const alytica = new Alytica({
  clientId: 'YOUR_CLIENT_ID',
  api_host: 'https://api.alytica.tech',
  debug: false,
});
 
// Initialize the SDK
alytica.init();
 
// Track an event
alytica.track('button_clicked', {
  buttonName: 'Sign Up',
  source: 'home_screen'
});
 
// Identify a user
alytica.identify('user123', {
  email: 'user@example.com',
  plan: 'premium'
});

Key Features

  • Event Tracking: Track user interactions and custom events
  • User Identification: Associate events with specific users
  • Session Management: Track user sessions automatically
  • Group Analytics: Organize users into groups for better analysis
  • Customizable: Set global properties to include with all tracked events

API Reference

Initialization

const alytica = new Alytica({
  clientId: 'YOUR_CLIENT_ID',     // Required
  clientSecret: 'YOUR_SECRET',    // Optional, for secure server-side tracking
  api_host: 'https://api.alytica.tech', // Optional, defaults to https://api.alytica.tech
  debug: false,                  // Optional, enables debug logging
  disabled: false,               // Optional, disables all tracking
  processProfiles: true          // Optional, enables user profile processing
});
 
alytica.init();

Tracking Events

// Simple event
alytica.track('page_viewed');
 
// Event with properties
alytica.track('product_added', {
  productId: '123',
  price: 99.99,
  currency: 'USD'
});

User Identification

// Associate a user ID with the current user
alytica.identify('user123');
 
// Associate a user ID with additional properties
alytica.identify('user123', {
  name: 'John Doe',
  email: 'john@example.com',
  plan: 'premium'
});

Group Analytics

// Associate a user with a group
alytica.group('company', 'acme_inc');
 
// With additional properties
alytica.group('company', 'acme_inc', {
  plan: 'enterprise',
  employees: 500
});

User Aliasing

// Associate an anonymous ID with a new user ID
alytica.alias('user123', 'anonymous_id_456');

Global Properties

// Set properties to be included in all tracked events
alytica.setGlobalProperties({
  appVersion: '1.2.3',
  environment: 'production'
});

Reset User

// Reset the current user, generating a new anonymous ID
await alytica.reset();

Screen View Tracking

With Expo Router

import { usePathname, useSegments } from 'expo-router';
import Alytica from 'alytica-react-native';
 
const alytica = new Alytica({
  clientId: 'YOUR_CLIENT_ID',
  api_host: 'https://api.alytica.tech',
});
 
function RootLayout() {
  // ...
  const pathname = usePathname();
  // Segments is optional but can be nice to have if you
  // want to group routes together
  // pathname = /posts/123
  // segments = ['posts', '[id]']
  const segments = useSegments();
 
  useEffect(() => {
    // Simple
    alytica.track('screen_view', { screen: pathname });
 
    // With extra data
    alytica.track('screen_view', {
      screen: pathname,
      // segments is optional but nice to have
      segments: segments.join('/'),
      // other optional data you want to send with the screen view
    });
  }, [pathname, segments]);
  // ...
}

With React Navigation

import { createNavigationContainerRef, NavigationContainer } from '@react-navigation/native';
import Alytica from 'alytica-react-native';
 
const alytica = new Alytica({
  clientId: 'YOUR_CLIENT_ID',
  api_host: 'https://api.alytica.tech',
});
 
const navigationRef = createNavigationContainerRef();
 
export function NavigationRoot() {
  const handleNavigationStateChange = () => {
    const current = navigationRef.getCurrentRoute();
    if (current) {
      alytica.track('screen_view', {
        screen: current.name,
        params: current.params,
      });
    }
  };
 
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={handleNavigationStateChange}
      onStateChange={handleNavigationStateChange}
    >
      <Stack.Navigator />
    </NavigationContainer>
  );
}

License

MIT

On this page