Contentful Personalization & Analytics

Web SDK + Angular Reference Implementation

Reference implementation of @contentful/optimization-web for Angular applications. Demonstrates all SDK integration patterns — entry resolution, auto and manual tracking, consent, identify/reset, live updates, nested entries, rich text with merge tags, feature flags, analytics event display, and the preview panel.

What this demonstrates

• SDK initialisation as a singleton Angular service
• Page tracking on every route change via the Angular router
• Entry resolution with variant/baseline display
• Auto-tracking via data-ctfl-* DOM attributes
• Manual tracking via sdk.tracking.enableElement
• Click scenarios: direct, descendant, ancestor
• Consent gating
• Identify and reset with session persistence
• Live updates: global toggle and per-entry override
• Preview panel forced-live mode
• Nested entries with recursive resolution
• Rich text rendering with inline merge tags
• Feature flag subscription with auto-emitted view events
• Analytics event display with heartbeat deduplication
• Multi-route navigation with conversion tracking

Prerequisites

• Node.js ^24.15.0 (to match .nvmrc)
• pnpm 10.x

Quick start

From the repository root:

pnpm build:pkgs
pnpm implementation:run -- web-sdk_angular implementation:install
pnpm implementation:run -- web-sdk_angular serve:mocks
pnpm implementation:run -- web-sdk_angular dev
Copy

The app is available at http://localhost:4200. The mock server must be running for entry data and variant resolution to work.

Other commands from the repository root:

pnpm implementation:run -- web-sdk_angular build
pnpm implementation:run -- web-sdk_angular typecheck
Copy

Or equivalently from the implementation directory:

pnpm dev
pnpm build
pnpm typecheck
Copy

Environment variables

Copy .env.example to .env:

cp .env.example .env
Copy

Related

• @contentful/optimization-web — Web SDK