Skip to main content

Event Tracking

The AppTrove React Native SDK enables tracking of user interactions through events, providing insights into how users engage with your app. This section covers how to track built-in events, custom events, revenue events, and pass custom parameters, using event IDs retrieved from the Trackier MMP Panel.

Prerequisites​

  • AppTrove React Native SDK installed and initialized in your project
  • A Trackier MMP account with access to the Trackier Panel
  • React Native 0.60 or later
  • Basic knowledge of JavaScript and React Native development

Retrieve Event ID from Dashboard​

To track events, you need the event ID from the Trackier MMP Panel.

Steps to Retrieve Event ID​

  1. Log in to your Trackier Panel.
  2. Navigate to the Events section in the Dashboard.
  3. Copy the event ID for the desired built-in or custom event.

Built-in Events​

Built-in events are predefined in the Trackier dashboard and can be tracked directly using constants like TrackierEvent.PURCHASE, TrackierEvent.ADD_TO_CART, etc.

Available Parameters​

  • param1 to param10
  • revenue
  • currency
  • ev (for custom key-value pairs)

Supported Built-in Events​

  • LOGIN
  • REGISTER
  • LOGOUT
  • PURCHASE
  • CHECKOUT_STARTED
  • CHECKOUT_COMPLETED
  • ADD_TO_WISHLIST
  • CONTENT_VIEW
  • VIEW_CART
  • REMOVE_FROM_CART
  • SEARCH
  • PRODUCT_VIEW
  • UPDATE
  • INVITE
  • SHARE
  • START_TRIAL
  • SUBSCRIBE
  • COMPLETE_REGISTER
  • ACHIEVEMENT_UNLOCK
  • TUTORIAL_COMPLETE
  • APP_OPEN
  • TRAVEL_BOOKING
  • PRODUCT_SEARCH
  • REGISTRATION
  • ADD_TO_CART
  • LEVEL_ACHIEVED

Steps to Track Built-in Events​

  1. Create a TrackierEvent object with the built-in event ID (e.g., TrackierEvent.PURCHASE).
  2. Optionally, set parameters like param1, param2, or custom data.
  3. Call TrackierSDK.trackEvent to track the event.
JavaScript Example​
App.js
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {
  // Initialize SDK
  const trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  const trackBuiltInEvent = () => {
    const trackierEvent = new TrackierEvent(TrackierEvent.PURCHASE); // Built-in event
    trackierEvent.param1 = "XXXXXX";
    trackierEvent.param2 = "kkkkkkk";
    TrackierSDK.trackEvent(trackierEvent);
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight style={styles.button} onPress={trackBuiltInEvent}>
        <Text>Track Built-in Event</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 10,
    backgroundColor: '#ddd',
  },
});

Custom Events​

Custom events are user-defined in the Trackier dashboard to track app-specific actions tailored to your business logic.

Steps to Track Custom Events​

  1. Create a custom event in the Trackier Panel under the Events section.
  2. Note the event ID for the custom event.
  3. Use the TrackierEvent class with the custom event ID to track the event.
App.js
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {
  // Initialize SDK
  const trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  const trackCustomEvent = () => {
    const trackierEvent = new TrackierEvent("sEMWSCTXeu"); // Custom event ID for "AppOpen"
    trackierEvent.param1 = "XXXXXX";
    trackierEvent.param2 = "kkkkkkk";
    const value = { id: 1, phone: "+91-8130XXX721", name: "Embassies" };
    trackierEvent.setEventValue("data", value);
    TrackierSDK.trackEvent(trackierEvent);
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight style={styles.button} onPress={trackCustomEvent}>
        <Text>Track Custom Event</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 10,
    backgroundColor: '#ddd',
  },
});

3. Complete Event Tracking Example​

This comprehensive example demonstrates how to track a COMPLETE_REGISTRATION event with all available parameters, user data, and custom attributes.

CompleteEventTracking.js
function trackCompleteRegistration() {
  // Note: Ensure TrackierSDK.initialize is called before tracking events.

  // Create event with COMPLETE_REGISTRATION ID
  const event = new TrackierEvent(TrackierEvent.COMPLETE_REGISTRATION);
  // Alternatively: const event = new TrackierEvent("w43424"); // Pass your Event ID

  // Built-in fields for event tracking
  event.orderId = "REG_001";         // String: Unique registration ID
  event.productId = "FREE_PLAN";     // String: Plan identifier
  event.couponCode = "343434234";    // String: Coupon code used
  event.discount = 3.1415;           // number: Discount applied
  event.revenue = 34234234.32423;    // number: Revenue (inconsistent with free plan)
  event.currency = "USD";            // String: Currency code

  // Custom parameters for structured data
  event.param1 = "Test1";            // String: Dummy value
  event.param2 = "Test2";            // String: Dummy value
  event.param3 = "Test3";            // String: Dummy value
  event.param4 = "Test4";            // String: Dummy value
  event.param5 = "Test5";            // String: Dummy value
  event.param6 = "Test6";            // String: Dummy value
  event.param7 = "Test7";            // String: Dummy value
  event.param8 = "Test8";            // String: Dummy value
  event.param9 = "Test9";            // String: Dummy value
  event.param10 = "Test10";          // String: Dummy value

  // Custom key-value pairs for flexible data
  
  var jsonData = { "url": "+91-8130300721" ,  "name": "Embassies" };
  trackierEvent.ev = jsonData;
  
  // Custom key-value pairs for flexible data
  event.setEventValue("signup_time", 1631234567890); // Number: Timestamp
  event.setEventValue("sdk", "ReactNative");         // String: Device type

  // Set user details in Trackier SDK
  TrackierSDK.setUserId("USER123");              // String: User ID
  TrackierSDK.setUserEmail("user@example.com");  // String: User email
  TrackierSDK.setUserName("Jane Doe");           // String: User name
  TrackierSDK.setUserPhone("+1234567890");       // String: User phone
  TrackierSDK.setIMEI("123456789012345", "987654321098765"); // String, String: Device IMEI
  TrackierSDK.setMacAddress("00:1A:2B:3C:4D:5E"); // String: Device MAC address

  // Additional user details (includes DOB and Gender due to missing methods)
  const userDetails = {
    Plan: "FREE_PLAN",
    SignupMethod: "Email",
    AppVersion: "1.0.0",
    DOB: "1990-01-01",
    Gender: "Male"
  };
  TrackierSDK.setUserAdditionalDetails(userDetails);

  // Send the event to Apptrove
  TrackierSDK.trackEvent(event);
}

4. Revenue Events​

Revenue events allow you to track in-app revenue, including the amount and currency, to monitor monetization performance.

Steps to Track Revenue Events​

  1. Create a TrackierEvent object with the event ID (e.g., TrackierEvent.PURCHASE).
  2. Set the revenue and currency properties.
  3. Call TrackierSDK.trackEvent to track the revenue event.
JavaScript Example​
App.js
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {
  // Initialize SDK
  const trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  const trackRevenueEvent = () => {
    const revenueEvent = new TrackierEvent(TrackierEvent.PURCHASE);
    revenueEvent.param1 = "XXXXXX";
    revenueEvent.param2 = "kkkkkkk";
    revenueEvent.revenue = 2.5; // Revenue amount
    revenueEvent.currency = "USD"; // Currency code
    TrackierSDK.trackEvent(revenueEvent);
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight style={styles.button} onPress={trackRevenueEvent}>
        <Text>Track Revenue Event</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 10,
    backgroundColor: '#ddd',
  },
});
note

The README contains a minor error in the revenue event code (revenueEvent.trackEvent instead of TrackierSDK.trackEvent). The example above corrects this.

Custom Parameters​

Custom parameters allow you to add additional key-value pairs to events for richer context and analytics.

Steps to Add Custom Parameters​

  1. Create a TrackierEvent object with the event ID.
  2. Assign a JavaScript object with key-value pairs to the ev property of the TrackierEvent.
  3. Track the event using TrackierSDK.trackEvent.
JavaScript Example​
App.js
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {
  // Initialize SDK
  const trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  const trackCustomParamsEvent = () => {
    const trackierEvent = new TrackierEvent("sEMWSCTXeu"); // Custom event ID for "AppOpen"
    const jsonData = { phone: "+91-8137872378", name: "Embassies" };
    trackierEvent.ev = jsonData;
    TrackierSDK.trackEvent(trackierEvent);
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight style={styles.button} onPress={trackCustomParamsEvent}>
        <Text>Track Event with Custom Params</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 10,
    backgroundColor: '#ddd',
  },
});

Best Practices​

  • Validate Event IDs: Ensure event IDs are correctly copied from the Trackier Panel to avoid tracking errors.
  • Use Descriptive Parameters: Set meaningful values for param1 to param10 and custom parameters to facilitate analytics.
  • Test in Development Mode: Use TrackierConfig.EnvironmentDevelopment during testing to verify event tracking without affecting production data.
  • Monitor Event Limits: Avoid excessive event tracking to stay within Trackier's usage limits; prioritize key user actions.
  • Log Events for Debugging: Use console.log to confirm events are triggered and sent correctly during development.
  • Comply with Privacy Regulations: Ensure event data (e.g., revenue, custom parameters) complies with GDPR, CCPA, and other privacy laws.

Troubleshooting​

  • Events Not Appearing in Dashboard:
    • Verify the event ID matches the one in the Trackier Panel.
    • Ensure the SDK is initialized before tracking events.
    • Check that the environment (EnvironmentDevelopment or EnvironmentProduction) matches the dashboard settings.
  • Custom Parameters Not Tracked:
    • Confirm the ev property is assigned a valid JavaScript object with supported key-value pairs.
    • Check for syntax errors in the jsonData object.
  • Revenue Tracking Issues:
    • Verify the revenue and currency values are correctly set and use supported currency codes (e.g., "USD", "INR").
  • General Issues:
    • Check the console logs for errors related to TrackierSDK.trackEvent.

For further assistance, refer to the Trackier Documentation Portal or contact Trackier support at support@trackier.com.