How to add web analytics to an Angular app

Angular loads once, then the router handles every navigation in the browser, so most of a visit happens without a page load. Web analytics tells you where those visitors come from, which campaigns bring them, and which pages keep them.

In this tutorial, you'll configure Amplitude for traffic data, keep campaign parameters through Angular redirects and guards, and set up the channel and campaign views. It builds on the Angular product analytics page.

What you'll build

Prerequisites

• The setup from the Angular product analytics page: Angular 19 or later with standalone components, @amplitude/unified, the two environment files, src/app/amplitude.ts, the initAmplitude() call in src/main.ts, and the stand-in AuthService with its user signal. Step 4 uses AuthService for a sign-in guard. Angular SSR (@angular/ssr) is optional.
• Code uses the Angular 20 file names (app.ts, App); on Angular 19 use app.component.ts and AppComponent.
• An Amplitude project API key. In Amplitude, go to Settings > Projects > your project > General.
• An Admin or Manager role in the Amplitude project for step 5. The Member role can't edit Marketing Analytics settings.

A free account covers the tracking on this page. Sign up for free to get your project API key.

1. Install the SDK

The Quickstart recommends @amplitude/unified for browser apps installed from npm, and the Angular product analytics page uses it, so this page changes the same src/app/amplitude.ts. If you already followed that page, skip to step 2.

npm install @amplitude/unified

The project API key lives in src/environments/environment.ts and environment.development.ts, which the base page creates and this page doesn't change. The key is public and its scope is limited to the minimum needed to ingest data, so shipping it in the browser bundle is expected. ng serve reads environment.development.ts; ng build reads environment.ts.

2. Configure autocapture for traffic data

Attribution, page views, sessions, and page URL enrichment are all on by default. Name them anyway, so nobody turns one off later without knowing what it feeds, and change one: trackHistoryChanges. This is the complete file, with the base page's clicks and session replay settings kept.

Other Angular pages add lines to src/app/amplitude.ts, and the comment at the top of the file below names each one. Keep those lines and change only the autocapture block. A blind paste removes them with no error: flags never fetch, the guides router never registers, and Web Experiment's On Event Tracked triggers stop firing.

// Keep lines other Angular pages added here: debugMode and privacyConfig
// (/build/angular-session-replay, already below); the setAmplitudeReady(...) wrapper, its
// import and the setAmplitudeReady(null) line (/build/angular-feature-flags,
// /build/angular-guides-surveys); the experiment block and any analytics.deviceId handoff
// (/build/angular-feature-flags); the WebExperimentGlobal type and the
// amplitude.add(webExperiment.plugin()) block (/build/angular-web-experiment).
import * as amplitude from '@amplitude/unified';
import { environment } from '../environments/environment';

export function initAmplitude(): void {
  if (!environment.amplitudeApiKey) {
    console.warn('amplitudeApiKey is not set; analytics is off.');
    return;
  }

  // This page doesn't wait for initAll. If setAmplitudeReady(...) wraps this call, keep it.
  void amplitude.initAll(environment.amplitudeApiKey, {
    analytics: {
      autocapture: {
        // UTM, referrer, and click ID capture. Feeds Traffic by Channel and Campaign.
        attribution: true,
        // [Amplitude] Page Viewed on load and on every path change.
        // 'pathOnly' ignores query-string-only changes such as ?sort=price.
        // Using withHashLocation()? Read step 3 before keeping this line.
        pageViews: { trackHistoryChanges: 'pathOnly' },
        // [Amplitude] Start Session and End Session. Feeds bounce rate and session length.
        sessions: true,
        // Adds current and previous page URL properties.
        pageUrlEnrichment: true,
        formInteractions: true,
        fileDownloads: true,
        elementInteractions: true,
      },
    },
    sessionReplay: {
      // Every session while you build; about 1% in production.
      sampleRate: environment.production ? 0.01 : 1,
      debugMode: !environment.production,
      // From /build/angular-session-replay. Keep your masking rules when you paste this file.
      privacyConfig: {
        maskSelector: ['[data-amp-mask]'],
        blockSelector: ['[data-amp-block]'],
        unmaskSelector: ['[data-amp-unmask]'],
      },
    },
  });
}

src/main.ts doesn't change. It still calls initAmplitude() before bootstrapApplication.

@amplitude/unified turns on session replay when sessionReplay.sampleRate is above 0. This config records every session under ng serve and about 1% in a production build, which is where Amplitude recommends starting; raise it over a few days. Set it to 0 to turn session replay off. Web analytics doesn't need it; it's here because the base page set it. debugMode and the privacyConfig selectors come from the Angular session replay page: debugMode ignores the focus check so replays record with DevTools open in development, and the selectors match nothing until you add the data-amp-* attributes, so the block is safe to keep either way.

From Browser SDK 2.45.0, the SDK stores campaign parameters two ways by default: as user properties (including first-touch initial_utm_source and friends, set once) and as event properties on every event. If the Network tab check below shows no utm_ values in event_properties, update @amplitude/unified to a release that bundles Browser SDK 2.45.0 or later. For referrer exclusions and the other attribution options, see Track marketing attribution.

3. Let autocapture count navigations

There's no page view code in this app, and there shouldn't be. Angular Router changes the URL with the browser's History API, and with pageViews on, the SDK sends [Amplitude] Page Viewed on init and again when the URL changes, which covers routerLink clicks, router.navigate(), and router.navigateByUrl(). Each event carries [Amplitude] Page Path, [Amplitude] Page Title, [Amplitude] Page URL, [Amplitude] Page Location, and [Amplitude] Page Counter. Navigations that replace the URL instead of pushing a new history entry, such as replaceUrl: true or a redirectTo applied during the app's first navigation, don't send a page view.

trackHistoryChanges: 'pathOnly' sends a page view when the path changes, such as /pricing to /docs, and skips changes to only the query string or hash. Use the default, 'all', if your query strings mark different pages, such as /blog?page=2. With 'all', a product list that writes its filters to the URL with router.navigate([], { queryParams: { sort: 'price' } }) records a page view per click, which inflates page views per session and skews entry and exit pages.

Two Angular specifics follow from the same rule. Matrix parameters (/products;sort=price) are part of the path, so 'pathOnly' counts every change to them; keep filter state in query parameters if you don't want page views for it. A navigation with skipLocationChange: true never touches the URL, so it records nothing.

Give every route a title (step 4 does). Angular sets document.title from it, and that's what [Amplitude] Page Title reads; without one, every page in Page Engagement shares your app's default title.

Angular routes on the path by default. With provideRouter(routes, withHashLocation()), the route moves into the hash (/#/pricing). [Amplitude] Page Path excludes the hash, so it reads / on every screen, and with 'pathOnly' route changes never send a page view. With hash routing, set pageViews: true, which tracks hash changes, and break page reports down by [Amplitude] Page Location (the full URL) rather than [Amplitude] Page Path. Campaign links then need their UTM parameters in the real query string, before the #: /?utm_source=newsletter#/pricing. A query after the # belongs to Angular's router, not the browser, and the SDK doesn't read it. Hash routing also has no server redirects, because the server only ever sees /, so step 4 doesn't apply.

Don't subscribe to Router events to call track('Page Viewed'). It produces a second, differently named page view per navigation, and Marketing Analytics only counts the one it's configured to read.

4. Keep UTM parameters through Angular redirects

The SDK can only record campaign data that's in the URL. Angular redirects go exactly where you point them, and a bare path has no query string. A visitor clicks a newsletter link to /account?utm_source=newsletter, a guard sends them to /login, and the address bar ends up on a bare /login. Amplitude's docs call this out for single-page apps: UTM parameters can drop during SPA redirects.

How much you lose depends on where the redirect runs:

• In the browser, through a redirectTo, a guard, a resolver, or router.navigate(). The SDK finishes initializing asynchronously, so depending on timing it can read the URL before or after the redirect. Don't count on first-touch values surviving: carry the parameters across, and every event after the redirect keeps the campaign too.
• On the server, through Angular SSR rendering the same routes and guards, or a redirect rule in server.ts. The browser loads the destination directly, so the SDK starts on /login, never sees the original URL, and records no campaign at all.

Four patterns drop the parameters:

• A route with a string redirectTo that starts with /, such as an old campaign URL you moved. Angular builds the new URL from the string alone.
• A functional guard or resolver that returns router.createUrlTree(['/login']), router.parseUrl('/login'), or a RedirectCommand built from either.
• A router.navigate(['/welcome']) or router.navigateByUrl('/welcome') after sign-in.
• With Angular SSR, an Express route in src/server.ts that calls res.redirect() with a bare path.

Carry the campaign parameters across with one small helper file. It copies only the UTM and click ID parameters the SDK reads, so it never drags unrelated query keys onto the new page. campaignParams works on Angular's query params; withCampaign works on URL strings for server.ts:

import type { Params } from '@angular/router';

// The UTM and click ID parameters the Browser SDK reads for attribution.
const CAMPAIGN_KEYS = [
  'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'utm_id',
  'gclid', 'fbclid', 'dclid', 'gbraid', 'wbraid', 'ko_click_id',
  'li_fat_id', 'msclkid', 'rdt_cid', 'ttclid', 'twclid',
];

// For router code: createUrlTree(['/login']) on its own drops ?utm_source=...
export function campaignParams(from: Params): Params {
  const picked: Params = {};
  for (const key of CAMPAIGN_KEYS) {
    if (from[key] !== undefined) {
      picked[key] = from[key];
    }
  }
  return picked;
}

// For server.ts: res.redirect(308, '/pricing') on its own drops ?utm_source=...
export function withCampaign(path: string, fromUrl: string): string {
  const base = 'http://localhost'; // Only for parsing; never part of the result.
  const from = new URL(fromUrl, base);
  const target = new URL(path, base);
  for (const key of CAMPAIGN_KEYS) {
    const value = from.searchParams.get(key);
    if (value !== null && !target.searchParams.has(key)) {
      target.searchParams.set(key, value);
    }
  }
  return target.pathname + target.search;
}

Use it in every guard, reading the query params of the route being checked:

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { campaignParams } from './campaign';

export const authGuard: CanActivateFn = (route) => {
  if (inject(AuthService).user()) {
    return true;
  }
  return inject(Router).createUrlTree(['/login'], {
    queryParams: campaignParams(route.queryParams),
  });
};

Read the params from the route argument, not with queryParamsHandling: 'preserve'. In a guard, 'preserve' copies the query of the URL the router is currently on, not the one it's checking, and on a first visit that URL has no query at all. If your guard already passes a returnUrl, keep it and spread campaignParams(route.queryParams) next to it: the SDK reads top-level query keys, not ones encoded inside returnUrl.

Replace string redirects with redirect functions, which run in an injection context and receive the incoming query params. This is the complete routes file, with the base page's two routes kept and a title on every route. Merge these routes into your existing array; the comment at the top names the routes other Angular pages add, so keep those and give them a title too:

// Keep lines other Angular pages added here: their routes, such as team and billing
// (/build/angular-session-replay) and projects/:projectId and settings (/build/angular-heatmaps).
import { inject } from '@angular/core';
import { Router, Routes } from '@angular/router';
import { authGuard } from './auth.guard';
import { campaignParams } from './campaign';
import { Home } from './home';
import { Login } from './login';
import { Account, Pricing, Welcome } from './pages';
import { NewProject } from './projects/new-project';

export const routes: Routes = [
  { path: '', component: Home, title: 'Home' },
  { path: 'projects/new', component: NewProject, title: 'New project' },
  { path: 'pricing', component: Pricing, title: 'Pricing' },
  { path: 'welcome', component: Welcome, title: 'Welcome' },
  { path: 'login', component: Login, title: 'Sign in' },
  { path: 'account', component: Account, title: 'Account', canActivate: [authGuard] },
  {
    // Old campaign URL, moved to /pricing for good.
    path: 'plans',
    pathMatch: 'full',
    redirectTo: ({ queryParams }) =>
      inject(Router).createUrlTree(['/pricing'], {
        queryParams: campaignParams(queryParams),
      }),
  },
  {
    // Sets its own query, so campaignParams adds ?utm_... next to it.
    path: 'offer/:code',
    pathMatch: 'full',
    redirectTo: ({ params, queryParams }) =>
      inject(Router).createUrlTree(['/pricing'], {
        queryParams: { offer: params['code'], ...campaignParams(queryParams) },
      }),
  },
];

And after sign-in. auth.signIn is the base page's stand-in; keep your own sign-in call and change only the navigate line:

import { Component, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { campaignParams } from './campaign';

@Component({
  selector: 'app-login',
  template: `
    <h1>Sign in</h1>
    <button type="button" (click)="signIn()">Sign in and continue</button>
  `,
})
export class Login {
  private readonly auth = inject(AuthService);
  private readonly router = inject(Router);
  private readonly route = inject(ActivatedRoute);

  protected async signIn(): Promise<void> {
    // ... your sign-in logic
    this.auth.signIn({ id: '42', plan: 'pro' });

    // This page is /login?utm_source=..., because the guard kept the campaign.
    await this.router.navigate(['/welcome'], {
      queryParams: campaignParams(this.route.snapshot.queryParams),
    });
  }
}

In a component, queryParamsHandling: 'preserve' would also keep the campaign, because the current URL is the right one there, but it carries every key on the page, including ones such as returnUrl that don't belong on /welcome.

If you use Angular SSR and redirect old URLs in src/server.ts before Angular renders, wrap those too. Add the import at the top of the file and the route after the express.static block, before the handler that calls angularApp.handle. If your server.ts is at the project root (apps created before Angular 19), import from ./src/app/campaign:

// Keep lines other Angular pages added here: the flag evaluation middleware
// (/build/angular-feature-flags) and the header middleware (/build/angular-web-experiment).
import { withCampaign } from './app/campaign';

// Old landing page, moved before Angular renders anything.
app.get('/old-landing', (req, res) => {
  res.redirect(308, withCampaign('/pricing', req.originalUrl));
});

With Angular SSR, render redirecting and guarded routes on the server per request, not at build time, so the redirect sees the incoming query. ng new --ssr prerenders every route by default, and a prerendered /plans or /account is built once with no query string. Add the three routes above the '**' entry in src/app/app.routes.server.ts, and keep any entries other Angular pages added there:

// Keep lines other Angular pages added here: projects/new (/build/angular-feature-flags) and
// projects/:projectId (/build/angular-heatmaps), all above '**'.
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // Redirects and guards that must see each request's UTM parameters.
  { path: 'plans', renderMode: RenderMode.Server },
  { path: 'offer/:code', renderMode: RenderMode.Server },
  { path: 'account', renderMode: RenderMode.Server },
  { path: '**', renderMode: RenderMode.Prerender },
];

If your project has no app.routes.server.ts (Angular 19 apps created without server routing use CommonEngine), build-time prerendering is controlled by the prerender option in angular.json. Leave /plans and /account out of the prerendered routes, or turn prerendering off.

Check each guard, redirect, and sign-in navigation in your app with a ?utm_source=test URL before you trust your channel numbers.

The Verify steps below visit /pricing, /welcome, /account, and /login. If your app doesn't have the first three yet, add a stub for each:

import { Component } from '@angular/core';

@Component({ selector: 'app-pricing', template: `<h1>Pricing</h1>` })
export class Pricing {}

@Component({ selector: 'app-welcome', template: `<h1>Welcome</h1>` })
export class Welcome {}

@Component({ selector: 'app-account', template: `<h1>Account</h1>` })
export class Account {}

5. Set up the Marketing Analytics views

In Amplitude, web analytics lives under Marketing Analytics in the navigation bar. It uses Browser SDK events by default, so this step is configuration, not code.

1. Create the channel classifier. Go to Data > Properties > Channels. Opening that page creates [Amplitude] Default Channels, which maps UTM parameters and referrer data into GA4-aligned channels such as Paid Search and Organic Social. If your org predates it, click Build with the new logic when prompted.
2. Confirm the page view event. Open Marketing Analytics, click Customize, and select Page View and Filter. Choose [Amplitude] Page Viewed as the event. Set a domain filter if the project also receives events from another site.
3. Define a conversion funnel. Under Conversion Funnel, choose the events that make up your funnel. If you followed the Angular product analytics page, [Amplitude] Page Viewed followed by Project Created works as a first funnel.
4. Read the views. Traffic by Channel, Traffic by Campaign, Page Engagement, and Conversion each show a time series and a table. Page Engagement covers visitors, page views, bounce rate, page views per session, and entry and exit rate per page. Ad Performance needs an ad network source such as Google Ads connected first.

Saving these settings as separate views for different teams needs a Growth or Enterprise plan; compare plans. For every setting, see Out-of-the-box Marketing Analytics.

Verify it worked

Run ng serve, open http://localhost:4200/offer/spring?utm_source=build-test&utm_medium=email&utm_campaign=angular-web-analytics in a fresh private window, click through two pages, then check in this order:

1. Redirects. Turn on Preserve log in the Network tab first. The address bar should read /pricing?offer=spring&utm_source=build-test&utm_medium=email&utm_campaign=angular-web-analytics. With Angular SSR, the server can answer the document request with a 3xx instead; if it does, its Location header must carry the same parameters. Then open /account?utm_source=build-test in the same window while signed out: you should land on /login?utm_source=build-test. Click Sign in and continue under the Sign in heading, and you should land on /welcome?utm_source=build-test. If any of these loses its parameters, the fix is step 4, and nothing downstream will work until it is.
2. Network tab. Filter for api2.amplitude.com. You should see a POST to /2/httpapi returning 200. The SDK compresses request bodies of 2 KB or more, so read the events in the Instrumentation Explorer Chrome extension instead: the first [Amplitude] Page Viewed should carry utm_source: build-test in event_properties. Its [Amplitude] Page Path is /pricing on most first visits; it can read /offer/spring if the SDK initialized before the redirect, and the redirect itself doesn't send a second page view. An identify event should set utm_source and initial_utm_source as user properties. With Angular SSR, Amplitude requests start only after the page loads in the browser; the server render sends none.
3. Ingestion Debugger. In Amplitude, click Data, select Sources, then open the Ingestion Debugger tab. The successful requests chart should show your uploads. It shows counts, not individual events.
4. User lookup. Go to Users > User Profiles and search user-42. Within ten seconds to a minute, the event stream shows [Amplitude] Start Session, then one [Amplitude] Page Viewed per page, and the profile shows initial_utm_source: build-test. Events from before you signed in belong to the same device ID.
5. Marketing Analytics. Open Traffic by Campaign for today. angular-web-analytics should appear as a campaign. It can take a few minutes to appear.

If you added the server.ts redirect, run npm run build, then start the server with the serve:ssr: script that ng new --ssr added to package.json, and request it with curl -I "http://localhost:4000/old-landing?utm_source=build-test": the response should be a 308 whose Location header is /pricing?utm_source=build-test.

To watch payloads in the console, add logLevel: amplitude.Types.LogLevel.Debug to the analytics block in development.

Troubleshooting

No requests in the Network tab

The key is empty, so the warning from step 2 is in the console. ng serve reads environment.development.ts and ng build reads environment.ts, so check the file your configuration uses. Because the key is compiled into the bundle, changing it in production means rebuilding.

Campaign traffic shows up as Direct

The UTM parameters were gone before the SDK read the URL. Open a ?utm_source=test URL with Preserve log on and watch the address bar and the Location header of every 3xx document response: a string redirectTo, a guard that returns createUrlTree or parseUrl with a bare path, or a res.redirect() in server.ts is the usual cause. The Channels docs also note that inconsistent set() and unset() calls on UTM user properties can classify traffic as Other.

Some events have a campaign and later ones don't

A redirect in the browser dropped the parameters after the SDK read them. Look for a router.navigate() or navigateByUrl() after sign-in, or a guard that uses queryParamsHandling: 'preserve', and pass campaignParams(...) as in step 4.

Two page view events per navigation

A Router events subscription or a page view helper is running alongside autocapture. Delete it. If both events are [Amplitude] Page Viewed, check that initAmplitude() is only called from src/main.ts.

A page view every time a filter or sort changes

The page writes state to the URL with router.navigate([], { queryParams: ... }) and trackHistoryChanges is 'all'. Set pageViews: { trackHistoryChanges: 'pathOnly' } as in step 2. If the filter state lives in matrix parameters (;sort=price), move it to query parameters.

Only one page view per visit, no matter how many pages

The app uses withHashLocation() with trackHistoryChanges: 'pathOnly'. Every route shares the path /, so no path change ever happens. Set pageViews: true, or switch back to path routing.

Every page in Page Engagement has the same title

Your routes have no title, so every [Amplitude] Page Title is the app's default from index.html. Add title to each route, as in step 4, or break the view down by [Amplitude] Page Path under Customize > Breakdown.

Page views stopped even though the code enables them

Remote configuration overrides local autocapture settings feature by feature, and Browser SDK 2.16.1 and later fetch it by default. Check Data > Settings > Autocapture and make sure page views and sessions aren't turned off there. To keep autocapture under code control, add remoteConfig: { fetchRemoteConfig: false } to the analytics block.

Requests fail with ERR_BLOCKED_BY_CLIENT

An ad blocker is dropping the call. Route events through a proxy on your own domain and set serverUrl in the analytics block to point at it. Point remoteConfig.serverUrl at it too, so remote configuration requests aren't blocked.

Full code reference

Every file from this tutorial in one block, the version to hand to an agent. 6 files, plus src/app/app.routes.server.ts and one addition to src/server.ts if you use Angular SSR. Each shared file (amplitude.ts, app.routes.ts, app.routes.server.ts, server.ts) starts with a comment naming the lines other Angular pages add there; merge into your file and keep those lines. Unchanged from earlier pages; keep your versions: src/environments/environment.ts, src/environments/environment.development.ts, src/main.ts, src/app/auth.service.ts, src/app/amplitude-identity.service.ts, src/app/app.ts, src/app/home.ts, src/app/projects/new-project.ts.

// -- src/app/amplitude.ts --
// Keep lines other Angular pages added here: debugMode and privacyConfig
// (/build/angular-session-replay, already below); the setAmplitudeReady(...) wrapper, its
// import and the setAmplitudeReady(null) line (/build/angular-feature-flags,
// /build/angular-guides-surveys); the experiment block and any analytics.deviceId handoff
// (/build/angular-feature-flags); the WebExperimentGlobal type and the
// amplitude.add(webExperiment.plugin()) block (/build/angular-web-experiment).
import * as amplitude from '@amplitude/unified';
import { environment } from '../environments/environment';

export function initAmplitude(): void {
  if (!environment.amplitudeApiKey) {
    console.warn('amplitudeApiKey is not set; analytics is off.');
    return;
  }

  // This page doesn't wait for initAll. If setAmplitudeReady(...) wraps this call, keep it.
  void amplitude.initAll(environment.amplitudeApiKey, {
    analytics: {
      autocapture: {
        // UTM, referrer, and click ID capture. Feeds Traffic by Channel and Campaign.
        attribution: true,
        // [Amplitude] Page Viewed on load and on every path change.
        // 'pathOnly' ignores query-string-only changes such as ?sort=price.
        // Using withHashLocation()? Read step 3 before keeping this line.
        pageViews: { trackHistoryChanges: 'pathOnly' },
        // [Amplitude] Start Session and End Session. Feeds bounce rate and session length.
        sessions: true,
        // Adds current and previous page URL properties.
        pageUrlEnrichment: true,
        formInteractions: true,
        fileDownloads: true,
        elementInteractions: true,
      },
    },
    sessionReplay: {
      // Every session while you build; about 1% in production.
      sampleRate: environment.production ? 0.01 : 1,
      debugMode: !environment.production,
      // From /build/angular-session-replay. Keep your masking rules when you paste this file.
      privacyConfig: {
        maskSelector: ['[data-amp-mask]'],
        blockSelector: ['[data-amp-block]'],
        unmaskSelector: ['[data-amp-unmask]'],
      },
    },
  });
}

// -- src/app/campaign.ts --
import type { Params } from '@angular/router';

const CAMPAIGN_KEYS = [
  'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'utm_id',
  'gclid', 'fbclid', 'dclid', 'gbraid', 'wbraid', 'ko_click_id',
  'li_fat_id', 'msclkid', 'rdt_cid', 'ttclid', 'twclid',
];

export function campaignParams(from: Params): Params {
  const picked: Params = {};
  for (const key of CAMPAIGN_KEYS) {
    if (from[key] !== undefined) {
      picked[key] = from[key];
    }
  }
  return picked;
}

export function withCampaign(path: string, fromUrl: string): string {
  const base = 'http://localhost'; // Only for parsing; never part of the result.
  const from = new URL(fromUrl, base);
  const target = new URL(path, base);
  for (const key of CAMPAIGN_KEYS) {
    const value = from.searchParams.get(key);
    if (value !== null && !target.searchParams.has(key)) {
      target.searchParams.set(key, value);
    }
  }
  return target.pathname + target.search;
}

// -- src/app/auth.guard.ts --
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { campaignParams } from './campaign';

export const authGuard: CanActivateFn = (route) => {
  if (inject(AuthService).user()) {
    return true;
  }
  return inject(Router).createUrlTree(['/login'], {
    queryParams: campaignParams(route.queryParams),
  });
};

// -- src/app/login.ts --
import { Component, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { campaignParams } from './campaign';

@Component({
  selector: 'app-login',
  template: `
    <h1>Sign in</h1>
    <button type="button" (click)="signIn()">Sign in and continue</button>
  `,
})
export class Login {
  private readonly auth = inject(AuthService);
  private readonly router = inject(Router);
  private readonly route = inject(ActivatedRoute);

  protected async signIn(): Promise<void> {
    // ... your sign-in logic
    this.auth.signIn({ id: '42', plan: 'pro' });

    await this.router.navigate(['/welcome'], {
      queryParams: campaignParams(this.route.snapshot.queryParams),
    });
  }
}

// -- src/app/pages.ts --
import { Component } from '@angular/core';

@Component({ selector: 'app-pricing', template: `<h1>Pricing</h1>` })
export class Pricing {}

@Component({ selector: 'app-welcome', template: `<h1>Welcome</h1>` })
export class Welcome {}

@Component({ selector: 'app-account', template: `<h1>Account</h1>` })
export class Account {}

// -- src/app/app.routes.ts --
// Keep lines other Angular pages added here: their routes, such as team and billing
// (/build/angular-session-replay) and projects/:projectId and settings (/build/angular-heatmaps).
import { inject } from '@angular/core';
import { Router, Routes } from '@angular/router';
import { authGuard } from './auth.guard';
import { campaignParams } from './campaign';
import { Home } from './home';
import { Login } from './login';
import { Account, Pricing, Welcome } from './pages';
import { NewProject } from './projects/new-project';

export const routes: Routes = [
  { path: '', component: Home, title: 'Home' },
  { path: 'projects/new', component: NewProject, title: 'New project' },
  { path: 'pricing', component: Pricing, title: 'Pricing' },
  { path: 'welcome', component: Welcome, title: 'Welcome' },
  { path: 'login', component: Login, title: 'Sign in' },
  { path: 'account', component: Account, title: 'Account', canActivate: [authGuard] },
  {
    path: 'plans',
    pathMatch: 'full',
    redirectTo: ({ queryParams }) =>
      inject(Router).createUrlTree(['/pricing'], {
        queryParams: campaignParams(queryParams),
      }),
  },
  {
    path: 'offer/:code',
    pathMatch: 'full',
    redirectTo: ({ params, queryParams }) =>
      inject(Router).createUrlTree(['/pricing'], {
        queryParams: { offer: params['code'], ...campaignParams(queryParams) },
      }),
  },
];

// -- src/app/app.routes.server.ts (Angular SSR only) --
// Keep lines other Angular pages added here: projects/new (/build/angular-feature-flags) and
// projects/:projectId (/build/angular-heatmaps), all above '**'.
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // Redirects and guards that must see each request's UTM parameters.
  { path: 'plans', renderMode: RenderMode.Server },
  { path: 'offer/:code', renderMode: RenderMode.Server },
  { path: 'account', renderMode: RenderMode.Server },
  { path: '**', renderMode: RenderMode.Prerender },
];

// -- src/server.ts (Angular SSR only; add to your existing file) --
// Keep lines other Angular pages added here: the flag evaluation middleware
// (/build/angular-feature-flags) and the header middleware (/build/angular-web-experiment).
// At the top, with the other imports:
import { withCampaign } from './app/campaign';

// After the express.static block, before the angularApp.handle handler:
app.get('/old-landing', (req, res) => {
  res.redirect(308, withCampaign('/pricing', req.originalUrl));
});

Hand it to your agent

Prefer to have Cursor, Claude Code, or Codex CLI do the wiring? This prompt points the agent at this page and pins the decisions that matter.

Complete https://amplitude.com/build/angular-product-analytics first, or
confirm this Angular app already has its setup (environment files with
production and amplitudeApiKey, src/app/amplitude.ts with initAmplitude(),
the call in src/main.ts before bootstrapApplication, AuthService with a
user signal, and AmplitudeIdentityService). Then set up Amplitude web
analytics by following https://amplitude.com/build/angular-web-analytics
exactly. Merge into shared files (src/app/amplitude.ts,
src/app/app.routes.ts, src/app/app.routes.server.ts and src/server.ts) and
never delete a line another Amplitude Build page added; each shared file
on the page starts with a comment listing those lines. Don't touch the
environment files, main.ts, AuthService, AmplitudeIdentityService, the
root component, home.ts or new-project.ts. Keep initAll in
initAmplitude(), called only from src/main.ts, never from a component,
service, app.config.ts, or main.server.ts. In amplitude.ts, keep the
setAmplitudeReady(...) wrapper, its import and the setAmplitudeReady(null)
line if they exist, the experiment block and any analytics.deviceId
handoff, and the WebExperimentGlobal type and
amplitude.add(webExperiment.plugin()) block. Inside analytics: {
autocapture } keep attribution, sessions, pageUrlEnrichment,
formInteractions, fileDownloads and elementInteractions on, and set
pageViews to { trackHistoryChanges: 'pathOnly' } unless provideRouter uses
withHashLocation(), in which case use pageViews: true. Keep
sessionReplay.sampleRate at environment.production ? 0.01 : 1, debugMode:
!environment.production and the privacyConfig maskSelector, blockSelector
and unmaskSelector for the data-amp-mask, data-amp-block and
data-amp-unmask attributes, and tell me how to turn session replay off.
Don't subscribe to Router events for page views. Add src/app/campaign.ts
with campaignParams and withCampaign and the page's 6 UTM and 11 click ID
keys. Then find every string redirectTo that starts with "/", every guard
or resolver that returns createUrlTree, parseUrl or RedirectCommand, every
router.navigate or navigateByUrl after sign-in, and, if src/server.ts
exists, every res.redirect, and make each one carry the UTM and click ID
parameters from the incoming URL: redirect functions with
inject(Router).createUrlTree and campaignParams(queryParams), guards with
campaignParams(route.queryParams), never queryParamsHandling inside a
guard, and withCampaign(path, req.originalUrl) in server.ts. If the app
uses Angular SSR, set renderMode: RenderMode.Server for the plans,
offer/:code and account routes in src/app/app.routes.server.ts, above the
'**' entry and next to any entries already there, so those redirects see
each request's query. Give every route a title. Also add the page's demo
pieces so the Verify steps run: the authGuard in src/app/auth.guard.ts on
an account route, the offer/:code redirect (to /pricing?offer=<code>) and
plans redirect (to /pricing), src/app/login.ts, and the Pricing, Welcome
and Account stubs in src/app/pages.ts, all merged into
src/app/app.routes.ts next to the existing routes. If the app has its own
auth, use its signed-in check in the guard and its sign-in call in Login
and tell me. Don't hardcode a real key and don't invent event names.
Report every file you changed and every redirect you checked.

What this unlocks

• Session replay, already on from step 2, lets you watch what visitors with utm_campaign: angular-web-analytics did after they landed on /pricing.
• Heatmaps, built from those session replays, show where visitors click on /pricing, and a segment on initial_utm_source splits paid from organic.
• Web Experiment can test a new /pricing layout, launched from the Page Engagement table, with your conversion funnel as the metric.
• Guides and surveys can ask visitors whose utm_medium is email what brought them back.

One integration; everything else reads from the same events.

Next steps

Amplitude is the leading all-in-one analytics platform for building better products. Product and engineering teams use Amplitude to connect product analytics and web analytics with session replay, heatmaps, experimentation, feature flags, and guides and surveys in one unified workflow, with AI agents working across all of it. Learn how Amplitude is building self-improving products with Wave, helping teams turn product data into PRs.