Getting Started

Get up and running with the Tappd Mobile SDK in minutes.

Prerequisites

• A Tappd account (Sign up here)
• Your App ID from the dashboard
• React Native project (0.60+)
• iOS: Xcode and CocoaPods
• Android: Android Studio

Step 1: Get Your App ID

1. Log into your Tappd Dashboard
2. Navigate to Settings > Apps
3. Create a new mobile app or select an existing one
4. Copy the App ID (looks like: a1b2c3d4-e5f6-...)

Step 2: Install Dependencies

Install SDK

npm install @tappd/mobile-sdk @react-native-async-storage/async-storage

Install Device Info (Optional but Recommended)

For comprehensive device information:

npm install react-native-device-info

iOS Setup

cd ios && pod install && cd ..

Step 3: Initialize the SDK

Initialize the SDK in your main app file (typically App.js or App.tsx):

import React, { useEffect } from 'react';
import TappdSDK from '@tappd/mobile-sdk';

const tappd = new TappdSDK({
  appId: 'YOUR_APP_ID',
  apiUrl: 'https://sdk.gotappd.com/api/v1/sdk', // Optional
  autoTrack: true, // Auto-track app lifecycle (default: true)
  sessionTimeout: 30, // Session timeout in minutes (default: 30)
  enableAutoScreenTracking: true, // Auto-track screens (default: true)
  debug: false // Enable debug logging (default: false)
});

// Store globally or in context
global.tappd = tappd;

function App() {
  return (
    // Your app content
  );
}

export default App;

Note: Replace YOUR_APP_ID with your actual App ID from the dashboard.

Step 4: Identify Users

When a user logs in or signs up:

async function handleLogin(externalId, email, name) {
  await tappd.identify({
    external_id: externalId,  // Required: Your internal user ID from your database/system
    name: name,
    email: email,
    phone: '+1234567890',
    // Custom attributes
    age: 28,
    plan: 'premium'
  });
}

Understanding the parameters:

• external_id (externalId): Required - Your internal user identifier from your own system/database. This is the only identifier you need to provide. The SDK automatically generates an internal identifier for tracking.
• Other fields: Optional - name, email, phone, and any custom attributes you want to store.

Simplified API: You no longer need to pass a userId parameter. Just provide your external_id and the SDK handles the rest.

After identify() is called, all future track() events will be automatically associated with this user.

Step 5: Track Screens

Track screen views manually or automatically:

Manual Tracking

import { useFocusEffect } from '@react-navigation/native';

function HomeScreen() {
  useFocusEffect(
    React.useCallback(() => {
      global.tappd.trackScreen('HomeScreen', {
        category: 'main',
        section: 'dashboard'
      });
    }, [])
  );

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

Automatic Tracking

The SDK automatically tracks app lifecycle events when autoTrack: true:

• app.opened - App opened
• app.foreground - App came to foreground
• app.background - App went to background
• app.closed - App closed

Step 6: Track Events

Track custom events throughout your application:

// Track a purchase
await global.tappd.track('purchase', {
  amount: 99.99,
  currency: 'USD',
  productId: 'prod_123'
});

// Track a button click
await global.tappd.track('button_click', {
  buttonId: 'signup',
  location: 'onboarding'
});

Project Setup

Using Context (Recommended)

Create a Tappd context for easy access:

// contexts/TappdContext.js
import React, { createContext, useContext } from 'react';
import TappdSDK from '@tappd/mobile-sdk';

const TappdContext = createContext(null);

export function TappdProvider({ children }) {
  const tappd = new TappdSDK({
    appId: 'YOUR_APP_ID'
  });

  return (
    <TappdContext.Provider value={tappd}>
      {children}
    </TappdContext.Provider>
  );
}

export function useTappd() {
  return useContext(TappdContext);
}

// Usage in App.js
import { TappdProvider } from './contexts/TappdContext';

function App() {
  return (
    <TappdProvider>
      {/* Your app */}
    </TappdProvider>
  );
}

Using Hooks

// hooks/useTappd.js
import { useState, useEffect } from 'react';
import TappdSDK from '@tappd/mobile-sdk';

export function useTappd() {
  const [tappd] = useState(() => {
    return new TappdSDK({
      appId: 'YOUR_APP_ID'
    });
  });

  return tappd;
}

// Usage
import { useTappd } from './hooks/useTappd';

function MyScreen() {
  const tappd = useTappd();

  const handleClick = async () => {
    await tappd.track('button_click', { buttonId: 'cta' });
  };

  return <Button onPress={handleClick}>Click Me</Button>;
}

Verify Installation

Enable debug mode to verify the SDK is working:

const tappd = new TappdSDK({
  appId: 'YOUR_APP_ID',
  debug: true // Enable debug logging
});

// Check console/logs for:
// [Tappd SDK] Initialized with App ID: a1b2c3d4...
// [Tappd SDK] Event tracked: purchase

Next Steps

• Configuration Options - Customize SDK behavior
• API Reference - Complete method documentation
• Push Notifications - Set up push notifications
• React Navigation - Integrate with React Navigation
• Examples - See real-world use cases