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
131 tutorials · newest first
How to add feature flags and experiments to your app with Gemini CLI
Use Gemini CLI to fetch a report-layout flag, render its assigned layout, and track an exposure only after the assigned report appears. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Gemini CLI
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 4 Nov 2026
How to add guides and surveys to your app with Gemini CLI
Use Gemini CLI to anchor a guide to the report export button, trigger a rating survey after an export, and check the saved response. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Gemini CLI
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 4 Nov 2026
How to add session replay to your app with Gemini CLI
Use Gemini CLI to record a synthetic report export and check that private text is masked and an excluded panel's contents are absent from the replay. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Gemini CLI
- Vite
- Unified SDK 1.1.43
Chris Tam
25 min · 4 Nov 2026
How to add feature flags and experiments to your app with Claude Code
Use Claude Code to fetch a report-layout flag, render its assigned layout, and track an exposure only after the assigned report appears. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Claude Code
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 3 Nov 2026
How to add feature flags and experiments to your app with Codex CLI
Use Codex CLI to fetch a report-layout flag, render its assigned layout, and track an exposure only after the assigned report appears. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Codex CLI
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 3 Nov 2026
How to add feature flags and experiments to your app with Cursor
Use Cursor to fetch a report-layout flag, render its assigned layout, and track an exposure only after the assigned report appears. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Cursor
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 3 Nov 2026
How to add guides and surveys to your app with Claude Code
Use Claude Code to anchor a guide to the report export button, trigger a rating survey after an export, and check the saved response. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Claude Code
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 3 Nov 2026
How to add guides and surveys to your app with Codex CLI
Use Codex CLI to anchor a guide to the report export button, trigger a rating survey after an export, and check the saved response. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Codex CLI
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 3 Nov 2026
How to add guides and surveys to your app with Cursor
Use Cursor to anchor a guide to the report export button, trigger a rating survey after an export, and check the saved response. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Cursor
- Vite
- Unified SDK 1.1.43
Chris Tam
30 min · 3 Nov 2026
How to add session replay to your app with Claude Code
Use Claude Code to record a synthetic report export and check that private text is masked and an excluded panel's contents are absent from the replay. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Claude Code
- Vite
- Unified SDK 1.1.43
Chris Tam
25 min · 3 Nov 2026
How to add session replay to your app with Codex CLI
Use Codex CLI to record a synthetic report export and check that private text is masked and an excluded panel's contents are absent from the replay. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Codex CLI
- Vite
- Unified SDK 1.1.43
Chris Tam
25 min · 3 Nov 2026
How to add session replay to your app with Cursor
Use Cursor to record a synthetic report export and check that private text is masked and an excluded panel's contents are absent from the replay. Review the generated changes against a complete browser example and verify the result in Amplitude.
- Cursor
- Vite
- Unified SDK 1.1.43
Chris Tam
25 min · 3 Nov 2026
How to add feature flags and experiments to an iOS app with Swift
Add a remote report-layout flag to a SwiftUI app with Amplitude's Unified SDK. I'll render compact and expanded reports, track exposure when the assigned layout appears, and send a report-export event for experiment analysis.
- iOS 17+
- SwiftUI
- Unified Swift SDK 0.0.4
Chris Tam
35 min · 29 Oct 2026
How to add session replay to an iOS app with Swift
Add session replay to a SwiftUI report screen, start capture after an explicit choice, and stop it when that choice is withdrawn. Allow about 30 minutes after Xcode and an iOS simulator are installed, plus time for the test replay to process.
- iOS 17+
- SwiftUI
- Unified Swift SDK 0.0.4
Chris Tam
30 min · 28 Oct 2026
How to add product analytics to an iOS app with Swift
Track report opens and date-range changes in a SwiftUI app with Amplitude's Unified SDK. Allow about 25 minutes after Xcode and an iOS simulator are installed.
- iOS 17+
- SwiftUI
- Unified Swift SDK 0.0.4
Chris Tam
25 min · 27 Oct 2026
How to add feature flags to an Android app with Kotlin
Fetch a report-layout flag with Amplitude’s Unified Android SDK and track exposure after rendering it. Allow about 30 minutes once Android Studio is ready.
- Android API 23+
- Kotlin
- Unified Android SDK 1.x
Chris Tam
30 min · 26 Oct 2026
How to add guides and surveys to an Android app with Kotlin
Connect a Kotlin report screen to Amplitude guides and surveys with an analytics plugin, screen targeting, and preview links. Allow about 30 minutes for app setup.
- Android API 24+
- Kotlin
- Engagement SDK 4.x
Chris Tam
30 min · 26 Oct 2026
How to add product analytics to a React Native app
Track report opens and date-range changes with Amplitude's mobile SDK, then connect those events to your existing sign-in flow. Allow about 25 minutes after native development tools are installed.
- React Native 0.88
- Community CLI
- React Native SDK 1.x
Chris Tam
25 min · 26 Oct 2026
How to add product analytics to an Android app with Kotlin
Track report opens and date-range changes with Amplitude's Android Kotlin SDK. Allow about 25 minutes after Android Studio and the native SDK tools are installed.
- Android API 23+
- Kotlin
- Android Kotlin SDK 1.x
Chris Tam
25 min · 26 Oct 2026
How to add session replay to an Android app with Kotlin
Add Amplitude session replay to a Kotlin report screen with explicit consent and conservative masking. Allow about 30 minutes for setup, plus recording verification.
- Android API 23+
- Kotlin
- Unified Android SDK 1.x
Chris Tam
30 min · 26 Oct 2026
How to add agent analytics to a Java backend
Use the standard Amplitude Java SDK to track a Spring report assistant's tool read and model response. I'll connect each job to its signed-in user and keep message content out of telemetry. Allow about 30 minutes.
- Java 21
- Spring Boot 3.5
- Java SDK 1.x
Chris Tam
30 min · 23 Oct 2026
How to add feature flags and experiments to a Java Spring backend
Evaluate a report layout with Amplitude, record exposure when the server chooses the layout, and measure report exports. Allow about 25 minutes.
- Java 21
- Spring Boot 3.5
- Experiment JVM 1.8
Chris Tam
25 min · 23 Oct 2026
How to add product analytics to a Java Spring backend
Track report previews with the Amplitude Java SDK and keep each request's user identity on its event. I'll wire the client into Spring's lifecycle and wait for delivery callbacks during shutdown. Allow about 25 minutes.
- Java 21
- Spring Boot 3.5
- Java SDK 1.x
Chris Tam
25 min · 23 Oct 2026
How to add agent analytics to a Go backend
Send agent events through the Amplitude Go SDK while a report assistant reads usage data and asks a model to explain it. I'll keep job identity, timing, and tokens together without sending message content to Amplitude. Allow about 30 minutes.
- Go 1.27
- net/http
- Go SDK 1.x
Chris Tam
30 min · 22 Oct 2026
How to add feature flags and experiments to a Flutter app
Show a baseline report or a summary variant, then measure report saves with the same analytics identity. Allow about 25 minutes.
- Flutter 3.32+
- Dart 3.8+
- iOS and Android
- Experiment SDK 1.0
Chris Tam
25 min · 22 Oct 2026
How to add feature flags and experiments to a Go backend
Use the Experiment Go SDK to choose a report summary on the server and Amplitude analytics to track exports afterward. I'll keep evaluation and conversion as separate actions. Allow about 25 minutes.
- Go 1.27
- net/http
- Experiment Go SDK
Chris Tam
25 min · 22 Oct 2026
How to add product analytics to a Go backend
Track report previews with the Amplitude Go SDK and attach the right identity to each request. I'll add a reusable client and shut it down after active handlers finish. Allow about 20 minutes.
- Go 1.27
- net/http
- Go SDK 1.x
Chris Tam
20 min · 22 Oct 2026
How to add session replay to a Flutter app
Record the report screen after permission, match it to analytics events, and end recording when the report closes. Allow about 25 minutes.
- Flutter 3.29.2+
- iOS and Android
- Replay SDK 1.0.1
Chris Tam
25 min · 22 Oct 2026
How to add agent analytics to a LangChain app
Install the Amplitude AI SDK with its LangChain extra, pass the Amplitude callback handler to a LangChain agent on every call, group each completed agent invocation into an agent session, and flush before the process exits. About 20 minutes, all copy-paste.
- Python 3.10+
- LangChain 1.x
- Amplitude AI SDK
Chris Tam
20 min · 21 Oct 2026
How to add agent analytics to a Vercel AI SDK app
Record questions and answers from generateText and streamText, with token counts, cached input, cost, and latency in Amplitude. About 20 minutes, with complete JavaScript files.
- Node.js 22+
- AI SDK 7
- OpenAI provider
Chris Tam
20 min · 21 Oct 2026
How to add feature flags and experiments to a Django backend
Evaluate a report flag on the server, return a control or summary variant, and measure exports with the same user identity. Allow about 25 minutes.
- Django
- Python 3.12+
- Experiment SDK 1.13+
Chris Tam
25 min · 21 Oct 2026
How to add feature flags and experiments to a FastAPI backend
Evaluate a report flag on the server, return a control or summary variant, and measure exports with the same user identity. Allow about 25 minutes.
- FastAPI
- Python 3.12+
- Experiment SDK 1.13+
Chris Tam
25 min · 21 Oct 2026
How to add product analytics to a Django backend
Track report previews with the Amplitude Python SDK and connect signed-in activity to anonymous visits. I'll keep authentication in the app and analytics identity on each event. Allow about 20 minutes.
- Django
- Python 3.12+
- Python SDK 1.x
Chris Tam
20 min · 21 Oct 2026
How to add product analytics to a FastAPI backend
Track report previews with the Amplitude Python SDK and connect signed-in activity to anonymous visits. I'll keep authentication in the app and analytics identity on each event. Allow about 20 minutes.
- FastAPI
- Python 3.12+
- Python SDK 1.x
Chris Tam
20 min · 21 Oct 2026
How to add product analytics to a Flutter app
Track named screen navigation and report previews, then connect those events to the app's signed-in user. Allow about 20 minutes.
- Flutter 3.29+
- iOS and Android
- Flutter SDK 4
Chris Tam
20 min · 21 Oct 2026
How to redact PII from your AI agent's prompts and responses
Prove the Amplitude AI SDK's default PII redaction in a test, add patterns and a scrubber for what the defaults miss, choose how much prompt and response text to send, and check what actually arrived. About 20 minutes, all copy-paste.
- Python
- Node.js
- Amplitude AI SDK
Chris Tam
20 min · 21 Oct 2026
How to add Web Experiment to a Framer site
Install Amplitude Web Experiment on a Framer site and test a pricing CTA variant. Check targeting, preview, and impression events before launch.
- Framer
- Published site
- Browser SDK 2
Chris Tam
30 min · 19 Oct 2026
How to add Web Experiment to a Shopify store
Test Shopify storefront offer copy with Web Experiment. Set consent before loading, preserve the product link, and verify impressions and clicks.
- Shopify
- Online Store theme
- Amplitude app
Chris Tam
25 min · 19 Oct 2026
How to add Web Experiment to a Webflow site
Test a Webflow CTA in Amplitude Web Experiment and verify impressions against confirmed form conversions. Allow about 25 minutes for setup and preview.
- Webflow
- Custom code
- Browser SDK 2
- CDN
Chris Tam
25 min · 19 Oct 2026
How to add Web Experiment to an Astro site
Load the Amplitude Web Experiment script at the top of your Astro layout's <head>, give the elements you want to test stable selectors, keep variants applied through <ClientRouter /> navigations, and confirm [Experiment] Impression events land. About 15 minutes, all copy-paste.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
- Web Experiment script
Chris Tam
15 min · 19 Oct 2026
How to add agent analytics to a Claude agent with tool use
Install the Amplitude AI SDK next to the Anthropic SDK, define two tools, run Claude's tool loop through AmplitudeToolLoop inside an agent session, and flush before the process exits. About 20 minutes, all copy-paste.
- Node.js 20.6+
- TypeScript
- Anthropic SDK
- Amplitude AI SDK
Chris Tam
20 min · 19 Oct 2026
How to add agent analytics to a Django app
Install the Amplitude AI SDK in a Django project, wrap a chat view in an agent session, stream replies with StreamingHttpResponse, and link each conversation to the user's browser session. About 20 minutes, all copy-paste.
- Django
- Gunicorn
- Amplitude AI SDK
Chris Tam
20 min · 19 Oct 2026
How to add agent analytics to a FastAPI backend
Install the Amplitude AI SDK in a FastAPI app, wrap an async chat route in an agent session, flush buffered events from the lifespan, and stream replies without dropping the response event. About 20 minutes, all copy-paste.
- FastAPI
- Uvicorn
- Amplitude AI SDK
Chris Tam
20 min · 19 Oct 2026
How to add agent analytics to a Node.js backend
Install the Amplitude AI SDK in an Express server, wrap a chat route in an agent session, record a tool call, stream replies over server-sent events, and flush on shutdown. About 20 minutes, all copy-paste.
- Node.js 20.6+
- Express
- Amplitude AI SDK
Chris Tam
20 min · 19 Oct 2026
How to add feature flags and experiments to an Astro site
Read Amplitude feature flags in the browser on any Astro page, evaluate them in middleware for pages rendered on demand, and send each exposure once. About 30 minutes, all copy-paste.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
- Experiment Node SDK 1.x
Chris Tam
30 min · 19 Oct 2026
How to add guides and surveys to a Framer site
Add Amplitude guides and surveys to a Framer site. Build a pricing-page survey, test its targeting, and verify a synthetic response.
- Framer
- Published site
- Browser SDK 2
Chris Tam
30 min · 19 Oct 2026
How to add guides and surveys to a Shopify store
Add the guides and surveys SDK beside Shopify's app-owned analytics. Target a storefront survey and verify a saved synthetic answer.
- Shopify
- Online Store theme
- Amplitude app
Chris Tam
25 min · 19 Oct 2026
How to add guides and surveys to a Webflow site
Add Amplitude guides and surveys to Webflow, target a pricing-page question, and verify a test response. Allow about 25 minutes for setup and preview.
- Webflow
- Custom code
- Browser SDK 2
- CDN
Chris Tam
25 min · 19 Oct 2026
How to add guides and surveys to a WordPress site
Attach guides and surveys to the WordPress plugin. Target a pricing-page survey and verify a synthetic response in Amplitude.
- WordPress 6.3+
- Custom plugin
- Browser SDK 2
- CDN
Chris Tam
25 min · 19 Oct 2026
How to add guides and surveys to an Astro site
Turn on guides and surveys in an Astro site, send guide links through Astro's navigate(), keep guide UI on screen when <ClientRouter /> replaces the page, anchor a pin, and open a survey from your own button. About 20 minutes, all copy-paste.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
Chris Tam
20 min · 19 Oct 2026
How to add heatmaps to a Framer site
Use Amplitude session replay to create heatmaps for a Framer pricing page. Configure capture, choose a matching background, and check data availability.
- Framer
- Published site
- Browser SDK 2
Chris Tam
20 min plus data collection · 19 Oct 2026
How to add heatmaps to a Shopify store
Enable heatmaps for a Shopify storefront. Match a product URL, select a replay background, and verify viewport and traffic coverage.
- Shopify
- Online Store theme
- Amplitude app
Chris Tam
25 min · 19 Oct 2026
How to add heatmaps to a Webflow site
Enable replay-based heatmap capture for Webflow and create a map for your pricing page. Allow about 20 minutes for setup; usable maps need enough traffic.
- Webflow
- Custom code
- Browser SDK 2
- CDN
Chris Tam
20 min · 19 Oct 2026
How to add heatmaps to a WordPress site
Enable replay-based heatmaps for WordPress. Match the recorded page URL, choose a replay background, and check viewport coverage.
- WordPress 6.3+
- Custom plugin
- Browser SDK 2
- CDN
Chris Tam
20 min · 19 Oct 2026
How to add heatmaps to an Astro site
Confirm session replay records in an Astro site, switch on heatmap capture for the project, give each settings tab its own page 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.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
Chris Tam
15 min · 19 Oct 2026
How to add product analytics to a Framer site
Install Amplitude and track pricing CTA clicks on a Framer site. Follow the published-site checks in about 20 minutes.
- Framer
- Published site
- Browser SDK 2
Chris Tam
20 min · 19 Oct 2026
How to add product analytics to a Shopify store
Track a Shopify offer click alongside app-provided product and cart events. Keep clicks separate from confirmed commerce outcomes.
- Shopify
- Online Store theme
- Amplitude app
Chris Tam
25 min · 19 Oct 2026
How to add product analytics to a Webflow site
Track a Webflow pricing CTA and confirmed native form submissions in Amplitude. Allow about 20 minutes to add the handlers and verify event counts.
- Webflow
- Custom code
- Browser SDK 2
- CDN
Chris Tam
20 min · 19 Oct 2026
How to add product analytics to an Astro site
Install the Amplitude Unified SDK in an Astro site from one client-side module, capture page views on full page loads and <ClientRouter /> navigations, identify signed-in users from middleware, and track one custom event. About 10 minutes, all copy-paste.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
Chris Tam
10 min · 19 Oct 2026
How to add session replay to a Framer site
Add Amplitude session replay to a Framer site and keep form fields masked. Record and play back a synthetic visit in about 20 minutes.
- Framer
- Published site
- Browser SDK 2
Chris Tam
20 min · 19 Oct 2026
How to add session replay to a Shopify store
Configure Shopify replay sampling and masking through the app-connected project. Verify a synthetic storefront recording before production capture.
- Shopify
- Online Store theme
- Amplitude app
Chris Tam
25 min · 19 Oct 2026
How to add session replay to a Webflow site
Record Webflow test sessions with Amplitude, mask private content, and match a replay to its analytics visit. Allow about 20 minutes plus processing time.
- Webflow
- Custom code
- Browser SDK 2
- CDN
Chris Tam
20 min · 19 Oct 2026
How to add session replay to an Astro site
Turn on Amplitude session replay in an Astro site, record every session in development and a small share in production, mask sensitive components and whole sections of the site, and open your own test replay, with or without <ClientRouter />. About 15 minutes, all copy-paste.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
Chris Tam
15 min · 19 Oct 2026
How to add web analytics to a Framer site
Capture campaign attribution and page views on a Framer site with Amplitude. Check a tagged landing visit and internal navigation in about 20 minutes.
- Framer
- Published site
- Browser SDK 2
Chris Tam
20 min · 19 Oct 2026
How to add web analytics to a Shopify store
Connect Shopify to Amplitude with the official app. Verify storefront page views, campaign attribution, and anonymous visitor continuity.
- Shopify
- Online Store theme
- Amplitude app
Chris Tam
25 min · 19 Oct 2026
How to add web analytics to a Webflow site
Add Amplitude to Webflow, capture page views and sessions, and check campaign attribution. Allow about 15 minutes for setup and a first test visit.
- Webflow
- Custom code
- Browser SDK 2
- CDN
Chris Tam
15 min · 19 Oct 2026
How to add web analytics to an Astro site
Configure the Amplitude Unified SDK so every Astro page load and <ClientRouter /> navigation becomes one page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through prerendered and on-demand redirects, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.
- Astro 6+
- Static or on-demand
- Unified SDK 1.x
Chris Tam
15 min · 19 Oct 2026
How to add Web Experiment to a WordPress site
Configure a WordPress CTA copy test with Amplitude Web Experiment. Preview variants and check impressions and accepted form conversions.
- WordPress 6.3+
- Custom plugin
- Browser SDK 2
- CDN
Chris Tam
25 min · 16 Oct 2026
How to add product analytics to a WordPress site
Track a WordPress pricing CTA and a form accepted by the server. Verify a saved acceptance record before counting the conversion.
- WordPress 6.3+
- Custom plugin
- Browser SDK 2
- CDN
Chris Tam
25 min · 16 Oct 2026
How to add session replay to a WordPress site
Configure replay masking in the WordPress plugin. Record a synthetic visit and verify its content and analytics association.
- WordPress 6.3+
- Custom plugin
- Browser SDK 2
- CDN
Chris Tam
20 min · 16 Oct 2026
How to add web analytics to a WordPress site
Add Amplitude web analytics to WordPress through a small plugin. Check page views, campaign attribution, and visitor continuity.
- WordPress 6.3+
- Custom plugin
- Browser SDK 2
- CDN
Chris Tam
20 min · 16 Oct 2026
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 20
- 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 20
- 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.