feat: analytics page event

Author: guiseek

apps/devmx/src/app/app.component.ts

@@ -1,5 +1,7 @@
+import { Analytics } from '@devmx/shared-ui-global/analytics';
+import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { Component } from '@angular/core';
+import { env } from '../envs/env';
 
 @Component({
   selector: 'devmx-root',
@@ -13,4 +15,11 @@ import { Component } from '@angular/core';
   `,
   imports: [RouterOutlet],
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor() {
+    if (env.prod) {
+      const analytics = inject(Analytics);
+      analytics.startTracking();
+    }
+  }
+}

apps/devmx/src/app/app.config.ts

@@ -2,6 +2,7 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { provideEnv, provideHttpClientImpl } from '@devmx/shared-data-access';
 import { providePresentation } from '@devmx/presentation-data-access';
+import { provideAnalytics } from '@devmx/shared-ui-global/analytics';
 import { authInterceptor, loaderInterceptor } from './interceptors';
 import { provideServiceWorker } from '@angular/service-worker';
 import { provideAcademy } from '@devmx/academy-data-access';
@@ -84,6 +85,7 @@ export const appConfig: ApplicationConfig = {
     ...provideAlbum(),
     ...provideAcademy(),
     ...provideLearn(),
+    provideAnalytics(),
     provideServiceWorker('ngsw-worker.js', {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',

packages/shared/ui-global/analytics/README.md

@@ -0,0 +1,3 @@
+# @devmx/shared-ui-global/analytics
+
+Secondary entry point of `@devmx/shared-ui-global`. It can be used by importing from `@devmx/shared-ui-global/analytics`.

packages/shared/ui-global/analytics/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/shared/ui-global/analytics/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/analytics'

packages/shared/ui-global/analytics/src/lib/analytics.ts

@@ -0,0 +1,39 @@
+import { Gtag, GtagConfig, GtagEvent, GtagEventParams } from './interfaces';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+declare const gtag: Gtag;
+
+export class Analytics {
+  debug = false;
+
+  constructor(private router: Router) {}
+
+  startTracking() {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((event) => {
+        const page_location = event.urlAfterRedirects;
+        this.event('page_view', { page_location, debug_mode: this.debug });
+      });
+  }
+
+  set(params: object) {
+    gtag('set', params);
+  }
+
+  event(event: GtagEvent, params?: GtagEventParams) {
+    gtag('event', event, params);
+  }
+
+  config(id: string, config?: GtagConfig) {
+    gtag('config', id, config);
+  }
+}
+
+export function provideAnalytics() {
+  return {
+    provide: Analytics,
+    deps: [Router],
+  };
+}

packages/shared/ui-global/analytics/src/lib/interfaces.ts

@@ -0,0 +1,55 @@
+export interface Gtag {
+  <T extends 'set'>(command: T, params: object): void;
+  <T extends 'config'>(command: T, id: string, config?: GtagConfig): void;
+  <T extends 'event'>(
+    command: T,
+    event: GtagEvent,
+    params?: GtagEventParams
+  ): void;
+}
+
+export type GtagEvent =
+  | 'page_view'
+  | 'click'
+  | 'purchase'
+  | 'add_to_cart'
+  | 'remove_from_cart'
+  | 'begin_checkout'
+  | 'sign_up'
+  | 'login'
+  | 'search'
+  | 'view_item'
+  | 'view_item_list'
+  | 'share'
+  | 'exception'
+  | 'timing_complete';
+
+export interface GtagConfig extends Record<string, unknown> {
+  anonymize_ip?: boolean;
+  page_path?: string;
+  page_title?: string;
+  user_id?: string;
+  send_page_view?: boolean;
+  allow_google_signals?: boolean;
+}
+
+export interface GtagEventParams extends Record<string, unknown> {
+  event_category?: string;
+  event_label?: string;
+  value?: number;
+  page_title?: string;
+  page_location?: string;
+  non_interaction?: boolean;
+  currency?: string;
+  transaction_id?: string;
+  debug_mode?: boolean;
+  items?: GtagEventItem[];
+}
+
+export interface GtagEventItem extends Record<string, unknown> {
+  item_id?: string;
+  item_name?: string;
+  item_category?: string;
+  price?: number;
+  quantity?: number;
+}

tsconfig.base.json

@@ -170,6 +170,9 @@
       "@devmx/shared-data-source": ["packages/shared/data-source/src/index.ts"],
       "@devmx/shared-resource": ["packages/shared/resource/src/index.ts"],
       "@devmx/shared-ui-global": ["packages/shared/ui-global/src/index.ts"],
+      "@devmx/shared-ui-global/analytics": [
+        "packages/shared/ui-global/analytics/src/index.ts"
+      ],
       "@devmx/shared-ui-global/bash": [
         "packages/shared/ui-global/bash/src/index.ts"
       ],