Configuration

The @turbostarter/analytics-web package offers a streamlined and flexible approach to tracking events in your TurboStarter web 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.

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.

Client-side context

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

import { memo } from "react";
 
import { Provider as AnalyticsProvider } from "@turbostarter/analytics-web";
 
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 client-side code. This configuration allows you to safely utilize the Analytics API within your client components, enabling comprehensive event tracking and data collection.