What is @amplitude/analytics-browser?
@amplitude/analytics-browser is an npm package that allows you to integrate Amplitude's analytics capabilities into your web applications. It provides tools for tracking user events, managing user identities, and setting up custom properties to gain insights into user behavior.
What are @amplitude/analytics-browser's main functionalities?
Initialize Amplitude
This feature allows you to initialize the Amplitude analytics instance with your API key, which is necessary to start tracking events.
const amplitude = require('@amplitude/analytics-browser');
amplitude.init('YOUR_API_KEY');
Track Events
This feature allows you to track specific events within your application. In this example, a 'Button Clicked' event is tracked with an additional property 'buttonName'.
amplitude.track('Button Clicked', { buttonName: 'Sign Up' });
Identify Users
This feature allows you to identify users and set user properties. In this example, a user with ID 'user123' is identified and a custom property 'plan' is set to 'premium'.
amplitude.identify({ userId: 'user123', userProperties: { plan: 'premium' } });
Set User Properties
This feature allows you to set custom properties for a user. In this example, the user's age and gender are set.
amplitude.setUserProperties({ age: 30, gender: 'female' });
Log Revenue
This feature allows you to log revenue events. In this example, a revenue event is logged with an amount of 10.99 for product 'product_123' with a quantity of 1.
amplitude.logRevenue(10.99, 'product_123', 1);
Other packages similar to @amplitude/analytics-browser
mixpanel-browser
Mixpanel is another popular analytics tool that provides similar functionalities to Amplitude. It allows you to track user interactions, manage user identities, and set custom properties. Mixpanel also offers advanced features like A/B testing and user segmentation.
google-analytics
Google Analytics is a widely-used web analytics service that tracks and reports website traffic. While it offers extensive tracking and reporting capabilities, it is more focused on web traffic analysis compared to the user-centric approach of Amplitude.
@amplitude/analytics-browser
Official Amplitude SDK for Web
Doc
See our Analytics SDK for Browser Reference for a list and description of all available SDK methods.
Installation and Quick Start
Please visit our :100:Developer Center for instructions on installing and using our the SDK.
Installation
To get started with using Amplitude Browser SDK, install the package to your project via npm, yarn or script loader.
Installing via package manager
This SDK is available as a package on npm registry named @amplitude/analytics-browser
. You can install the package using npm or yarn CLI.
Using npm CLI
npm install @amplitude/analytics-browser
Using yarn CLI
yarn add @amplitude/analytics-browser
Import the package into your project and initialize it with your API key.
import * as amplitude from '@amplitude/analytics-browser';
amplitude.init('<YOUR_API_KEY>');
Installing via script loader
This SDK is also available through CDN. Copy the script loader below and paste before the </head>
tag of every page you want to track and initialize it with your API key.
<script type="text/javascript">
!function(){"use strict";!function(e,t){var r=e.amplitude||{_q:[],_iq:{}};if(r.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var n=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,r){return function(n){e._q.push({name:t,args:Array.prototype.slice.call(r,0),resolve:n})}},o=function(e,t,r){e._q.push({name:t,args:Array.prototype.slice.call(r,0)})},i=function(e,t,r){e[t]=function(){if(r)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))};o(e,t,Array.prototype.slice.call(arguments))}},a=function(e){for(var t=0;t<g.length;t++)i(e,g[t],!1);for(var r=0;r<m.length;r++)i(e,m[r],!0)};r.invoked=!0;var c=t.createElement("script");c.type="text/javascript",c.integrity="sha384-1nlifC/b087Q59DrYIadd5XQfdHRS+1q2Z10hTtVslqeRWFgf5MhWBT9VtqGxov9",c.crossOrigin="anonymous",c.async=!0,c.src="https://cdn.amplitude.com/libs/analytics-browser-2.11.7-min.js.gz",c.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var u=t.getElementsByTagName("script")[0];u.parentNode.insertBefore(c,u);for(var l=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],d=0;d<p.length;d++)n(l,p[d]);r.Identify=l;for(var f=function(){return this._q=[],this},v=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],y=0;y<v.length;y++)n(f,v[y]);r.Revenue=f;var g=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],m=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];a(r),r.createInstance=function(e){return r._iq[e]={_q:[]},a(r._iq[e]),r._iq[e]},e.amplitude=r}}(window,document)}();
amplitude.init("<YOUR_API_KEY>");
</script>
Tracking events
Once the SDK is initialize, you can start tracking events.
amplitude.track('Page Viewed');
For in-depth documentation, please visit to our Developer Center.