React Native Example App

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

Overview

The React Native SDK Simulator is a fully functional example app that showcases:

• Complete SDK Integration - All Trackier SDK features implemented
• Real-world Examples - Production-ready code patterns
• Cross-platform Support - Android and iOS compatibility
• Modern UI - User-friendly interfaces for testing features
• Comprehensive Logging - Detailed debugging information

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 (50+ currencies)
• Parameter System - Dynamic parameters (up to 10)

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
• Multi-platform Support - Android, iOS, Desktop
• Social Media Integration - Rich previews
• Attribution Parameters - Campaign tracking

Advanced Features

• Environment Management - Secure credential management with dotenv
• Error Handling - Proper error logging and user feedback
• Logging - Detailed logging for debugging and monitoring
• Cross-Platform Support - Android and iOS compatibility

Repository Structure

react-native-simulator/
├── Screens/
│   ├── HomeScreen.js              # Main navigation and deferred deeplink display
│   ├── BuildInEvent.js            # Built-in event tracking interface
│   ├── Customevent.js             # Custom event tracking interface
│   ├── AddtoCartScreen.js         # Purchase event tracking
│   ├── DeepLinkScreen.js          # Deep link testing interface
│   ├── DynamicLinkScreen.js       # Dynamic link creation and resolution
│   ├── ProductPage.js             # Product display
│   ├── DetailsScreen.js           # Product details
│   ├── CakeScreen.js              # Cake-specific screen
│   └── Splash.js                  # App splash screen
├── App.js                         # SDK initialization and deep link handling
├── package.json                   # Dependencies
├── .env                           # Environment variables (not in repo)
└── babel.config.js                # Babel configuration with dotenv

Quick Start

1. Clone the Repository

git clone https://github.com/ApptroveLabs/react-native-simulator.git
cd react-native-simulator

2. Install Dependencies

npm install

3. Configure Environment

Create .env file in project root with your Trackier credentials:

TRDEVKEY=your-sdk-key-here
SECRETID=your-secret-id-here
SECRETKEY=your-secret-key-here

4. iOS Setup (macOS only)

cd ios && pod install && cd ..

5. Run the App

# Start Metro server
npm start

# Run on Android
npm run android

# Run on iOS (macOS only)
npm run ios

Implementation Examples

SDK Initialization

// App.js
import { TRDEVKEY, SECRETID, SECRETKEY } from 'react-native-dotenv';

const trackierConfig = new TrackierConfig(
  TRDEVKEY,
  TrackierConfig.EnvironmentProduction
);

// Deferred deep link callback setup
trackierConfig.setDeferredDeeplinkCallbackListener(function(uri) {
  console.log("Deferred Deeplink Callback received");
  console.log("URL:", uri);
  
  // Process deep link data and navigate accordingly
  if (uri && uri.includes('product_id') && uri.includes('quantity')) {
    console.log("🎂 Cake deeplink detected, processing...");
    handleDeepLink({ url: uri });
  }
});

// Platform-specific configurations
trackierConfig.setFacebookAppId("FbTest123");  // For Android Only
trackierConfig.setAndroidId("AndroidTest123");  // For Android only
trackierConfig.setAppSecret(SECRETKEY, SECRETID);

// User data setup
TrackierSDK.setUserId("89992839923927");
TrackierSDK.setUserEmail("satyam@trackier.com");
TrackierSDK.setUserName("Satyam_React");
TrackierSDK.setUserPhone("8252786831");

// Initialize Trackier SDK
TrackierSDK.initialize(trackierConfig);

Event Tracking

// Built-in event tracking
const trackierEvent = new TrackierEvent(TrackierEvent.PURCHASE);
trackierEvent.revenue = revenueValue;
trackierEvent.currency = selectedCurrency;

// Dynamic parameter assignment (up to 10 parameters)
params.forEach((paramKey, index) => {
  if (paramValues[paramKey]) {
    trackierEvent[`param${index + 1}`] = paramValues[paramKey];
  }
});

TrackierSDK.trackEvent(trackierEvent);

// Custom event tracking
const customEvent = new TrackierEvent(eventId);
customEvent.revenue = revenueValue;
customEvent.currency = selectedCurrency;
customEvent.orderId = 'CustomOrder123';

TrackierSDK.trackEvent(customEvent);

// Purchase event with detailed parameters
const purchase = () => {
  var trackierEvent = new TrackierEvent("Q4YsqBKnzZ"); 
  
  trackierEvent.param1 = "Britannia Cupcake";
  trackierEvent.param2 = "Purchase Successfully";
  trackierEvent.couponCode = "@3030303di";
  trackierEvent.revenue = 30.0;
  trackierEvent.discount = 2.0;
  
  // Custom JSON data
  var jsonData = {"phone": "+91-8137872378", "name": "Satyam"};
  trackierEvent.ev = jsonData;
  
  TrackierSDK.trackEvent(trackierEvent);
  Alert.alert("Thanks for your purchase!");
};

Deep Link Handling

// Deep link parameter extraction
const handleDeepLink = ({ url }) => {
  if (url) {
    try {
      console.log("Processing deep link URL:", url);
      
      // Parse query parameters using query-string
      const parsedParams = queryString.parseUrl(url).query;
      console.log("Parsed parameters:", parsedParams);

      const productId = parsedParams.product_id || 'default';
      const quantity = parsedParams.quantity || 1;
      const actionData = parsedParams.actionData || 'noAction';
      const dlv = parsedParams.dlv || 'noDelivery';

      console.log("Cake parameters detected:");
      console.log(" - Product ID:", productId);
      console.log(" - Quantity:", quantity);
      console.log(" - Action Data:", actionData);
      console.log(" - DLV:", dlv);

      // Set navigation parameters
      setDeepLinkParams({
        product_id: productId,
        quantity: quantity,
        actionData: actionData,
        dlv: dlv,
        deferredDeeplinkUri: deferredDeeplinkUri,
      });

      setNavigateToCake(true); // Trigger navigation
      console.log("Deep link processed successfully");
    } catch (error) {
      console.error("Error parsing deep link:", error);
    }
  }
};

// Deep link screen handler
const _handleDeepLink = useCallback((link) => {
  setLinkMessage(`Deep Link: ${link}`);
  const url = new URL(link);
  const productId = url.searchParams.get('product_id');
  const quantity = url.searchParams.get('quantity');
  const actionData = url.searchParams.get('actionData');
  const dlv = url.searchParams.get('dlv');

  if (url.pathname === '/d') {
    navigation.navigate('CakeScreen', {
      productId, quantity, actionData, dlv,
    });
  }
}, [navigation]);

Dynamic Link Creation

const createSampleDynamicLink = async () => {
  setLoading(true);
  try {
    const config = {
      templateId: "M5Osa2",
      link: "https://trackier.u9ilnk.me/product/123",
      domainUriPrefix: "https://trackier.u9ilnk.me",
      deepLinkValue: "product_detail?product_id=123&quantity=2",
      
      // Platform-specific parameters
      androidParameters: {
        redirectLink: "https://play.google.com/store/apps/details?id=com.react_simulator"
      },
      iosParameters: {
        redirectLink: "https://apps.apple.com/app/id123456789"
      },
      desktopParameters: {
        redirectLink: "https://trackier.u9ilnk.me/desktop"
      },
      
      // Social media metadata
      socialMetaTagParameters: {
        title: "Amazing Product",
        description: "Check out this amazing product!",
        imageLink: "https://example.com/product-image.jpg"
      },
      
      // SDK parameters
      sdkParameters: {
        param1: "value1",
        param2: "value2",
        param3: "value3"
      },
      
      // Attribution parameters
      attributionParameters: {
        channel: "social",
        campaign: "summer_sale",
        mediaSource: "facebook",
        p1: "custom_param1",
        p2: "custom_param2",
        p3: "custom_param3"
      }
    };

    const result = await TrackierSDK.createDynamicLink(config);
    setDynamicLink(result);
    Alert.alert('Success', 'Sample dynamic link created successfully!');
  } catch (error) {
    console.error('Error creating dynamic link:', error);
    Alert.alert('Error', 'Failed to create dynamic link: ' + error.message);
  } finally {
    setLoading(false);
  }
};

Deep Link Resolution

const resolveDeeplink = async () => {
  if (!dynamicLink) {
    Alert.alert('Error', 'Please create a dynamic link first');
    return;
  }

  setLoading(true);
  try {
    const result = await TrackierSDK.resolveDeeplinkUrl(dynamicLink);
    setResolvedData(result);
    Alert.alert('Success', 'Deeplink resolved successfully!');
  } catch (error) {
    console.error('Error resolving deeplink:', error);
    Alert.alert('Error', 'Failed to resolve deeplink: ' + error.message);
  } finally {
    setLoading(false);
  }
};

// Test with sample URL
const testResolveWithSampleUrl = async () => {
  const sampleUrl = 'https://trackier58.u9ilnk.me/d/g5Hizea0AX';
  setDynamicLink(sampleUrl);
  
  setLoading(true);
  try {
    const result = await TrackierSDK.resolveDeeplinkUrl(sampleUrl);
    setResolvedData(result);
    Alert.alert('Success', 'Sample URL resolved successfully!');
  } catch (error) {
    console.error('Error resolving sample URL:', error);
    Alert.alert('Error', 'Failed to resolve sample URL: ' + error.message);
  } finally {
    setLoading(false);
  }
};

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 Page"
3. Test deep link processing
4. Verify parameter extraction and navigation

Dynamic Link Testing

1. Navigate to "Dynamic Link & Resolver"
2. Create sample dynamic link
3. Test URL resolution
4. Verify structured data display
5. Test clipboard functionality

Platform Support

Android

• ✅ Deep Link Handling - Intent filters and URL schemes
• ✅ Event Tracking - Built-in and custom events
• ✅ Dynamic Link Creation - Template-based link generation
• ✅ Facebook App ID Integration - Attribution tracking

iOS

• ✅ iPhone Simulator (iOS 18.1)
• ✅ Deep Link Handling - URL schemes and universal links
• ✅ Event Tracking - Built-in and custom events
• ✅ Dynamic Link Creation - Template-based link generation
• ✅ Apple Ads Token Integration - Ready for implementation

Dependencies

Core Dependencies

{
  "dependencies": {
    "react-native-trackier": "github:trackier/react-native-sdk",
    "@react-native-clipboard/clipboard": "^1.15.0",
    "react-native-vector-icons": "^10.2.0",
    "react-native-safe-area-context": "^5.0.0",
    "react-native-screens": "^4.4.0",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-reanimated": "^3.16.6",
    "react-native-paper": "^5.12.5",
    "react-native-toast-message": "^2.3.3",
    "react-native-dotenv": "^3.4.11",
    "query-string": "^7.1.3"
  }
}

Environment Variables

# .env file
TRDEVKEY=your-sdk-key-here
SECRETID=your-secret-id-here
SECRETKEY=your-secret-key-here

Babel Configuration

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module:react-native-dotenv', {
      moduleName: 'react-native-dotenv',
      path: '.env',
    }]
  ],
};

Event Summary

Event Type	Event ID/Name	Location	Trigger
Custom Purchase	Q4YsqBKnzZ	AddtoCartScreen.js	Cake purchase
Built-in Events	TrackierEvent.*	BuildInEvent.js	User selection
Custom Events	User-defined	Customevent.js	Custom event ID
Deep Link	Auto-detected	App.js	Deep link received
Dynamic Link	Template-based	DynamicLinkScreen.js	Link creation

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
• Dynamic Link Created: Successfully created dynamic links
• Navigation: Screen navigation events
• Parameter Parsing: Detailed parameter extraction logs

Console Output Examples

LOG  TRDEVKEY: xxxxxxxxxxxxxxxxxxxxx
LOG  SECRETID: xxxxxxxxxxxxxxxxxxxxx
LOG  SECRETKEY: xxxxxxxxxxxxxxxxxxxxx
LOG  Trackier SDK initialized successfully
LOG  Deferred Deeplink Callback received
LOG  URL: trackier58.u9ilnk.me/d?dlv=CakeActivity&product_id=chocochip&quantity=2
LOG  🎂 Cake deeplink detected, processing...
LOG   Processing deep link URL: trackier58.u9ilnk.me/d?dlv=CakeActivity&product_id=chocochip&quantity=2
LOG   Parsed parameters: {"dlv": "CakeActivity", "product_id": "chocochip", "quantity": "2"}
LOG   Cake parameters detected:
LOG    - Product ID: chocochip
LOG    - Quantity: 2
LOG    - Action Data: noAction
LOG    - DLV: CakeActivity
LOG  Setting navigation to CakeScreen...
LOG  Deep link processed successfully
LOG   Navigating to CakeScreen...

Troubleshooting

Common Issues

SDK Not Initializing

• Verify environment variables in .env file
• 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

iOS Build Issues

• Clean and rebuild: cd ios && rm -rf build && pod install
• Check Xcode project settings
• Verify iOS deployment target

Environment Variables Not Loading

• Ensure .env file exists in project root
• Check babel.config.js for dotenv plugin
• Restart Metro server after changes

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 React Native applications using the Trackier SDK, demonstrating best practices for mobile app analytics and attribution with a modern, user-friendly interface.