Tracking events

The strategy for tracking events, that every provider has to implement, is extremely simple:

export type AllowedPropertyValues = string | number | boolean;
 
type TrackFunction = (
  event: string,
  data?: Record<string, AllowedPropertyValues>,
) => void;
 
export interface AnalyticsProviderStrategy {
  Provider: ({ children }: { children: React.ReactNode }) => React.ReactNode;
  track: TrackFunction;
}

You don't need to worry much about this implementation, as all the providers are already configured for you. However, it's useful to be aware of this structure if you plan to add your own custom provider.

As shown above, each provider must supply two key elements:

Provider - a component that wraps your app.
track - a function responsible for sending event data to the provider.

To track an event, you simply need to invoke the track method, passing the event name and an optional data object:

import { track } from "@turbostarter/analytics-mobile";
 
export const MyComponent = () => {
  return (
    <Pressable onPress={() => track("button.click", { country: "US" })}>
      Track event
    </Pressable>
  );
};

Congratulations! You've now mastered event tracking in your TurboStarter mobile app. With this knowledge, you're well-equipped to analyze user behaviors and gain valuable insights into your application's usage patterns. Happy analyzing! 📊

On this page