feat: add analytics service & directive

libs/angular/src/analytics/analytics.service.ts

@@ -0,0 +1,48 @@
+import { inject, Injectable } from "@angular/core";
+import Plausible from "plausible-tracker";
+// import { firstValueFrom } from "rxjs";
+
+import { ANALYTICS, GlobalStateProvider, KeyDefinition } from "@bitwarden/common/platform/state";
+
+const ANALYTICS_ENABLED_KEY_DEF = new KeyDefinition<boolean>(ANALYTICS, "analytics_enabled", {
+  deserializer: (s) => s,
+});
+
+@Injectable({ providedIn: "root" })
+export class AnalyticsService {
+  private plausible: ReturnType<typeof Plausible>;
+  private plausibleCleanup?: () => any;
+
+  private readonly _enabledState = inject(GlobalStateProvider).get(ANALYTICS_ENABLED_KEY_DEF);
+  readonly enabled$ = this._enabledState.state$;
+
+  async init() {
+    this.plausible = Plausible({
+      domain: "bitwarden",
+      trackLocalhost: true,
+      hashMode: true,
+    });
+
+    // TODO: uncomment when a toggle is added to settings page
+    // const enabled = await firstValueFrom(this._enabledState.state$);
+    // if (!enabled) {
+    //     return;
+    // }
+
+    await this.enable();
+  }
+
+  async enable() {
+    await this._enabledState.update((_prevState) => true);
+    this.plausibleCleanup = this.plausible.enableAutoPageviews();
+  }
+
+  async disable() {
+    await this._enabledState.update((_prevState) => false);
+    this?.plausibleCleanup();
+  }
+
+  trackEvent(eventName: string) {
+    this.plausible.trackEvent(eventName);
+  }
+}

libs/angular/src/analytics/track-event.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, HostListener, inject, Input } from "@angular/core";
+
+import { AnalyticsService } from "./analytics.service";
+
+@Directive({
+  selector: "[track-event]",
+  standalone: true,
+})
+export class TrackEventDirective {
+  private analyticsService = inject(AnalyticsService);
+
+  @Input({
+    alias: "track-event",
+    required: true,
+  })
+  eventName!: string;
+
+  @HostListener("click")
+  handleClick() {
+    this.analyticsService.trackEvent(this.eventName);
+  }
+}

libs/angular/src/jslib.module.ts

@@ -27,6 +27,7 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
+import { TrackEventDirective } from "./analytics/track-event.directive";
 import { TwoFactorIconComponent } from "./auth/components/two-factor-icon.component";
 import { DeprecatedCalloutComponent } from "./components/callout.component";
 import { A11yInvalidDirective } from "./directives/a11y-invalid.directive";
@@ -81,6 +82,7 @@ import { IconComponent } from "./vault/components/icon.component";
     IconModule,
     LinkModule,
     IconModule,
+    TrackEventDirective,
   ],
   declarations: [
     A11yInvalidDirective,