feature: analytics to help get insights into user interactions

src/app/app.component.ts

@@ -2,10 +2,16 @@ import { Component } from "@angular/core";
 import { HeroHeaderComponent } from "./pages/homepage/hero-header/hero-header.component";
 import { FeatureCardComponent } from "./pages/homepage/feature-card/feature-card.component";
 import { NgOptimizedImage } from "@angular/common";
+import { ReactiveFormsModule } from "@angular/forms";
 
 @Component({
   selector: "app-root",
-  imports: [HeroHeaderComponent, FeatureCardComponent, NgOptimizedImage],
+  imports: [
+    HeroHeaderComponent,
+    FeatureCardComponent,
+    NgOptimizedImage,
+    ReactiveFormsModule,
+  ],
   templateUrl: "./app.component.html",
 })
 export class AppComponent {}

src/app/components/demo/demo.component.ts

@@ -6,6 +6,7 @@ import {
   Validators,
 } from "@angular/forms";
 import { HttpClient } from "@angular/common/http";
+import { AnalyticsService } from "../../services/analytics.service";
 
 @Component({
   selector: "app-demo",
@@ -21,7 +22,10 @@ export class DemoComponent {
   isLoading = signal(false);
   message = signal("");
 
-  constructor(private readonly http: HttpClient) {}
+  constructor(
+    private readonly analytics: AnalyticsService,
+    private readonly http: HttpClient,
+  ) {}
 
   sendEmail(): void {
     this.isLoading.set(true);
@@ -37,6 +41,7 @@ export class DemoComponent {
       )
       .subscribe({
         next: () => {
+          this.analytics.sendEvent("demo_send_email");
           this.message.set(
             "👌 We sent you an e-mail! Check your inbox or spam folder!",
           );
@@ -48,13 +53,16 @@ export class DemoComponent {
             this.message.set(
               "😩 You've hit your limit, try again in 15 minutes.",
             );
+            this.analytics.sendEvent("demo_send_email_hit_limit");
           } else {
             this.message.set(
               "😩 Something weird happened. It's not you it's us.",
             );
+            this.analytics.sendEvent("demo_send_email_error", {
+              error_message: err.message,
+              status: err.status,
+            });
           }
-
-          console.log(err);
           this.isLoading.set(false);
         },
       });

src/app/services/analytics.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AnalyticsService } from './analytics.service';
+
+describe('AnalyticsService', () => {
+  let service: AnalyticsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AnalyticsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/analytics.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from "@angular/core";
+import { WindowRef } from "./window-ref.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class AnalyticsService {
+  private readonly gtag: Function;
+
+  constructor(private readonly window: WindowRef) {
+    // @ts-ignore
+    this.gtag = this.window.nativeWindow?.gtag;
+  }
+
+  sendEvent(name: string, params: unknown = {}) {
+    this.gtag("event", name, params);
+  }
+}

src/app/services/logger.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from "@angular/core/testing";
+
+import { Logger } from "./logger.service";
+
+describe("Logger", () => {
+  let service: Logger;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(Logger);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/logger.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@angular/core";
+import { AnalyticsService } from "./analytics.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class Logger {
+  constructor(private readonly analytics: AnalyticsService) {}
+
+  log(...messages: any[]): any {
+    console.dir(...messages);
+  }
+
+  error(...messages: any[]) {
+    this.analytics.sendEvent("error", {
+      message: messages.join(" "),
+    });
+  }
+}

src/app/services/window-ref.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from "@angular/core/testing";
+import { WindowRef } from "./window-ref.service";
+
+describe("WindowRef", () => {
+  let service: WindowRef;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(WindowRef);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/window-ref.service.ts

@@ -0,0 +1,13 @@
+import { Inject, Injectable, PLATFORM_ID } from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
+
+@Injectable({
+  providedIn: "root",
+})
+export class WindowRef {
+  constructor(@Inject(PLATFORM_ID) private readonly platformId: Object) {}
+
+  get nativeWindow(): (Window & typeof globalThis) | null {
+    return isPlatformBrowser(this.platformId) ? window : null;
+  }
+}

src/index.html

@@ -1,6 +1,14 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YRJM4DPFQ1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-YRJM4DPFQ1');
+    </script>
     <meta charset="utf-8" />
     <title>
       fwdr - the world's most simple e-mail forwarder built for everyone