skills.rest
amplitude
amplitudeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

integration-angular

Instrument Amplitude analytics in Angular with SSR-safe proxies and user identification.

28|Updated Dec 5, 2025
Search Tags:#analytics#integration#angular#sdk#web#amplitude
One-click install
npx skills add https://github.com/amplitude/wizard --skill integration-angular-amplitude
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-angular
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-angular
Command: npx skills add https://github.com/amplitude/wizard --skill integration-angular-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular projects often struggle to instrument analytics consistently across client/server boundaries. This skill provides an Angular integration pattern using Amplitude Unified SDK, SSR-safe wrappers, and a ready-to-run reference implementation to instrument events, identify users, and verify data flow.

Core Features & Use Cases

  • Unified SDK initialization: Uses @amplitude/unified and initAll(apiKey) to enable Analytics, Session Replay, and more in Angular apps.
  • SSR-safe usage: Provides a no-op proxy on the server to avoid SSR errors and ensure client-side tracking remains robust.
  • User identification & tracking: Examples show how to set user IDs, send identify payloads, and track common events like login and feature usage.
  • Reference project pattern: Includes example files under references/ to mirror real-world Angular integration.

Quick Start

Run the app with environment config in place to initialize Amplitude in Angular and observe events flowing to Amplitude.

Frequently Asked Questions about integration-angular

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I instrument Amplitude analytics in an Angular application?▼

Instrument Amplitude analytics in Angular by wiring a dedicated AmplitudeService that exposes a browser-safe instance, initializing with initAll(apiKey) via environment.ts, and tracking events across client and server rendering.

How does Amplitude analytics integration handle Angular Universal SSR errors?▼

Amplitude integration handles Angular Universal SSR errors by providing a no-op proxy on the server. This SSR-safe wrapper avoids server-side execution errors while ensuring client-side event tracking remains fully robust.

What is the best way to set up user identification and tracking in Angular for Amplitude?▼

The best way to set up user identification in Angular for Amplitude is using amplitude.setUserId for user IDs and amplitude.identify for payloads. Track common events like login and feature usage through the AmplitudeService.

Does the Amplitude Unified SDK work with Angular for session replay and analytics?▼

Yes, the Amplitude Unified SDK works with Angular by using initAll(apiKey) to enable Analytics, Session Replay, and more. The integration provides a ready-to-run reference pattern for Angular apps.

Why do I need environment-based apiKey configuration for Amplitude in Angular?▼

You need environment-based apiKey configuration in environment.ts to securely initialize Amplitude in Angular. This setup allows initAll(apiKey) to properly enable analytics and session replay across different application environments.

Can I track login flows and user navigation actions in Angular with Amplitude?▼

Yes, you can track login flows and user navigation actions in Angular with Amplitude. The integration applies the AmplitudeService to common flows, setting user IDs and sending identify payloads for client and server rendered apps.

Related Skills

Explore More Software Engineering Skills→
amplitudeamplitude
28

integration-flask

Wire Amplitude API key initialization, identify, and track calls in Flask projects.

Official
Intermediate
fengqiliufengqiliu
2

pm-beta-data-analysis

Analyze event tracking data to generate funnel and cohort retention reports.

Community
Intermediate
WesleyMarinhoWesleyMarinho

angular-routing

Configure Angular v20+ routing with lazy loading, guards, and resolvers.

Community
Advanced
spallempatispallempati

angular-ssr

Implement SSR and hydration in Angular applications using @angular/ssr.

Community
Advanced