@amplitude/analytics-browser

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.

README

@amplitude/analytics-browser

Official Amplitude SDK for Web

Doc

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