Expo SDK Example App

A comprehensive React Native Expo application demonstrating all Trackier SDK features with complete implementation examples.

Overview

The AppTrove Expo SDK Simulator is a fully functional Expo app that showcases:

• Complete SDK Integration - All Trackier SDK features implemented
• Real-world Examples - Production-ready JavaScript code patterns
• Cross-platform Support - Android and iOS compatibility
• Modern UI - User-friendly interfaces for testing features
• Comprehensive Logging - Detailed debugging information
• Apple Ads Token Integration - iOS App Tracking Transparency support
• Uninstall Tracking - Firebase Analytics integration for Android

Key Features Demonstrated

SDK Initialization

Complete setup with environment variables, platform-specific configurations, and user data integration.

Event Tracking

• Built-in Events - 15+ predefined events with revenue tracking
• Custom Events - Flexible custom event implementation
• Purchase Events - Product-specific tracking with detailed parameters
• Revenue Tracking - Multi-currency support
• Parameter System - Dynamic parameters (up to 10)
• Custom Data Objects - JSON data support

Deep Linking

• Immediate Deep Links - Direct app navigation
• Deferred Deep Links - Post-install attribution
• URL Resolution - Advanced link parsing with query-string
• Navigation Handling - Seamless user experience

Dynamic Links

• Link Creation - Template-based generation
• Link Resolution - Dynamic link URL parsing
• Multi-platform Support - Android, iOS, Desktop
• Attribution Parameters - Campaign tracking

Advanced Features

• Apple Ads Token - iOS advertising ID integration with ATT
• Uninstall Tracking - Android Firebase Analytics integration
• Campaign Data - Complete parameter retrieval
• User Data Management - Profile integration
• Encryption Support - AES_GCM encryption
• Facebook App ID - Meta attribution tracking

Repository Structure

expo-sdk-simulator/
├── App.js                          # Main app with SDK initialization
├── screens/
│   ├── HomeScreen.js               # Main dashboard with navigation
│   ├── BuiltInEventsScreen.js      # Built-in event tracking (15 events)
│   ├── CustomEventsScreen.js       # Custom event tracking with parameters
│   ├── CompleteEventScreen.js      # Comprehensive event example
│   ├── DeepLinkingScreen.js        # Deep link handling and parsing
│   ├── DynamicLinkScreen.js        # Dynamic link resolver and creator
│   ├── ProductPageScreen.js        # Product page with view tracking
│   ├── AddToCartScreen.js          # Add to cart events
│   ├── CakeScreen.js               # Product details with purchase tracking
│   └── CampaignDataScreen.js       # Campaign data management
├── assets/
│   └── Images/                     # App screenshots and assets
├── android/                        # Android configuration
│   ├── app/build.gradle            # Dependencies and build config
│   ├── app/src/main/AndroidManifest.xml # Permissions and deep links
│   ├── app/proguard-rules.pro      # ProGuard rules for obfuscation
│   └── gradle.properties           # Node.js path configuration
├── ios/                           # iOS configuration
│   └── exposdksimulator/Info.plist # ATT permission and app config
├── package.json                   # Dependencies
└── app.json                       # Expo configuration

Quick Start

1. Clone the Repository

git clone https://github.com/ApptroveLabs/expo-sdk-simulator.git
cd expo-sdk-simulator

2. Install Dependencies

npm install

3. Configure Trackier SDK

Update App.js with your Trackier credentials:

const trackierConfig = new TrackierConfig(
  "your-app-token-here", // Replace with your app token
  TrackierConfig.EnvironmentDevelopment
);

// Configure app secret
trackierConfig.setAppSecret(
  "your-secret-id-here", // Replace with your secret ID
  "your-secret-key-here" // Replace with your secret key
);

// Configure app ID
trackierConfig.setAppId("your-app-id-here");

4. Run the App

# iOS
npx expo run:ios

# Android
npx expo run:android

# Development server
npx expo start

Trackier Credentials

Replace the placeholder values in App.js with your actual Trackier credentials from your dashboard. Never commit real credentials to version control.

Platform Requirements

• iOS: Requires iOS 14.5+ for App Tracking Transparency
• Android: Requires API level 21+ for Google Play Services
• Expo: Compatible with Expo SDK 54+

Implementation Examples

SDK Initialization

// App.js
const initializeTrackierSDK = async () => {
  const trackierConfig = new TrackierConfig(
    "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    TrackierConfig.EnvironmentDevelopment
  );
  
  // Configure all settings
  trackierConfig.setAppSecret(
    "XXXXXXXXXXXXXXXXXXXXXXXX", 
    "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  );
  trackierConfig.setAppId("XXXXXXXXXX");
  trackierConfig.setEncryptionKey("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
  trackierConfig.setEncryptionType(TrackierConfig.EncryptionType.AES_GCM);
  trackierConfig.setFacebookAppId("XXXXXXXXXXXXXXX");
  trackierConfig.setAndroidId("CUSTOM_ANDROID_ID");
  
  // Set deferred deep link callback
  trackierConfig.setDeferredDeeplinkCallbackListener((uri) => {
    console.log("Deferred Deep Link received:", uri);
    handleDeepLink(uri);
  });
  
  // Initialize SDK
  TrackierSDK.initialize(trackierConfig);
};

Apple Ads Token Integration (iOS)

// App.js
const setupAppleAdsToken = async () => {
  if (Platform.OS !== 'ios') return;
  
  try {
    const { requestTrackingPermission, getAdvertisingId } = require('react-native-tracking-transparency');
    
    const permissionStatus = await requestTrackingPermission();
    
    if (permissionStatus === 'authorized') {
      const advertisingId = await getAdvertisingId();
      if (advertisingId && TrackierSDK.updateAppleAdsToken) {
        TrackierSDK.updateAppleAdsToken(advertisingId);
        console.log("Apple Ads Token sent to Trackier:", advertisingId);
      }
    } else {
      console.log("App Tracking Transparency not authorized");
    }
  } catch (error) {
    console.warn("Apple Ads Token setup failed:", error);
  }
};

Uninstall Tracking (Android)

// App.js
const setupUninstallTracking = async () => {
  if (Platform.OS !== 'android') return;
  
  try {
    const trackierId = await TrackierSDK.getTrackierId();
    console.log("Trackier ID for uninstall tracking:", trackierId);
    
    // For production, integrate with your preferred analytics platform
    // Example: await analytics().setUserProperty('ct_objectId', trackierId);
  } catch (error) {
    console.log("Error setting up uninstall tracking:", error);
  }
};

Event Tracking

// Built-in event tracking
const trackBuiltInEvent = () => {
  const event = new TrackierEvent(TrackierEvent.PURCHASE);
  event.revenue = 29.99;
  event.currency = "USD";
  event.orderId = "ORDER_123";
  event.param1 = "premium_user";
  event.param2 = "mobile_app";
  
  TrackierSDK.trackEvent(event);
};

// Custom event tracking
const trackCustomEvent = () => {
  const event = new TrackierEvent("CUSTOM_EVENT_ID");
  event.revenue = 15.99;
  event.currency = "USD";
  event.param1 = "custom_param1";
  event.param2 = "custom_param2";
  
  // Custom key-value pairs
  event.setEventValue("signup_time", Date.now());
  event.setEventValue("sdk", "ExpoNative");
  
  // Custom data object
  event.ev = {
    signup_time: Date.now(),
    device: "Expo-ReactNative",
    referral: "Campaign_XYZ",
  };
  
  TrackierSDK.trackEvent(event);
};

Complete Event Example

// CompleteEventScreen.js
const handleCompleteRegistrationExample = () => {
  const event = new TrackierEvent(TrackierEvent.COMPLETE_REGISTRATION);
  
  // Built-in fields
  event.orderId = "REG_001";
  event.currency = "USD";
  event.couponCode = "WELCOME10";
  event.discount = 5.0;
  event.revenue = 0.0;
  
  // Custom parameters
  event.param1 = "Test1";
  event.param2 = "Test2";
  event.param3 = "Test3";
  event.param4 = "Test4";
  event.param5 = "Test5";
  event.param6 = "Test6";
  event.param7 = "Test7";
  event.param8 = "Test8";
  event.param9 = "Test9";
  event.param10 = "Test10";
  
  // Custom key-value pairs
  event.setEventValue("signup_time", Date.now());
  event.setEventValue("sdk", "ExpoNative");
  
  // Custom data object
  event.ev = {
    signup_time: Date.now(),
    device: "Expo-ReactNative",
    referral: "Campaign_XYZ",
  };
  
  // Set user data
  TrackierSDK.setUserId("USER12345");
  TrackierSDK.setUserEmail("user@example.com");
  TrackierSDK.setUserName("Jane Doe");
  TrackierSDK.setUserPhone("+1234567890");
  TrackierSDK.setIMEI("123456789012345", "987654321098765");
  TrackierSDK.setMacAddress("00:1A:2B:3C:4D:5E");
  
  // Additional user details
  const jsonData = {"phone": "+91-8137872378", "name": "Embassies"};
  TrackierSDK.setUserAdditionalDetails("data", jsonData);
  
  // Track the event
  TrackierSDK.trackEvent(event);
};

Deep Link Handling

// App.js
const handleDeepLink = (url) => {
  try {
    let parsedUrl = new URL(url);
    let productId = parsedUrl.searchParams.get('product_id');
    let quantity = parsedUrl.searchParams.get('quantity');
    let actionData = parsedUrl.searchParams.get('actionData');
    let dlv = parsedUrl.searchParams.get('dlv');
    
    console.log("Deep link parameters:", {
      productId,
      quantity,
      actionData,
      dlv
    });
    
    // Navigate based on deep link
    if (parsedUrl.pathname === '/d') {
      navigationRef.current?.navigate('CakeScreen', {
        productId,
        quantity,
        actionData,
        dlv,
      });
    }
  } catch (error) {
    console.error("Error parsing deep link:", error);
  }
};

Dynamic Link Resolution

// DynamicLinkScreen.js
const resolveDynamicLink = async (url) => {
  try {
    const result = await TrackierSDK.resolveDeeplinkUrl(url);
    console.log("Resolved dynamic link:", result);
    
    // Process resolved URL parameters
    const parsedUrl = new URL(result);
    const params = Object.fromEntries(parsedUrl.searchParams);
    
    setResolvedData(params);
  } catch (error) {
    console.error("Error resolving dynamic link:", error);
  }
};

Campaign Data Retrieval

// CampaignDataScreen.js
const getCampaignData = async () => {
  try {
    const campaignData = {
      ad: await TrackierSDK.getAd(),
      adId: await TrackierSDK.getAdID(),
      campaign: await TrackierSDK.getCampaign(),
      campaignId: await TrackierSDK.getCampaignID(),
      adSet: await TrackierSDK.getAdSet(),
      adSetId: await TrackierSDK.getAdSetID(),
      channel: await TrackierSDK.getChannel(),
      p1: await TrackierSDK.getP1(),
      p2: await TrackierSDK.getP2(),
      p3: await TrackierSDK.getP3(),
      p4: await TrackierSDK.getP4(),
      p5: await TrackierSDK.getP5(),
      clickId: await TrackierSDK.getClickId(),
      dlv: await TrackierSDK.getDlv(),
      pid: await TrackierSDK.getPid(),
      isRetargeting: await TrackierSDK.getIsRetargeting(),
    };
    
    setCampaignData(campaignData);
    console.log("Campaign data retrieved:", campaignData);
  } catch (error) {
    console.error("Error retrieving campaign data:", error);
  }
};

SDK Initialization Order

Initialize the Trackier SDK before setting up Apple Ads Token or uninstall tracking to ensure proper configuration.

Deep Link Handling

The deferred deep link callback should be set up before SDK initialization to ensure proper deep link processing on app launch.

Platform Configuration

Android Configuration

Dependencies (android/app/build.gradle)

dependencies {
    // Google Play Services Ads Identifier
    implementation 'com.google.android.gms:play-services-ads-identifier:18.0.1'
    // Google Play Install Referrer
    implementation 'com.android.installreferrer:installreferrer:2.2'
}

Permissions and Deep Links (android/app/src/main/AndroidManifest.xml)

<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>

<application>
    <meta-data
        android:name="com.google.android.gms.version"
        android:value="@integer/google_play_services_version" />
        
    <!-- Deep Link Configuration -->
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data
                android:host="trackier58.u9ilnk.me"
                android:pathPrefix="/d"
                android:scheme="https" />
        </intent-filter>
    </activity>
</application>

ProGuard Rules (android/app/proguard-rules.pro)

# Trackier SDK ProGuard rules
-keep class com.trackier.sdk.** { *; }

# Google Play Services ProGuard rules
-keep class com.google.android.gms.common.ConnectionResult {
    int SUCCESS;
}
-keep class com.google.android.gms.ads.identifier.AdvertisingIdClient {
    com.google.android.gms.ads.identifier.AdvertisingIdClient$Info getAdvertisingIdInfo(android.content.Context);
}
-keep class com.google.android.gms.ads.identifier.AdvertisingIdClient$Info {
    java.lang.String getId();
    boolean isLimitAdTrackingEnabled();
}
-keep public class com.android.installreferrer.** { *; }

iOS Configuration

App Tracking Transparency (ios/exposdksimulator/Info.plist)

<key>NSUserTrackingUsageDescription</key>
<string>This app would like to track you across apps and websites owned by other companies to provide personalized ads and improve our services.</string>

Dependencies

Core Dependencies

{
  "dependencies": {
    "trackier-expo-sdk": "^1.6.76",
    "react-native-tracking-transparency": "^0.1.2",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~54.0.7",
    "expo-linking": "~8.0.8",
    "react-native-paper": "^5.12.5"
  }
}

Event Summary

Event Type	Event ID/Name	Location	Trigger
Built-in Events	TrackierEvent.*	BuiltInEventsScreen.js	User selection
Custom Events	User-defined	CustomEventsScreen.js	Custom event ID
Complete Event	TrackierEvent.COMPLETE_REGISTRATION	CompleteEventScreen.js	Registration example
Deep Link	Auto-detected	App.js	Deep link received
Dynamic Link	Template-based	DynamicLinkScreen.js	Link creation/resolution
Campaign Data	Various methods	CampaignDataScreen.js	Data retrieval

Logging and Debugging

Key Log Messages

• SDK Initialization: "Trackier SDK initialized successfully"
• Deep Link Received: Complete deep link data dump
• Event Tracking: All tracked events with parameters
• Apple Ads Token: ATT permission flow and IDFA retrieval
• Uninstall Tracking: Trackier ID for analytics integration
• Campaign Data: Retrieved attribution parameters

Console Output Examples

LOG  Trackier SDK initialized successfully
LOG  Deferred Deep Link received: trackier58.u9ilnk.me/d?dlv=CakeActivity&product_id=chocochip&quantity=2
LOG  Deep link parameters: {"productId": "chocochip", "quantity": "2", "actionData": "noAction", "dlv": "CakeActivity"}
LOG  Apple Ads Token sent to Trackier: 12345678-1234-1234-1234-123456789012
LOG  Trackier ID for uninstall tracking: abc123def456
LOG  Campaign data retrieved: {"ad": "Test Ad", "campaign": "Summer Sale", "p1": "param1_value"}

Testing Features

Built-in Events Testing

1. Navigate to "Built-in Events" from home screen
2. Select an event type from dropdown
3. Enter revenue amount and select currency
4. Add custom parameters (up to 10)
5. Submit event and verify in logs

Custom Events Testing

1. Navigate to "Custom Events" from home screen
2. Enter custom event ID
3. Set revenue and currency
4. Add parameters as needed
5. Submit and verify tracking

Deep Link Testing

1. Use test URL: https://trackier58.u9ilnk.me/d/g5Hizea0AX
2. Navigate to "Deep Linking" screen
3. Test deep link processing
4. Verify parameter extraction and navigation

Dynamic Link Testing

1. Navigate to "Dynamic Link Resolver"
2. Enter a dynamic link URL
3. Test URL resolution
4. Verify structured data display

Apple Ads Token Testing (iOS)

1. Launch on iOS simulator/device
2. Check console logs for ATT permission flow
3. Verify IDFA retrieval and sending to Trackier
4. Test with different permission states

Uninstall Tracking Testing (Android)

1. Launch on Android device/emulator
2. Check console logs for Trackier ID
3. Verify manual tracking setup
4. Test with Firebase Analytics integration

Platform Support

iOS

• Deep Link Handling - URL schemes and universal links
• Event Tracking - Built-in and custom events
• Apple Ads Token - IDFA integration with ATT
• Dynamic Link Creation - Template-based link generation
• Campaign Data - Complete attribution data

Android

• Deep Link Handling - Intent filters and URL schemes
• Event Tracking - Built-in and custom events
• Google Advertising ID - Attribution tracking
• Uninstall Tracking - Firebase Analytics integration
• Dynamic Link Creation - Template-based link generation

Security Features

Encryption Support

The SDK supports encrypted event tracking:

trackierConfig.setEncryptionKey("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");
trackierConfig.setEncryptionType(TrackierConfig.EncryptionType.AES_GCM);

App Secrets

Secure API communication:

trackierConfig.setAppSecret(secretId, secretKey);

ProGuard Rules

Android code obfuscation with ProGuard rules for SDK protection.

Security Best Practices

Always store sensitive credentials securely and never commit them to version control. Use encryption for production environments and implement proper ProGuard rules for Android.

Troubleshooting

Common Issues

SDK Not Initializing

• Verify Trackier credentials in App.js
• Check console logs for credential errors
• Ensure proper import statements

Deep Links Not Working

• Verify URL format and parameters
• Check console logs for parsing errors
• Test with provided sample URLs

Events Not Tracking

• Verify event IDs from Trackier panel
• Check network connectivity
• Monitor console logs for errors

Apple Ads Token Issues (iOS)

• Ensure iOS 14.5+ for ATT support
• Check Info.plist configuration
• Verify react-native-tracking-transparency package

Uninstall Tracking Issues (Android)

• Verify Google Play Services dependencies
• Check Android manifest permissions
• Ensure proper Firebase configuration

Expo Build Issues

• Clean and rebuild: npx expo run:ios --clear or npx expo run:android --clear
• Check Expo SDK version compatibility
• Verify platform-specific configurations

Debug Mode

Enable debug logging:

// Add to your App.js
console.log('Debug message', { data: 'value' });

Debugging Tips

Use the Expo development tools and console logs to debug SDK initialization, event tracking, and deep link processing. The app provides comprehensive logging for all SDK operations.

Support

For technical support and questions:

• Support Email: support@trackier.com
• GitHub Issues: Create an issue in the repository

---

This example app provides comprehensive tracking, deep linking, and dynamic link functionality for Expo applications using the Trackier SDK, demonstrating best practices for mobile app analytics and attribution with a modern, user-friendly interface.