Axyle - Dashboard for Mobile Apps

Installation

Install the SDK package using npm or yarn:

bash

npm install @axyle/expo-sdk

Install the required peer dependencies:

bash

npx expo install expo-application expo-constants expo-device @react-native-async-storage/async-storage

Quick Start

Get your API key from your analytics platform dashboard. Then initialize the SDK:

tsx

import { Axyle } from "@axyle/expo-sdk";

// In your App.tsx or root component
// Simply pass your API key - that's all you need!
Axyle.init("your-api-key-from-platform");

Note

The SDK uses sensible defaults for all settings. Only the API key is required.

Track Events

tsx

import { Axyle } from "@axyle/expo-sdk";

// Track custom events
Axyle.track("Button Clicked", {
  button: "Sign Up",
  screen: "Home",
});

// Track with any properties
Axyle.track("Purchase Completed", {
  amount: 29.99,
  currency: "USD",
  productId: "premium-plan",
});

Identify Users

tsx

// When user logs in
Axyle.identify("user-123", {
  email: "[email protected]",
  plan: "premium",
  signupDate: "2024-01-01",
});

// When user logs out
Axyle.reset();

Initialization

Initialize the SDK as early as possible in your app. The SDK is designed to be simple - just pass your API key:

tsx

import { useEffect } from "react";
import { Axyle } from "@axyle/expo-sdk";

export default function App() {
  useEffect(() => {
    // Simple: just pass the API key as a string
    Axyle.init("your-api-key");
    
    // Or as an object (both work the same)
    // Axyle.init({ apiKey: "your-api-key" });
  }, []);

  return <YourApp />;
}

Configuration

All other settings (environment, debug mode, queue size, etc.) use sensible defaults and are not configurable. The SDK automatically uses production server, sets optimal queue and flush settings, handles session management, and tracks app lifecycle events.

Identify Users

Identify users when they log in to associate events with their user ID. You can also pass user traits for segmentation.

tsx

// When user logs in
Axyle.identify("user-123", {
  email: "[email protected]",
  plan: "premium",
  signupDate: "2024-01-01",
});

// When user logs out - clear user data
Axyle.reset();

User Attributes

User attributes are automatically collected and attached to every event:

{
  context: {
    app: { name, version, build, namespace },
    device: { id, manufacturer, model, name, type, brand },
    os: { name, version },
    screen: { width, height, density },
    locale: string,
    timezone: string,
    environment: 'dev' | 'prod'
  }
}

Screen Tracking

Track screen views to understand user navigation patterns.

Manual Screen Tracking (Recommended)

tsx

import { useEffect } from "react";
import { trackScreen } from "@axyle/expo-sdk";

export default function HomeScreen() {
  useEffect(() => {
    trackScreen("Home");
  }, []);

  return <View>...</View>;
}

// With additional properties
export default function ProfileScreen() {
  useEffect(() => {
    trackScreen("Profile", { userId: "123" });
  }, []);

  return <View>...</View>;
}

With React Navigation (Automatic)

tsx

import { NavigationContainer } from "@react-navigation/native";
import { createNavigationTracker } from "@axyle/expo-sdk";

const navigationTracker = createNavigationTracker();

function App() {
  return (
    <NavigationContainer onStateChange={navigationTracker}>
      {/* Your navigators */}
    </NavigationContainer>
  );
}

Using React Hook

tsx

import { useScreenTracking } from "@axyle/expo-sdk";

function HomeScreen() {
  useScreenTracking({
    screenName: "Home",
    properties: { section: "main" },
  });

  return <View>...</View>;
}

Event Tracking

Track custom events to understand user behavior. Events can include any properties you want to analyze.

tsx

import { Axyle } from "@axyle/expo-sdk";

// Track custom events
Axyle.track("Button Clicked", {
  button: "Sign Up",
  screen: "Home",
});

// Track with any properties
Axyle.track("Purchase Completed", {
  amount: 29.99,
  currency: "USD",
  productId: "premium-plan",
});

Session Analytics

Get insights into the current session with built-in analytics methods.

tsx

// Get session statistics
const stats = Axyle.getSessionStats();
console.log("Total events:", stats?.totalEvents);
console.log("Events by type:", stats?.eventsByType);

// Get all session events
const events = Axyle.getSessionEvents();
console.log(`Found ${events.length} events`);

// Get events filtered by type
const buttonClicks = Axyle.getEventsByType("Button Clicked");

Privacy & Opt-Out

The SDK is designed with privacy in mind. Users can opt out of tracking at any time.

tsx

// Opt out of tracking
Axyle.optOut();

// Opt back in
Axyle.optIn();

// Delete user data
Axyle.deleteUser("user-123");

What happens when opted out

When a user opts out, all queued events are cleared and no new events will be tracked or sent to the server until they opt back in.

React Hooks

The SDK provides React hooks for common tracking patterns.

useScreenTracking

tsx

import { useScreenTracking } from "@axyle/expo-sdk";

function HomeScreen() {
  useScreenTracking({
    screenName: "Home",
    properties: { section: "main" },
  });

  return <View>...</View>;
}

Troubleshooting

Events Not Sending

If events aren't being sent, check the following:

Verify your API key is correct
Check network connectivity
Verify you have internet connection (SDK always uses production server)

Expo Go Issues

The SDK works in Expo Go. If you see errors:

Restart Expo Go
Clear cache: npx expo start -c
Reinstall dependencies

TypeScript Errors

Make sure peer dependencies are installed:

bash

npm install --save-dev @types/react @types/react-native