| name | integration-javascript_web |
| description | Amplitude integration for client-side web JavaScript applications using @amplitude/unified (or @amplitude/analytics-browser for existing projects) |
| metadata | {"author":"Amplitude","version":"1.2.6"} |
Amplitude integration for JavaScript Web
This skill helps you add Amplitude analytics to JavaScript Web applications.
Workflow
Follow these steps in order to complete the integration:
references/basic-integration-1.0-begin.md - Amplitude Setup - Begin ← Start herereferences/basic-integration-1.1-edit.md - Amplitude Setup - Editreferences/basic-integration-1.2-revise.md - Amplitude Setup - Revisereferences/basic-integration-1.3-conclude.md - Amplitude Setup - Conclusion
Reference files
references/EXAMPLE.md - JavaScript Web example project codereferences/browser-unified-sdk.md - Amplitude documentation for Browser Unified Sdkreferences/browser-sdk-2.md - Amplitude documentation for Browser Sdk 2references/amplitude-quickstart.md - Amplitude documentation for Amplitude Quickstartreferences/basic-integration-1.0-begin.md - Amplitude setup - beginreferences/basic-integration-1.1-edit.md - Amplitude setup - editreferences/basic-integration-1.2-revise.md - Amplitude setup - revisereferences/basic-integration-1.3-conclude.md - Amplitude setup - conclusion
The example project shows the target implementation pattern. Consult the documentation for API details.
Key principles
- Environment variables: Always use environment variables for Amplitude keys. Never hardcode them.
- Minimal changes: Add Amplitude code alongside existing integrations. Don't replace or restructure existing code.
- Match the example: Your implementation should follow the example project's patterns as closely as possible.
- Unified SDK: For new browser/frontend projects, use
@amplitude/unified as the default SDK — it bundles Analytics, Session Replay, Experiment, and Guides & Surveys in a single package. Initialize with initAll(). Only use @amplitude/analytics-browser if the project already has it installed.
- Event naming: Event names MUST use Title Case with spaces following the [Noun] + [Past-Tense Verb] pattern (e.g., "Button Clicked", "Sign Up Completed", "Cart Viewed"). Do NOT use snake_case, camelCase, or SCREAMING_SNAKE. Property names should use snake_case (e.g., button_text, page_url).
- No PII in events: Never send PII (emails, full names, phone numbers, physical addresses, IP addresses) in
track() event properties. PII belongs in identify() user properties only.
- Autocapture: Enable autocapture in the init config to automatically capture sessions, page views, form interactions, and file downloads. Use the
autocapture config option (not the deprecated defaultTracking).
Identifying users
Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. Call amplitude.setUserId(userId) to associate events with a known user, and use amplitude.identify() with an Identify object to set user properties. Call amplitude.reset() on logout to unlink future events from the current user. If both frontend and backend code exist, pass a consistent user/device ID via custom request headers to maintain event correlation.
