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 {
  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 the track function. This function is responsible for sending event data to the provider.

To track an event in any part of your extension, simply call the track method, passing the event name and an optional data object:

popup.tsx

import { track } from "@turbostarter/analytics-extension";
 
const Popup = () => {
  return (
    <button onClick={() => track("popup.button.click", { country: "US" })}>
      Track event
    </button>
  );
};
 
export default Popup;

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

On this page