Configuration

The @turbostarter/analytics-mobile package offers a streamlined and flexible approach to tracking events in your TurboStarter mobile app using various analytics providers. It abstracts the complexities of different analytics services and provides a consistent interface for event tracking.

In this section, we'll guide you through the configuration process for each supported provider.

Note that the configuration is validated against a schema, so you'll see error messages in the console if anything is misconfigured.

Permissions

First and foremost, to start tracking any metrics from your app (and to do so legally), you need to ask your users for permission. It's required, and you're not allowed to collect any data without it.

To make this process as simple as possible, TurboStarter comes with a useTrackingPermissions hook that you can use to access the user's consent status. It will handle asking for permission automatically as well as process updates made through the general phone settings.

import { useTrackingPermissions } from "@turbostarter/analytics-mobile";
 
export const MyComponent = () => {
  const granted = useTrackingPermissions();
 
  if (granted) {
    // Start tracking
  } else {
    // Disable tracking
  }
};

Also, for Apple, you must declare the tracking justification via App Tracking Transparency. It comes pre-configured in TurboStarter via the Expo Config Plugin, where you can provide a custom message to the user:

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  plugins: [
    [
      "expo-tracking-transparency",
      {
        /* 🍎 Describe why you need access to the user's data */
        userTrackingPermission:
          "This identifier will be used to deliver personalized ads to you.",
      },
    ],
  ],
});

This way, we ensure that the user is aware of the data we collect and can make an informed decision. If you don't provide this information, your app is likely to be rejected by Apple and/or Google during the review process.

Providers

TurboStarter supports multiple analytics providers, each with its own unique configuration. Below, you'll find detailed information on how to set up and use each supported provider. Choose the one that best suits your needs and follow the instructions in the respective accordion section.

Context

To enable tracking events, capturing screen views and other analytics features, you need to wrap your app with the Provider component that's implemented by every provider and available through the @turbostarter/analytics-mobile package:

import { memo } from "react";
 
import { Provider as AnalyticsProvider } from "@turbostarter/analytics-mobile";
 
interface ProvidersProps {
  readonly children: React.ReactNode;
}
 
export const Providers = memo<ProvidersProps>(({ children }) => {
  return (
    <OtherProviders>
      <AnalyticsProvider>{children}</AnalyticsProvider>
    </OtherProviders>
  );
});
 
Providers.displayName = "Providers";

By implementing this setup, you ensure that all analytics events are properly tracked from your mobile app code. This configuration allows you to safely utilize the Analytics API within your components, enabling comprehensive event tracking and data collection.