GA4 + BigQuery for Angular 20+: Instrumentation Playbook to Prove UX/Performance Wins (and Ace Interviews)

A real exchange

Director: “What did Signals and SSR buy you?” Me: “Let’s filter LCP and INP by release in BigQuery.” We pivot to a chart: pre‑upgrade LCP p50 2.9s → 1.9s; INP p75 240ms → 150ms. Conversation over—hired.

If you want that confidence, your Angular app needs telemetry disciplined enough to withstand cross-exam: consistent events, CI-stamped versions, and queryable storage (BigQuery).

Why GA4 alone isn’t enough

GA4 dashboards are fine for product overviews, but interviews and architecture reviews require raw evidence: exact SQL, joins across releases and feature flags, and segments by role or device. That’s BigQuery territory.

• UI claims get challenged.

• Aggregates hide outliers.

• Sampling complicates audits.

Tie events to your delivery pipeline

Stamping every UX event with CI metadata enables pre/post comparisons by commit. This is how we proved PrimeNG virtualization cut table render time by 48% for role=analyst on 2019 MacBooks.

• release_sha

• app_version

• environment

• feature_flag

• route_id/role

Signals make telemetry predictable

With Angular 20+, a Signals/SignalStore queue avoids race conditions during hydration, consent, and offline states. Events don’t vanish because the app wasn’t ready; they buffer and flush deterministically.

Create the dimensions/metrics

Name your taxonomy up front. Keep it boring and stable so SQL is repeatable across projects. Document in your Nx repo under /docs/telemetry.

• app_version (User property)

• release_sha (Event parameter)

• feature_flag (Event parameter)

• route_id, role, device_class (Event parameters)

• task_time_ms (Custom metric)

• lcp_ms, inp_ms, cls (Custom metrics)

Enable BigQuery export

Validate with SELECT * FROM dataset.events_* LIMIT 10. If you don’t see your custom params, you likely forgot to register them or they haven’t backfilled yet.

• Link GA4 property → BigQuery dataset.

• Use daily and streaming export if you need near‑real‑time.

• Partition by event_date.

Signals-based TelemetryService

Queue events until consent, online, and hydration are satisfied. Use gtag for client events; avoid Measurement Protocol secrets in the browser.

Code: TelemetryService

// app/telemetry/telemetry.service.ts
import { Injectable, effect, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { onCLS, onLCP, onINP } from 'web-vitals/attribution';

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

interface TelemetryEvent { name: string; params: Record<string, any>; }

@Injectable({ providedIn: 'root' })
export class TelemetryService {
  private ready = signal(false);
  private consent = signal<'granted'|'denied'|'unset'>('unset');
  private queue = signal<TelemetryEvent[]>([]);

  constructor(private router: Router) {
    // Flush when ready and consent granted.
    effect(() => {
      if (this.ready() && this.consent() === 'granted' && navigator.onLine) {
        const events = this.queue();
        if (events.length) {
          events.forEach(e => this.gtag('event', e.name, e.params));
          this.queue.set([]);
        }
      }
    });

    // Web Vitals → GA4
    onLCP((m) => this.vital('lcp_ms', m.value, m));
    onINP((m) => this.vital('inp_ms', m.value, m));
    onCLS((m) => this.vital('cls', m.value, m));
  }

  init(userProps: Record<string,string>) {
    this.setUserProps(userProps);
    this.ready.set(true);
  }

  grantConsent(granted: boolean) { this.consent.set(granted ? 'granted' : 'denied'); }

  event(name: string, params: Record<string, any>) {
    const base = this.baseParams();
    const ev = { name, params: { ...base, ...params } };
    this.queue.set([...this.queue(), ev]);
  }

  uxTaskComplete(task: string, ms: number, extra: Record<string,any> = {}) {
    this.event('ux_task_complete', { task, task_time_ms: Math.round(ms), ...extra });
  }

  vital(metric: 'lcp_ms'|'inp_ms'|'cls', value: number, meta?: any) {
    this.event('web_vital', { metric, value, element: meta?.element ?? null });
  }

  setUserProps(props: Record<string,string>) { this.gtag('set', 'user_properties', props); }

  private baseParams() {
    return {
      app_version: (window as any).__APP_VERSION__,
      release_sha: (window as any).__RELEASE_SHA__,
      route_id: this.router.url.split('?')[0],
      device_class: window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'mouse'
    };
  }

  private gtag(command: string, name?: string, params?: any) {
    if (!window.gtag) { window.dataLayer = window.dataLayer || []; }
    window.gtag?.(command as any, name as any, params as any);
  }
}

Index.html gtag loader

<!-- index.html -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
  gtag('config', 'G-XXXXXXX', { send_page_view: false });
  // Injected by CI for traceability
  window.__APP_VERSION__ = '20.4.1';
  window.__RELEASE_SHA__ = 'abc1234';
</script>

Wire into a PrimeNG flow

// Example: measure table filter task time
const start = performance.now();
this.table.filterGlobal(query, 'contains');
queueMicrotask(() => {
  const ms = performance.now() - start;
  this.telemetry.uxTaskComplete('table_filter', ms, { feature_flag: 'virtualized_table' });
});

Stamp releases from CI

Use Measurement Protocol from CI to record release_deploy with secure secrets. This gives you a clean join key to compare UX before/after a deployment.

GitHub Actions step

# .github/workflows/deploy.yml
- name: Stamp GA4 release event
  env:
    MID: ${{ secrets.GA4_MEASUREMENT_ID }}
    SECRET: ${{ secrets.GA4_API_SECRET }}
  run: |
    BODY=$(cat <<'JSON'
    {
      "client_id": "ci-${{ github.run_id }}",
      "events": [{
        "name": "release_deploy",
        "params": {
          "app_version": "${{ env.APP_VERSION }}",
          "release_sha": "${{ github.sha }}",
          "environment": "prod"
        }
      }]
    }
    JSON
    )
    curl -X POST "https://www.google-analytics.com/mp/collect?measurement_id=$MID&api_secret=$SECRET" \
      -H 'Content-Type: application/json' -d "$BODY"

Prefer Cloud Functions for server logging

In Firebase Functions we also log retryable backend failures with exponential backoff metadata so we can correlate frontend INP spikes with API flaps.

• Don’t expose API secret in the browser.

• Use Functions/Node/.NET to send MP events for SSR, errors, or batch jobs.

Compare LCP by release

-- GA4 export schema: events_* tables
WITH base AS (
  SELECT
    event_date,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'release_sha') AS release_sha,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'app_version') AS app_version,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'route_id') AS route_id,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'feature_flag') AS feature_flag,
    (SELECT value.double_value FROM UNNEST(event_params) WHERE key = 'value') AS metric_value
  FROM `myproj.analytics_XXXX.events_*`
  WHERE event_name = 'web_vital'
    AND (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric') = 'lcp_ms'
)
SELECT app_version, release_sha,
       APPROX_QUANTILES(metric_value, 100)[OFFSET(50)] AS lcp_p50_ms,
       APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS lcp_p75_ms
FROM base
GROUP BY app_version, release_sha
ORDER BY lcp_p50_ms ASC

Task time delta by feature flag

WITH tasks AS (
  SELECT
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'feature_flag') AS flag,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'role') AS role,
    (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'task_time_ms') AS task_ms
  FROM `myproj.analytics_XXXX.events_*`
  WHERE event_name = 'ux_task_complete'
)
SELECT role, flag,
  AVG(task_ms) AS avg_ms,
  APPROX_QUANTILES(task_ms, 100)[OFFSET(50)] AS p50_ms
FROM tasks
GROUP BY role, flag
ORDER BY p50_ms

INP p75 trend last 30 days

SELECT
  PARSE_DATE('%Y%m%d', event_date) AS d,
  APPROX_QUANTILES((SELECT value.double_value FROM UNNEST(event_params) WHERE key='value'), 100)[OFFSET(75)] AS inp_p75
FROM `myproj.analytics_XXXX.events_*`
WHERE event_name='web_vital'
  AND (SELECT value.string_value FROM UNNEST(event_params) WHERE key='metric')='inp_ms'
  AND _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY)) AND FORMAT_DATE('%Y%m%d', CURRENT_DATE())
GROUP BY d
ORDER BY d

Telecom advertising analytics dashboard

We cut median LCP from 2.9s→1.9s by deferring heavy chart hydration and caching dimensions. BigQuery let us segment by role=analyst vs role=ops, showing the analyst persona got the biggest gain (more charts on first view).

• Stack: Angular 20, Signals, Nx, PrimeNG, WebSocket + RxJS, Firebase Hosting

Airline kiosk with offline-tolerant flows

We batched telemetry while offline and flushed on reconnect, marking connection_state. BigQuery showed a 41% drop in failed check-ins during simulated Wi‑Fi drops. The same pattern catches printer/scanner latency spikes via device_state events.

• Stack: Angular 20, Service Worker, Docker hardware sims, IndexedDB queue

gitPlumbers modernization audits

We stamp release_deploy from CI, then chart Core Web Vitals deltas per remediation. That’s how we maintain 99.98% uptime while upgrading Angular versions and libraries across client orgs. See how we stabilize your Angular codebase with real numbers at gitPlumbers.

• Stack: Angular 20 Signals, GitHub App, Functions, BigQuery

Good triggers

An Angular consultant can stand up this GA4 + BigQuery pipeline in 3–7 days, wire your critical journeys, and hand you a dashboard and SQL links you can open in any interview. If you need a remote Angular developer with Fortune 100 experience, I’m available.

• You’re upgrading Angular 14→20 and want proof of ROI.

• Leadership asks for Core Web Vitals by feature flag and persona.

• You need offline/consent-safe telemetry for kiosks or field ops.

• Interviews are coming and you want numbers you can defend.

Consent mode

The Signals queue pattern makes consent easy: only flush when consent === 'granted'. Add a visible state in DevTools to verify.

• Gate logging behind user consent.

• Respect regional requirements (GDPR/CCPA).

PII and secrets

Hash or map user identifiers; rely on GA4 user_pseudo_id for most reporting. Use Cloud Functions for any server-originated analytics.

• Never send emails or IDs as plain text.

• Keep Measurement Protocol secrets server-side.

Sampling and data quality

Add a small dbt or scheduled query that fails the build if custom params flatline after a release.

• Use BigQuery export for unsampled analysis.

• Validate nightly with data tests (row counts, param nulls).

Dashboards and alerts

Alert when INP p75 regresses >15% post-release; gate deployments with GitHub Checks.

• Looker Studio or Data Studio reports

• Budget-friendly BigQuery scheduled queries

Feature flags

Tie feature_exposure events to flags so you can isolate how Signals-based changes, SSR, or virtualization affect different roles and devices.

• Firebase Remote Config

• Kill switches for heavy charts