Amplitude Build Tutorials
Ship Amplitude in your stack
Copy-paste tutorials for every framework and coding agent. Complete files, checked against the docs, with a prompt you can hand straight to Cursor or Claude Code.
Featured
Chris Tam · 15 min
How to add web analytics to a Next.js app
Configure the Amplitude Unified SDK so every App Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then open the Marketing Analytics views that read those events. About 15 minutes, all copy-paste.
Chris Tam · 15 min
How to add session replay to a Next.js app
Install the Amplitude Unified SDK in a Next.js App Router project, start session replay once on the client with a sample rate you choose, mask what shouldn't leave the browser, and confirm a replay lands. About 15 minutes, all copy-paste.
All tutorials
60 tutorials · newest first
How to add Web Experiment to a React Router app (formerly Remix)
Load the Amplitude Web Experiment script in the root `Layout` so it runs before React hydrates, give the elements you want to test stable selectors, and confirm `[Experiment] Impression` events land. About 15 minutes, all copy-paste.
- React Router 7+
- React 19
- Framework mode
- Unified SDK 1.x
- Web Experiment script
Chris Tam
15 min · 14 Oct 2026
How to add Web Experiment to an Angular app
Load the Amplitude Web Experiment script first in `src/index.html` so it runs before Angular starts, give the elements you want to test stable selectors, and confirm `[Experiment] Impression` events land. Works with and without Angular SSR. About 15 minutes, all copy-paste.
- Angular 19+
- Unified SDK 1.x
- Web Experiment script
Chris Tam
15 min · 14 Oct 2026
How to add feature flags and experiments to a React Router app (formerly Remix)
Render an Amplitude feature flag's variant in the first HTML and track its exposure from the browser. About 30 minutes, all copy-paste.
- React Router 7+
- Framework mode
- Unified SDK 1.x
- Experiment Node SDK 1.x
Chris Tam
30 min · 14 Oct 2026
How to add feature flags and experiments to an Angular app
Read an Amplitude feature flag through a small signal-based Angular service, send an exposure only when the variant renders, and, if you use Angular SSR, render the variant straight into the first HTML. About 25 minutes, all copy-paste.
- Angular 19+
- Unified SDK 1.x
- Experiment Node SDK 1.x
Chris Tam
25 min · 14 Oct 2026
How to add guides and surveys to a React Router app (formerly Remix)
Turn on guides and surveys in a React Router app, send guide links and buttons through React Router's `navigate()`, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.
- React Router 7+
- Framework mode
- Unified SDK 1.x
Chris Tam
20 min · 14 Oct 2026
How to add guides and surveys to an Angular app
Turn on guides and surveys in an Angular app, send guide links and buttons through Angular Router, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.
- Angular 19+
- Unified SDK 1.x
Chris Tam
20 min · 14 Oct 2026
How to add heatmaps to a React Router app (formerly Remix)
Confirm session replay records in a React Router app, switch on heatmap capture for the project, give each settings tab its own route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.
- React Router 7+
- Framework mode
- Unified SDK 1.x
Chris Tam
15 min · 14 Oct 2026
How to add heatmaps to an Angular app
Turn on session replay in an Angular app from `main.ts`, switch on heatmap capture for the project, give each settings tab its own child route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.
- Angular 19+
- Unified SDK 1.x
Chris Tam
15 min · 14 Oct 2026
How to add product analytics to a React Router app (formerly Remix)
Install the Amplitude Unified SDK in a React Router app through the client entry, capture page views on every client-side navigation, identify signed-in users from your root loader, and track one custom event. About 10 minutes, all copy-paste.
- React Router 7+
- Framework mode
- Unified SDK 1.x
Chris Tam
10 min · 14 Oct 2026
How to add product analytics to an Angular app
Install the Amplitude Unified SDK in an Angular app from `main.ts`, capture page views on every Angular Router navigation, identify signed-in users from a signal, and track one custom event. About 10 minutes, all copy-paste.
- Angular 19+
- Unified SDK 1.x
Chris Tam
10 min · 14 Oct 2026
How to add session replay to a React Router app (formerly Remix)
Turn on Amplitude session replay in a React Router app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.
- React Router 7+
- Framework mode
- Unified SDK 1.x
Chris Tam
15 min · 14 Oct 2026
How to add session replay to an Angular app
Turn on Amplitude session replay in an Angular app, record every session in development and a small share in production, mask sensitive elements and whole routes, and open your own test replay. About 15 minutes, all copy-paste.
- Angular 19+
- Unified SDK 1.x
Chris Tam
15 min · 14 Oct 2026
How to add web analytics to a React Router app (formerly Remix)
Configure the Amplitude Unified SDK so every React Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through `redirect()` and `navigate()`, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.
- React Router 7+
- Framework mode
- Unified SDK 1.x
Chris Tam
15 min · 14 Oct 2026
How to add web analytics to an Angular app
Configure the Amplitude Unified SDK so every Angular Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through `redirectTo`, guards, `router.navigate()`, and Angular SSR server redirects, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.
- Angular 19+
- Unified SDK 1.x
Chris Tam
15 min · 14 Oct 2026
How to add Web Experiment to a SvelteKit app
Load the Amplitude Web Experiment script in src/app.html so it runs before SvelteKit hydrates, give the elements you want to test stable selectors, and confirm [Experiment] Impression events land. About 15 minutes, all copy-paste.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
- Web Experiment script
Chris Tam
15 min · 13 Oct 2026
How to add feature flags and experiments to a SvelteKit app
Render an Amplitude feature flag's variant in SvelteKit's first HTML and track its exposure from the browser. About 30 minutes, all copy-paste.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
- Experiment Node SDK 1.x
Chris Tam
30 min · 13 Oct 2026
How to add guides and surveys to a SvelteKit app
Turn on guides and surveys in a SvelteKit app, send guide links and buttons through SvelteKit's client router, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
Chris Tam
20 min · 13 Oct 2026
How to add heatmaps to a SvelteKit app
Turn on session replay in a SvelteKit app through the client init hook, switch on heatmap capture for the project, give each settings tab its own route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
Chris Tam
15 min · 13 Oct 2026
How to add product analytics to a SvelteKit app
Install the Amplitude Unified SDK in a SvelteKit app through the client init hook, capture page views on every client-side navigation, identify signed-in users from your layout data, and track one custom event. About 10 minutes, all copy-paste.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
Chris Tam
10 min · 13 Oct 2026
How to add session replay to a SvelteKit app
Turn on Amplitude session replay in a SvelteKit app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
Chris Tam
15 min · 13 Oct 2026
How to add web analytics to a SvelteKit app
Configure the Amplitude Unified SDK so every SvelteKit navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through redirect() and goto(), and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.
- SvelteKit 2.10+
- Svelte 5
- Unified SDK 1.x
Chris Tam
15 min · 13 Oct 2026
How to add Web Experiment to a Vue app
Load the Amplitude Web Experiment script in your Vite `index.html` so it runs before Vue mounts, give the elements you want to test stable selectors, and confirm `[Experiment] Impression` events land. About 15 minutes, all copy-paste.
- Vue 3
- Vite
- Vue Router
- Web Experiment script
Chris Tam
15 min · 9 Oct 2026
How to add feature flags and experiments to a Nuxt app
Evaluate an Amplitude feature flag in a Nitro server route with the Experiment Node.js SDK, give the server the same device ID the browser uses, hand the variant to the page through the Nuxt payload, and send the exposure from the browser after the variant renders. About 25 minutes, all copy-paste.
- Nuxt 4 or 3.7+
- Vue 3
- Experiment Node SDK 1.x
- Unified SDK 1.x
- Local evaluation
Chris Tam
25 min · 9 Oct 2026
How to add feature flags and experiments to a Vue app
Create a client deployment and a feature flag with a JSON payload, read the variant through a `useFlag` composable in a Vue and Vite app, refetch when the user signs in, and confirm the exposure lands on the right user. About 15 minutes, all copy-paste.
- Vue 3
- Vite
- Vue Router
- Unified SDK 1.x
Chris Tam
15 min · 9 Oct 2026
How to add guides and surveys to a Vue app
Turn on guides and surveys in a Vue and Vite app, send guide links and buttons through Vue Router, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.
- Vue 3
- Vite
- Vue Router
- Unified SDK 1.x
Chris Tam
20 min · 9 Oct 2026
How to add heatmaps to a Vue app
Turn on session replay in a Vue app built with Vite and Vue Router, switch on heatmap capture for the project, give each settings tab its own child route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.
- Vue 3
- Vite
- Vue Router
- Unified SDK 1.x
Chris Tam
15 min · 9 Oct 2026
How to add product analytics to a Nuxt app
Install the Amplitude Unified SDK in a Nuxt app through a client-only plugin, read the key from runtime config, capture page views on every navigation, identify signed-in users, and track one custom event. About 10 minutes, all copy-paste.
- Nuxt 4 or 3.7+
- Vue 3
- Unified SDK 1.x
Chris Tam
10 min · 9 Oct 2026
How to add product analytics to a Vue app
Install the Amplitude Unified SDK in a Vue app built with Vite, capture page views on every Vue Router navigation, identify signed-in users, and track one custom event. About 10 minutes, all copy-paste.
- Vue 3
- Vite
- Vue Router
- Unified SDK 1.x
Chris Tam
10 min · 9 Oct 2026
How to add session replay to a Vue app
Turn on Amplitude session replay in a Vue, Vite, and Vue Router app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.
- Vue 3
- Vite
- Vue Router
- Unified SDK 1.x
Chris Tam
15 min · 9 Oct 2026
How to add web analytics to a Vue app
Configure the Amplitude Unified SDK so every Vue Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through navigation guards and redirects, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.
- Vue 3
- Vite
- Vue Router
- Unified SDK 1.x
Chris Tam
15 min · 9 Oct 2026
How to send events to Amplitude from your server
Forward the browser's session ID to your API, carry the user's IP and user agent onto server events, dedupe webhook retries with `insert_id`, and backdate events from a background job. About 20 minutes, all copy-paste.
- Node 20.6+
- Express
- Node SDK 1.x
- HTTP V2 API
Chris Tam
20 min · 8 Oct 2026
How to stitch client and server events to one user
Define the user ID once on the server, read the browser's device ID from a header or the Amplitude cookie, send both IDs on the sign-up event, hand the same user ID back to the browser, and reset cleanly on sign-out. About 20 minutes, all copy-paste.
- Node 20.6+
- Express
- Unified SDK 1.x
- Node SDK 1.x
Chris Tam
20 min · 8 Oct 2026
How to use local evaluation for low-latency feature flags in Node.js
Create a local evaluation flag, load its rules into your Express server before it takes traffic, evaluate it in a route with no network call, and track exposures for the users who see it. About 15 minutes, all copy-paste.
- Node 20.6+
- Express
- Experiment Node SDK 1.x
Chris Tam
15 min · 8 Oct 2026
How to add Web Experiment to a React app
Load the Amplitude Web Experiment script in your Vite `index.html` so it runs before React renders, give the elements you want to test stable selectors, and confirm `[Experiment] Impression` events land. About 15 minutes, all copy-paste.
- React 18+
- Vite
- React Router
- Web Experiment script
Chris Tam
15 min · 7 Oct 2026
How to add feature flags and experiments to a Node.js backend
Create a server deployment and a flag with a JSON payload, read the variant in an Express route, track the exposure for the right user, and serve a safe default when the fetch fails. About 15 minutes, all copy-paste.
- Node 20.6+
- Express
- Experiment Node SDK 1.x
Chris Tam
15 min · 7 Oct 2026
How to add feature flags and experiments to a React app
Create a client deployment and a feature flag with a JSON payload, read the variant in a Vite and React Router app, refetch when the user signs in, and confirm the exposure lands on the right user. About 15 minutes, all copy-paste.
- React 18+
- Vite
- React Router
- Unified SDK 1.x
Chris Tam
15 min · 7 Oct 2026
How to add guides and surveys to a React app
Turn on guides and surveys in a Vite and React Router app, send guide links and buttons through your router, anchor a pin to a React component, and open a survey from your own button. About 20 minutes, all copy-paste.
- React 18+
- Vite
- React Router
- Unified SDK 1.x
Chris Tam
20 min · 7 Oct 2026
How to add heatmaps to a React app
Turn on session replay in a Vite and React Router app, switch on heatmap capture for the project, give each tab its own route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.
- React 18+
- Vite
- React Router
- Unified SDK 1.x
Chris Tam
15 min · 7 Oct 2026
How to add product analytics to your app with Claude Code
Connect Claude Code to Amplitude's MCP servers and plugin, hand it one prompt that installs the SDK the docs recommend for your stack, review the diff for the mistakes agents make, and save the rules in CLAUDE.md. About 15 minutes, all copy-paste.
- Claude Code
- Amplitude MCP
- Amplitude plugin
- CLAUDE.md
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to your app with Devin Desktop
Connect Devin Desktop to Amplitude's MCP servers with one project config file, hand its agent one prompt that installs the SDK the docs recommend for your stack, review the diff for the mistakes agents make, and save the rules as a workspace rule. About 15 minutes, all copy-paste.
- Devin Desktop
- Formerly Windsurf
- Amplitude MCP
- .devin/rules
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to your app with Gemini CLI
Connect Gemini CLI to Amplitude's MCP servers, hand it one prompt that installs the SDK the docs recommend for your stack, review its changes for the mistakes agents make, and save the rules in GEMINI.md. About 15 minutes, all copy-paste.
- Gemini CLI
- Amplitude MCP
- Docs MCP
- GEMINI.md
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to your app with Kiro
Connect Kiro to Amplitude's MCP servers, put your API key in an env file, and hand Kiro one prompt that installs the SDK the docs recommend for your stack. Then review the diff for the mistakes agents make, add one event that matches your taxonomy, and save the rules in a steering file. About 15 minutes, all copy-paste.
- Kiro
- Amplitude MCP
- Docs MCP
- Steering
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to your app with Lovable
Connect Lovable to Amplitude's MCP servers, put your API key where the browser can read it, and hand Lovable one prompt that installs the SDK the docs recommend. Then review its changes, add one event that matches your taxonomy, and save the rules as project knowledge. About 15 minutes, all copy-paste.
- Lovable
- React
- TanStack Start
- Amplitude MCP
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to your app with Replit
Connect Replit Agent to Amplitude's MCP servers, give your API key a name the browser can read, and hand Agent one prompt that installs the SDK the docs recommend. Then review its changes, add one event that matches your taxonomy, and save the rules in replit.md. About 15 minutes, all copy-paste.
- Replit
- React
- Vite
- Amplitude MCP
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to your app with v0
Connect v0 to Amplitude's MCP servers, add your API key as an environment variable the browser build can read, and hand v0 one prompt that installs the SDK the docs recommend. Then review its diff, add one event that matches your taxonomy, and save the rules as a v0 Instruction. About 15 minutes, all copy-paste.
- v0
- Next.js
- App Router
- Amplitude MCP
Chris Tam
15 min · 6 Oct 2026
How to add session replay to a React app
Turn on Amplitude session replay in a Vite and React Router app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.
- React 18+
- Vite
- React Router
- Unified SDK 1.x
Chris Tam
15 min · 6 Oct 2026
How to add web analytics to a React app
Configure the Amplitude Unified SDK so every React Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through client-side redirects and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.
- React 18+
- Vite
- React Router
- Unified SDK 1.x
Chris Tam
15 min · 6 Oct 2026
How to add product analytics to a Next.js app
Install the Amplitude Unified SDK in a Next.js App Router project, identify signed-in users, track one custom event from a click and one conversion from a server action, and confirm both land on the same user. About 15 minutes, all copy-paste.
- Next.js 13+
- App Router
- Unified SDK 1.x
- Node SDK 1.x
Chris Tam
15 min · 29 Sept 2026
How to add Web Experiment to a Next.js app
Load the Amplitude Web Experiment script in your Next.js root layout so variants render before the page paints, keep analytics in the npm SDK you already have, and confirm [Experiment] Impression events land. About 15 minutes, and most of it is one <script> tag.
- Next.js 13+
- App Router
- Web Experiment script
Chris Tam
15 min · 25 Sept 2026
How to add agent analytics to a Next.js app
Install the Amplitude AI SDK on the server side of a Next.js app, wrap an LLM route handler in an agent session, link it to the user's browser session, and flush before the function freezes. About 20 minutes, all copy-paste.
- Next.js 15+
- App Router
- Amplitude AI SDK
Chris Tam
20 min · 25 Sept 2026
How to add feature flags and experiments to a Next.js app
Create a client deployment and a feature flag in Amplitude, initialize Feature Experiment in the Next.js App Router, read the variant in a client component, and confirm the exposure lands on the right user. About 15 minutes, all copy-paste.
- Next.js 13+
- App Router
- Unified SDK 1.x
- Feature Experiment
Chris Tam
15 min · 25 Sept 2026
How to add guides and surveys to a Next.js app
Install the Amplitude Unified SDK in a Next.js App Router project, let it boot guides and surveys once on the client, route guide links through the Next.js router, identify signed-in users so targeting works, and open a survey from your own button. About 20 minutes, all copy-paste.
- Next.js 13+
- App Router
- Unified SDK 1.x
Chris Tam
20 min · 25 Sept 2026
How to add heatmaps to a Next.js app
Install the Amplitude Unified SDK with session replay on, initialize it once on the client, give each App Router view its own URL, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.
- Next.js 13+
- App Router
- Unified SDK 1.x
- Session Replay plugin 1.7+
Chris Tam
15 min · 25 Sept 2026
How to add session replay to a Next.js app
Install the Amplitude Unified SDK in a Next.js App Router project, start session replay once on the client with a sample rate you choose, mask what shouldn't leave the browser, and confirm a replay lands. About 15 minutes, all copy-paste.
- Next.js 13+
- App Router
- Unified SDK 1.x
Chris Tam
15 min · 25 Sept 2026
How to add web analytics to a Next.js app
Configure the Amplitude Unified SDK so every App Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then open the Marketing Analytics views that read those events. About 15 minutes, all copy-paste.
- Next.js 13+
- App Router
- Unified SDK 1.x
Chris Tam
15 min · 25 Sept 2026
Track events from React Server Components
Move Amplitude tracking out of Server Component render and into server actions and route handlers, pass the browser's device ID and your user ID to the Node.js SDK, and flush before each request ends. About 15 minutes, all copy-paste.
- Next.js 14+
- App Router
- Node SDK 1.x
Chris Tam
15 min · 25 Sept 2026
Use feature flags with server-side rendering in Next.js
Evaluate an Amplitude feature flag on the server with the Experiment Node server SDK, give the server the same device ID the browser uses, and render the variant in the first HTML, either from a Server Component or from a client component bootstrapped with initialVariants. Exposures go out only after the variant is on screen.
- Next.js 13+
- App Router
- Experiment Node SDK 1.x
- Experiment JS SDK 1.x
- Local evaluation
Chris Tam
25 min · 25 Sept 2026
How to add analytics to your app with Codex CLI
Connect Codex CLI to Amplitude's MCP servers, hand it one prompt that installs the right SDK for your stack, review the diff for the mistakes agents make, and save the rules in AGENTS.md so later edits follow them. About 15 minutes, all copy-paste.
- Codex CLI
- Amplitude MCP
- Docs MCP
- AGENTS.md
Chris Tam
15 min · 24 Sept 2026
How to add product analytics to a Node.js backend
Install the Amplitude Node.js SDK in an Express backend, attach the right user or device ID to every server event, and flush the queue before the process exits. About 15 minutes, all copy-paste.
- Node 20.6+
- Express
- Node SDK 1.x
Chris Tam
15 min · 24 Sept 2026
How to add product analytics to a React app
Install the Amplitude Unified SDK in a Vite and React Router app, capture page views on every client-side navigation, identify signed-in users, and track one custom event. About 10 minutes, all copy-paste.
- React 18+
- Vite
- React Router
- Unified SDK 1.x
Chris Tam
10 min · 24 Sept 2026
Get an API key and start shipping
A free account covers almost every tutorial here. For the full SDK reference, head to the docs.