@company/co-user-analytics

Lightweight analytics for Angular (v17+) with click, navigation, screen time tracking, batching, and multi-tab coordination. Sends events to your in-house API.

Install

npm install @company/co-user-analytics

Provide configuration

import { provideRouter } from '@angular/router';
import { ANALYTICS_CONFIG } from '@company/co-user-analytics';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    { provide: ANALYTICS_CONFIG, useValue: {
      apiEndpoint: 'https://api.example.com/analytics',
      apiKey: 'YOUR_API_KEY',
      appName: 'my-angular-app',
      batchSize: 20,
      flushIntervalMs: 5000,
    }}
  ]
});

Router integration

Inject RouterAnalyticsService once (e.g., in AppComponent) to activate navigation + screen time tracking:

constructor(private readonly routerAnalytics: RouterAnalyticsService) {}

Click tracking via directive

<!-- Modern Angular 17+ input signals -->
<button [analyticsClick]="{ area: 'hero', action: 'cta' }">Get Started</button>

Custom events

analytics.trackCustom('form_submit', { formId: 'signup' });

Multi-tab behavior

• Tabs elect a leader to batch and deliver events. Non-leader tabs forward events to the leader using BroadcastChannel with a localStorage fallback for leadership.
• Events flush on interval, app hide, and beforeunload using sendBeacon when available.
• Angular 17+ Optimizations: Uses signals for reactive state, DestroyRef for automatic cleanup, and modern input signals in directives.

Build

npm run build