mathias / OpenPanel

export const environment = { production: false, openPanel: { clientId: 'OPENPANEL_CLIENT_ID', apiUrl: 'https://worker.domain.de', // mapping zu Worker Container, apiURL nur bei selfhost notwendig } };

import { Directive, HostListener, Input, inject } from '@angular/core'; import { OpenPanelService, TrackProperties } from '@core/services/openpanel.service'; /** * Directive for declarative event tracking directly in templates. * * @example * <button opTrack="signup_clicked" [opTrackProps]="{ location: 'hero' }"> * Sign Up * </button> * * @example * <a routerLink="/pricing" opTrack="pricing_link_clicked">Pricing</a> */ @Directive({ selector: '[opTrack]', standalone: true, }) export class OpenPanelTrackDirective { private readonly op = inject(OpenPanelService); /** The event name to track on click. */ @Input({ required: true }) opTrack!: string; /** Optional properties to send with the event. */ @Input() opTrackProps?: TrackProperties; /** Which DOM event triggers tracking. Default: 'click' */ @Input() opTrackOn: 'click' | 'mouseenter' | 'focus' | 'blur' = 'click'; @HostListener('click') onClick(): void { if (this.opTrackOn === 'click') { this.op.track(this.opTrack, this.opTrackProps); } } @HostListener('mouseenter') onMouseEnter(): void { if (this.opTrackOn === 'mouseenter') { this.op.track(this.opTrack, this.opTrackProps); } } @HostListener('focus') onFocus(): void { if (this.opTrackOn === 'focus') { this.op.track(this.opTrack, this.opTrackProps); } } @HostListener('blur') onBlur(): void { if (this.opTrackOn === 'blur') { this.op.track(this.opTrack, this.opTrackProps); } } }

import { InjectionToken } from '@angular/core'; export interface OpenPanelConfig { /** Your OpenPanel Client ID (required) */ clientId: string; /** URL of your OpenPanel API or self-hosted instance. * Defaults to https://api.openpanel.dev */ apiUrl?: string; /** Automatically track Angular Router navigation events as screen views. * Default: true */ trackScreenViews?: boolean; /** Track clicks on outgoing links automatically. * Default: false */ trackOutgoingLinks?: boolean; /** Enable declarative tracking via data-track HTML attributes. * Default: false */ trackAttributes?: boolean; /** Global properties sent with every event (e.g. app_version, environment). */ globalProperties?: Record<string, string | number | boolean>; /** Completely disable all tracking (e.g. in test environments). * Default: false */ disabled?: boolean; /** Enable verbose console logging for debugging. * Default: false */ debug?: boolean; } export const OPENPANEL_CONFIG = new InjectionToken<OpenPanelConfig>('OPENPANEL_CONFIG');

import { Injectable, OnDestroy, inject } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { isPlatformBrowser } from '@angular/common'; import { PLATFORM_ID } from '@angular/core'; import { filter, Subscription, skip } from 'rxjs'; import { OpenPanel } from '@openpanel/web'; import type { IdentifyPayload } from '@openpanel/web'; import { OpenPanelConfig, OPENPANEL_CONFIG } from '@core/models/openpanel.model'; export type TrackProperties = Record<string, string | number | boolean | null | undefined>; @Injectable({ providedIn: 'root', }) export class OpenPanelService implements OnDestroy { private readonly config = inject(OPENPANEL_CONFIG); private readonly platformId = inject(PLATFORM_ID) private readonly router = inject(Router); private op?: OpenPanel; private routerSubscription?: Subscription; constructor() { if(isPlatformBrowser(this.platformId)) { this.initialize(); } } // ─── Initialization ──────────────────────────────────────────────────────── private initialize(): void { this.op = new OpenPanel({ clientId: this.config.clientId, apiUrl: this.config.apiUrl, trackScreenViews: false, // We handle this manually via Router trackOutgoingLinks: this.config.trackOutgoingLinks ?? false, trackAttributes: this.config.trackAttributes ?? false, disabled: this.config.disabled ?? false, }); if (this.config.globalProperties) { this.op.setGlobalProperties(this.config.globalProperties); } if (this.config.trackScreenViews !== false) { this.setupRouteTracking(); } } private setupRouteTracking(): void { this.routerSubscription?.unsubscribe(); this.routerSubscription = this.router.events.pipe( filter((event) => event instanceof NavigationEnd), ).subscribe(() => { const route = this.getActiveRoute(); const trackName = route.snapshot.data['trackName'] ?? this.router.url; this.trackScreenView(trackName); }); } private getActiveRoute() { let route = this.router.routerState.root; while (route.firstChild) route = route.firstChild; return route; } // ─── Public API ──────────────────────────────────────────────────────────── /** * Tracks a custom event with optional properties. * @example opService.track('button_clicked', { button_name: 'signup' }); */ track(eventName: string, properties?: TrackProperties): void { if (!this.op) return; if (this.config.debug) { console.debug('[OpenPanel] track:', eventName, properties); } this.op.track(eventName, properties); } /** * Identifies the current user. Call this after login. * @example opService.identify({ profileId: 'user-123', email: 'user@example.com' }); */ identify(payload: IdentifyPayload): void { if (!this.op) return; if (this.config.debug) { console.debug('[OpenPanel] identify:', payload.profileId); } this.op.identify(payload); } /** * Clears the current user identity. Call this on logout. */ clearUser(): void { if (!this.op) return; if (this.config.debug) { console.debug('[OpenPanel] clearUser'); } this.op.clear(); } /** * Sets properties that will be sent with every subsequent event. */ setGlobalProperties(properties: TrackProperties): void { if (!this.op) return; this.op.setGlobalProperties(properties); } /** * Increments a numeric property on the user profile. * @example opService.increment('login_count'); */ increment(property: string): void { if (!this.op) return; this.op.increment(property); } /** * Decrements a numeric property on the user profile. * @example opService.decrement('credits'); */ decrement(property: string): void { if (!this.op) return; this.op.decrement(property); } /** * Manually tracks a screen/page view. */ trackScreenView(path?: string): void { if (!this.op) return; const currentPath = path ?? this.router.url; if (this.config.debug) { console.debug('[OpenPanel] screenView:', currentPath); } this.op.track('screen_view', { path: currentPath }); } // ─── Cleanup ─────────────────────────────────────────────────────────────── ngOnDestroy(): void { this.routerSubscription?.unsubscribe(); } }