@amplitude/analytics-browser

@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
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})}},i=function(e,t,r){e[t]=function(){if(r)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))};!function(e,t,r){e._q.push({name:t,args:Array.prototype.slice.call(r,0)})}(e,t,Array.prototype.slice.call(arguments))}},o=function(e){for(var t=0;t<v.length;t++)i(e,v[t],!1);for(var r=0;r<m.length;r++)i(e,m[r],!0)};r.invoked=!0;var a=t.createElement("script");a.type="text/javascript",a.integrity="sha384-hCwNm84mtQkzJVGi9ynTUEayy3lK/ER+73iTPtyYZAEr3yWPCC/9WBlpme/klUaO",a.crossOrigin="anonymous",a.async=!0,a.src="https://cdn.amplitude.com/libs/analytics-browser-2.32.1-min.js.gz",a.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c);for(var u=function(){return this._q=[],this},l=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],p=0;p<l.length;p++)n(u,l[p]);r.Identify=u;for(var d=function(){return this._q=[],this},y=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setReceipt","setReceiptSig","setCurrency","setEventProperties"],f=0;f<y.length;f++)n(d,y[f]);r.Revenue=d;var v=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],m=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];o(r),r.createInstance=function(e){return r._iq[e]={_q:[]},o(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.

Similar packages

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.