Tracking events

The implementation strategy for each analytics provider varies depending on whether it's designed for client-side or server-side use. We'll explore both approaches, as they are crucial for ensuring accurate and comprehensive analytics data in your web SaaS application.

Client-side tracking

The client strategy for tracking events, which every provider must implement, is straightforward:

export type AllowedPropertyValues = string | number | boolean;
 
type TrackFunction = (
  event: string,
  data?: Record<string, AllowedPropertyValues>,
) => void;
 
export interface AnalyticsProviderClientStrategy {
  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-web";
 
export const MyComponent = () => {
  return (
    <button onClick={() => track("button.click", { country: "US" })}>
      Track event
    </button>
  );
};

Server-side tracking

The server strategy for tracking events, that every provider has to implement, is even simpler:

export interface AnalyticsProviderServerStrategy {
  track: TrackFunction;
}

This server-side strategy allows you to track events outside of the browser environment, which is particularly useful for scenarios involving server actions or React Server Components.

To track an event on the server side, simply call the track method, providing the event name and an optional data object:

import { track } from "@turbostarter/analytics-web/server";
 
track("button.click", {
  country: "US",
  region: "California",
});

Ensure correct import!

Make sure to use the correct import for the track function. We're using the same name for both client and server tracking, but they are different functions. For server-side, just add /server to the import path (@turbostarter/analytics-web/server).

import { track } from "@turbostarter/analytics-web";

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

Client-side tracking

Server-side tracking

On this page