Show the Numbers: GA4 + BigQuery for Angular 20+ to Prove UX/Performance Wins in Interviews

Interview Hook: Why Numbers Win

GA4 Foundation: Consent Mode and SPA Pageviews

// analytics.service.ts (Angular 20)
import { Injectable, inject } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { effect, signal } from '@angular/core';

declare global {
  interface Window { dataLayer: any[]; gtag: (...args: any[]) => void; }
}

@Injectable({ providedIn: 'root' })
export class AnalyticsService {
  private router = inject(Router);
  consent = signal<{ ad_storage: 'granted'|'denied'; analytics_storage: 'granted'|'denied' }>({
    ad_storage: 'denied', analytics_storage: 'denied'
  });
  releaseTag = signal('2025.01.0');
  role = signal<'admin'|'analyst'|'operator'|'guest'>('guest');
  tenantHash = signal<string>('anon'); // hash on server to avoid PII

  init(measurementId: string) {
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){ window.dataLayer.push(arguments); } as any;

    window.gtag('consent', 'default', {
      ad_storage: this.consent().ad_storage,
      analytics_storage: this.consent().analytics_storage,
    });
    window.gtag('js', new Date());
    window.gtag('config', measurementId, { send_page_view: false });

    // SPA page_view on route changes
    this.router.events.subscribe(evt => {
      if (evt instanceof NavigationEnd && this.consent().analytics_storage === 'granted') {
        window.gtag('event', 'page_view', {
          page_location: location.href,
          page_path: evt.urlAfterRedirects,
          route_path: evt.urlAfterRedirects,
          release_tag: this.releaseTag(),
          role: this.role(),
          tenant_id: this.tenantHash()
        });
      }
    });

    // react to consent changes
    effect(() => {
      const c = this.consent();
      window.gtag('consent', 'update', c);
    });
  }

  setConsent(analyticsGranted: boolean) {
    this.consent.set({
      ad_storage: 'denied',
      analytics_storage: analyticsGranted ? 'granted' : 'denied'
    });
  }
}

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { AnalyticsService } from './analytics.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    {
      provide: 'APP_INIT',
      multi: true,
      useFactory: (svc: AnalyticsService) => () => svc.init('G-XXXXXXX'),
      deps: [AnalyticsService]
    }
  ]
};

Send Core Web Vitals (LCP, INP, CLS) to GA4

npm i web-vitals

// vitals.service.ts
import { Injectable, inject } from '@angular/core';
import { onLCP, onINP, onCLS, Metric } from 'web-vitals';
import { AnalyticsService } from './analytics.service';

function sendVital(name: string, metric: Metric, params: Record<string, any>) {
  if (!('gtag' in window)) return;
  const value = name === 'CLS' ? Math.round(metric.value * 1000) : Math.round(metric.value); // ms
  window.gtag('event', name.toLowerCase(), {
    value,
    metric_id: metric.id,
    metric_value: value,
    metric_delta: Math.round('delta' in metric ? (metric as any).delta : value),
    route_path: params['route_path'],
    release_tag: params['release_tag'],
    role: params['role'],
    tenant_id: params['tenant_id']
  });
}

@Injectable({ providedIn: 'root' })
export class VitalsService {
  private analytics = inject(AnalyticsService);
  init() {
    const common = () => ({
      route_path: location.pathname,
      release_tag: this.analytics.releaseTag(),
      role: this.analytics.role(),
      tenant_id: this.analytics.tenantHash()
    });
    onLCP((m) => sendVital('LCP', m, common()));
    onINP((m) => sendVital('INP', m, common()));
    onCLS((m) => sendVital('CLS', m, common()));
  }
}

In GA4, create custom metrics (metric_value as Number) and custom dimensions (route_path, release_tag, role, tenant_id). This unlocks BigQuery grouping and p75 reporting by route and release. If you’re using Firebase, map Firebase Analytics events to the same names for parity across web/native.

BigQuery Queries You Can Show in an Interview

-- p50/p75 LCP by route and release
WITH lcp AS (
  SELECT
    PARSE_DATE('%Y%m%d', event_date) AS date,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'route_path') AS route_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'release_tag') AS release_tag,
    (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'metric_value') AS lcp_ms
  FROM `myproject.analytics_XXXXXX.events_*`
  WHERE event_name = 'lcp' -- lowercased as emitted
)
SELECT
  route_path,
  release_tag,
  APPROX_QUANTILES(lcp_ms, 100)[OFFSET(50)] AS p50_lcp,
  APPROX_QUANTILES(lcp_ms, 100)[OFFSET(75)] AS p75_lcp,
  COUNT(*) AS samples
FROM lcp
WHERE lcp_ms IS NOT NULL
GROUP BY route_path, release_tag
ORDER BY route_path, release_tag;

-- INP p75 trend by day and route
WITH inp AS (
  SELECT
    PARSE_DATE('%Y%m%d', event_date) AS date,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'route_path') AS route_path,
    (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'metric_value') AS inp_ms
  FROM `myproject.analytics_XXXXXX.events_*`
  WHERE event_name = 'inp'
)
SELECT date, route_path,
  APPROX_QUANTILES(inp_ms, 100)[OFFSET(75)] AS p75_inp,
  COUNT(*) AS samples
FROM inp
GROUP BY date, route_path
ORDER BY date, route_path;

These queries drop straight into Looker Studio or a small Node.js service behind your Angular dashboard. I’ve also embedded them into automated checks so CI fails if p75 regresses by >10%. See below.

CI Guardrails: Fail the Build on Regressions

# .github/workflows/rum-guard.yml
name: RUM Guard
on:
  workflow_dispatch:
  schedule:
    - cron: '0 10 * * *'
jobs:
  check-rum:
    runs-on: ubuntu-latest
    steps:
      - name: Setup gcloud
        uses: google-github-actions/setup-gcloud@v2
        with:
          project_id: ${{ secrets.GCP_PROJECT }}
          service_account_key: ${{ secrets.GCP_SA_KEY }}
      - name: Query p75 LCP by route
        run: |
          SQL="""
          WITH lcp AS (
            SELECT
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'route_path') AS route,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'release_tag') AS rel,
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'metric_value') AS lcp
            FROM `${{ secrets.BQ_DATASET }}.events_*`
            WHERE event_name='lcp' AND _TABLE_SUFFIX >= FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE(), INTERVAL 7 DAY))
          )
          SELECT route, rel, APPROX_QUANTILES(lcp,100)[OFFSET(75)] AS p75 FROM lcp GROUP BY route, rel;"""
          echo "$SQL" > q.sql
          bq --quiet query --use_legacy_sql=false < q.sql > out.txt
          echo "Results:"; cat out.txt
          # Simple guard: fail if homepage exceeds 2500ms
          THRESH=$(awk '/home/{print $3}' out.txt | head -1)
          if [ -n "$THRESH" ] && [ "$THRESH" -gt 2500 ]; then
            echo "p75 LCP regression on /home: $THRESH ms"; exit 1;
          fi

Privacy, Modeling, and Segmentation Without PII

For enterprise apps (multi‑tenant RBAC, regulated spaces), I’ve shipped this model in insurance telematics dashboards and device management portals. It keeps interview‑ready segmentation (admin vs operator, tenant A vs tenant B) without risking PII. If you need an Angular consultant to implement this with your compliance team, I’m available for hire.

Portfolio-Ready Dashboards

I keep a private interview pack with before/after charts from several projects:

• Telecom analytics: p75 LCP 2.6s → 1.6s after route‑level code‑splitting and image CDN.
• Insurance telematics: INP held under 180 ms across real‑time map screens after Signals + SignalStore refactor and event coalescing.
• Broadcast scheduling: p75 navigation timing stabilized during heavy grid virtualization work.

If you want UI inspiration, browse my NG Wave component library—animated Angular components built with Signals—and adapt charts for your portfolio.

When to Hire an Angular Developer to Instrument GA4 + BigQuery

Need a remote Angular expert? I can instrument, wire queries, and hand you a polished dashboard—plus a README that turns into an interview deck. If you need to stabilize your codebase while we measure, I also offer modernization and rescue work.

Implementation Notes: SSR, Signals, and Hydration

// example SignalStore for analytics context
import { signalStore, withState, withMethods } from '@ngrx/signals';

export const AnalyticsStore = signalStore(
  withState({ releaseTag: '2025.01.0', role: 'guest' as const, tenantHash: 'anon' }),
  withMethods((store) => ({
    setRelease(tag: string) { store.releaseTag = tag; },
    setRole(role: 'guest'|'admin'|'analyst'|'operator') { store.role = role; },
    setTenant(hash: string) { store.tenantHash = hash; }
  }))
);

How an Angular Consultant Proves UX Wins With Real-User Metrics

Timeline can flex. If you need deeper performance work—SSR, image/CDN, bundle splits, WebSocket batching—I pair the instrumentation with fixes to move the numbers, not just measure them.