Analytics Events
Analytics Events
Datadog (RUM)
Using captureEvent
The captureEvent function from libs/analytics/src/datadog.ts is used to log custom events to Datadog RUM. It helps track user actions and feedback in the UI.
Usage:
- Action events: Track user interactions (e.g., button clicks).
- Feedback events: Track feedback shown to the user (e.g., toast messages).
Examples:
// Action event: user enables auto-search
captureEvent('action', 'enable-auto-search');
// Feedback event: user sees a toast message
captureEvent('feedback', 'toast', { message: 'Hi' });
Parameters:
event: Either'action'or'feedback'.name: The event name (e.g.,'enable-auto-search','toast').context: (Optional) Additional context for the event. For feedback events, provide an object (e.g.,{ message: string }).
Adding New Action Events
To add a new action event, update the ActionEvent union type in libs/analytics/src/datadog.ts. Add your new event name as a string literal to the union. This ensures type safety and consistency across the codebase.
Example:
export type ActionEvent = 'enable-auto-search' | 'disable-auto-search' | 'open-settings';
After updating the union type, you can use the new event name with captureEvent('action', 'open-settings').
Viewing Events in Datadog
See confluence page on HowTo - Add Datadog RUM events to UI Dashboard.
Using captureError
The captureError function from libs/analytics/src/datadog.ts is used to log errors to Datadog RUM. Use this to capture exceptions or unexpected issues in your application for monitoring and debugging.
Usage:
try {
// code that may throw
} catch (error) {
captureError(error, { additional: 'context' });
}
Parameters:
error: The error object or value to report (can be any type).context: (Optional) Additional context as an object to provide more details about the error.
This helps ensure that errors are visible in Datadog for further analysis.
Google Analytics (GA4)
Using event
The event function from libs/analytics/src/analytics.ts is used to log custom events to Google Tag Manager (GTM) via the data layer. This helps track user interactions for analytics and marketing purposes.
Usage:
event('button', 'save-settings');
event('dialog', 'confirm-delete');
Parameters:
component: The type of UI component (e.g.,'button','dialog').name: The name of the event (e.g.,'save-settings','confirm-delete').
This will push an event to the GTM data layer with the specified component and event name. Use this function to track important user actions in your application.
Helper Functions: buttonEvent and dialogEvent
To simplify tracking common UI interactions, use the provided helpers:
buttonEvent(name): Tracks a button click event. Pass the button's name as the argument. Ifnameis missing, a warning is logged and no event is sent.dialogEvent(name): Tracks a dialog event. Pass the dialog's name as the argument.
Examples:
buttonEvent('save-settings');
dialogEvent('confirm-delete');
These helpers automatically set the correct component type for you.
PageView Component
The PageView component is a React helper for capturing page view events automatically when a page is rendered. Use this component at the top level of your page.
It offers additional props that are added to the event.
Usage:
import { PageView } from '@numera/analytics';
export default function MyPage() {
return (
<>
<PageView numera_id={statistic.id} pagetype="statistics/statistic/version" reference_id={statistic.reference} />
{/* ...rest of your page... */}
</>
);
}