Developers
API References
Platform API
Key Management
Platform API Overview
Accounts
Apps
Audiences
Calculated Attributes
Data Points
Feeds
Field Transformations
Services
Users
Workspaces
Warehouse Sync API
Warehouse Sync API Overview
Warehouse Sync API Tutorial
Warehouse Sync API Reference
Data Mapping
Warehouse Sync SQL Reference
Warehouse Sync Troubleshooting Guide
ComposeID
Warehouse Sync API v2 Migration
Data Subject Request API
Data Subject Request API Version 1 and 2
Data Subject Request API Version 3
Audit Logs API
Bulk Profile Deletion API Reference
Calculated Attributes Seeding API
Custom Access Roles API
Data Planning API
Household Reach API Reference
Pixel Service
Profile API
Events API
mParticle JSON Schema Reference
IDSync
Client SDKs
AMP
AMP SDK
Cordova
Cordova Plugin
Identity
Direct Url Routing
Direct URL Routing FAQ
Web
Android
iOS
Android
Initialization
Configuration
Network Security Configuration
Event Tracking
User Attributes
IDSync
Screen Events
Commerce Events
Location Tracking
Media
Kits
Application State and Session Management
Data Privacy Controls
Error Tracking
Opt Out
Push Notifications
WebView Integration
Logger
Preventing Blocked HTTP Traffic with CNAME
Workspace Switching
Linting Data Plans
Troubleshooting the Android SDK
API Reference
Upgrade to Version 5
iOS
Workspace Switching
Initialization
Configuration
Event Tracking
User Attributes
IDSync
Screen Tracking
Commerce Events
Location Tracking
Media
Kits
Application State and Session Management
Data Privacy Controls
Error Tracking
Opt Out
Push Notifications
Webview Integration
Upload Frequency
Preventing Blocked HTTP Traffic with CNAME
Linting Data Plans
Troubleshooting iOS SDK
Social Networks
iOS 14 Guide
iOS 15 FAQ
iOS 16 FAQ
iOS 17 FAQ
iOS 18 FAQ
API Reference
Upgrade to Version 7
Upgrade to Version 9
React Native
Getting Started
Identity
Unity
Upload Frequency
Getting Started
Opt Out
Initialize the SDK
Event Tracking
Commerce Tracking
Error Tracking
Screen Tracking
Identity
Location Tracking
Session Management
Web
Initialization
Configuration
Content Security Policy
Event Tracking
User Attributes
IDSync
Page View Tracking
Commerce Events
Location Tracking
Media
Kits
Application State and Session Management
Data Privacy Controls
Error Tracking
Opt Out
Custom Logger
Persistence
Native Web Views
Self-Hosting
Multiple Instances
Web SDK via Google Tag Manager
Preventing Blocked HTTP Traffic with CNAME
Facebook Instant Articles
Troubleshooting the Web SDK
Browser Compatibility
Linting Data Plans
API Reference
Upgrade to Version 2 of the SDK
Xamarin
Getting Started
Identity
Alexa
Quickstart
Android
Overview
Step 1. Create an input
Step 2. Verify your input
Step 3. Set up your output
Step 4. Create a connection
Step 5. Verify your connection
Step 6. Track events
Step 7. Track user data
Step 8. Create a data plan
Step 9. Test your local app
iOS Quick Start
Overview
Step 1. Create an input
Step 2. Verify your input
Step 3. Set up your output
Step 4. Create a connection
Step 5. Verify your connection
Step 6. Track events
Step 7. Track user data
Step 8. Create a data plan
Python Quick Start
Step 1. Create an input
Step 2. Create an output
Step 3. Verify output
Server SDKs
Node SDK
Go SDK
Python SDK
Ruby SDK
Java SDK
Guides
Partners
Introduction
Outbound Integrations
Outbound Integrations
Firehose Java SDK
Inbound Integrations
Compose ID
Glossary
Data Hosting Locations
Rules Developer Guide
API Credential Management
The Developer's Guided Journey to mParticle
Guides
Composable Audiences
Composable Audiences Overview
User Guide
User Guide Overview
Warehouse Setup
Warehouse Setup Overview
Audience Setup
Frequently Asked Questions
Customer 360
Overview
User Profiles
Overview
User Profiles
Household Reach
Calculated Attributes
Calculated Attributes Overview
Using Calculated Attributes
Create with AI Assistance
Calculated Attributes Reference
Predictions
Predictions Overview
What's Changed in the New Predictions UI
View and Manage Predictions
Predict Future Behavior
Future Behavior Predictions Overview
Create Future Behavior Prediction
Manage Future Behavior Predictions
Create an Audience with Future Behavior Predictions
Identity
Identity Dashboard
Identity Logs
Getting Started
Create an Input
Start capturing data
Connect an Event Output
Create an Audience
Connect an Audience Output
Transform and Enhance Your Data
Platform Guide
Billing
Usage and Billing Report
The New mParticle Experience
The new mParticle Experience
The Overview Map
Observability
Observability Overview
Observability User Guide
Observability Troubleshooting Examples
Observability Span Glossary
Platform Settings
Key Management
Audit Logs
Platform Configuration
Event Forwarding
Event Match Quality Dashboard
Notifications
System Alerts
Trends
Introduction
Data Retention
Data Catalog
Connections
Activity
Data Plans
Live Stream
Filters
Rules
Blocked Data Backfill Guide
Tiered Events
mParticle Users and Roles
Analytics Free Trial
Usage metering for value-based pricing (VBP)
Troubleshooting mParticle
IDSync
IDSync Overview
Use Cases for IDSync
Components of IDSync
Store and Organize User Data
Identify Users
Default IDSync Configuration
Profile Conversion Strategy
Profile Link Strategy
Profile Isolation Strategy
Best Match Strategy
Aliasing
Segmentation
Audiences
Audiences Overview
Create an Audience
Connect an Audience
Manage Audiences
Audience Sharing
Audience Expansion
Match Boost
FAQ
Inclusive & Exclusive Audiences (Early Access)
Inclusive & Exclusive Audiences Overview
Using Logic Blocks in Audiences
Combining Inclusive and Exclusive Audiences
Inclusive & Exclusive Audiences FAQ
Audience Agent (Early Access)
Audience Agent Overview
Building Audiences with the Agent
Data and Privacy
Classic Audiences
Standard Audiences (Legacy)
Predictive Audiences
Predictive Audiences Overview
Using Predictive Audiences
New vs. Classic Experience Comparison
Analytics
Introduction
Core Analytics (Beta)
Setup
Sync and Activate Analytics User Segments in mParticle
User Segment Activation
Welcome Page Announcements
Settings
Project Settings
Roles and Teammates
Organization Settings
Global Project Filters
Portfolio Analytics
Analytics Data Manager
Analytics Data Manager Overview
Events
Event Properties
User Properties
Revenue Mapping
Export Data
UTM Guide
Analyses
Analyses Introduction
Segmentation: Basics
Getting Started
Visualization Options
For Clauses
Date Range and Time Settings
Calculator
Numerical Settings
Segmentation: Advanced
Assisted Analysis
Properties Explorer
Frequency in Segmentation
Trends in Segmentation
Did [not] Perform Clauses
Cumulative vs. Non-Cumulative Analysis in Segmentation
Total Count of vs. Users Who Performed
Save Your Segmentation Analysis
Export Results in Segmentation
Explore Users from Segmentation
Funnels: Basics
Getting Started with Funnels
Group By Settings
Conversion Window
Tracking Properties
Date Range and Time Settings
Visualization Options
Interpreting a Funnel Analysis
Funnels: Advanced
Group By
Filters
Conversion over Time
Conversion Order
Trends
Funnel Direction
Multi-path Funnels
Analyze as Cohort from Funnel
Save a Funnel Analysis
Explore Users from a Funnel
Export Results from a Funnel
Saved Analyses
Manage Analyses in Dashboards
Query Builder
Data Dictionary
Query Builder Overview
Modify Filters With And/Or Clauses
Query-time Sampling
Query Notes
Filter Where Clauses
Event vs. User Properties
Group By Clauses
Annotations
Cross-tool Compatibility
Apply All for Filter Where Clauses
Date Range and Time Settings Overview
User Attributes at Event Time
Understanding the Screen View Event
User Aliasing
Dashboards
Dashboards––Getting Started
Manage Dashboards
Dashboard Filters
Organize Dashboards
Scheduled Reports
Favorites
Time and Interval Settings in Dashboards
Query Notes in Dashboards
Analytics Resources
The Demo Environment
Keyboard Shortcuts
User Segments
Data Privacy Controls
Data Subject Requests
Default Service Limits
Feeds
Cross-Account Audience Sharing
Import Data with CSV Files
Import Data with CSV Files
CSV File Reference
SFTP Credentials
Glossary
Video Index
Analytics (Deprecated)
Identity Providers
Single Sign-On (SSO)
Setup Examples
Introduction
Developer Docs
Introduction
Integrations
Introduction
Rudderstack
Google Tag Manager
Segment
Data Warehouses and Data Lakes
Advanced Data Warehouse Settings
AWS Kinesis (Snowplow)
AWS Redshift (Define Your Own Schema)
AWS S3 Integration (Define Your Own Schema)
AWS S3 (Snowplow Schema)
BigQuery (Snowplow Schema)
BigQuery Firebase Schema
BigQuery (Define Your Own Schema)
GCP BigQuery Export
Snowflake (Snowplow Schema)
Snowplow Schema Overview
Snowflake (Define Your Own Schema)
Developer Basics
Aliasing
Integrations
24i
Event
Aarki
Audience
ABTasty
Audience
Actable
Feed
AdChemix
Event
AdMedia
Audience
Adobe Marketing Cloud
Cookie Sync
Server-to-Server Events
Platform SDK Events
Adobe Audience Manager
Audience
Adobe Campaign Manager
Audience
Adobe Experience Platform
Event
AdPredictive
Feed
Adobe Target
Audience
AgilOne
Event
Algolia
Event
Amazon Kinesis
Event
Amazon Redshift
Data Warehouse
Amazon SNS
Event
Amazon SQS
Event
Amobee
Audience
Anodot
Event
Antavo
Feed
Apptentive
Event
Apptimize
Event
Apteligent
Event
Bidease
Audience
Microsoft Azure Blob Storage
Event
Bluecore
Event
Bluedot
Feed
Bing Ads
Event
Branch S2S Event
Event
Bugsnag
Event
Cadent
Audience
Census
Feed
comScore
Event
Conversant
Event
Crossing Minds
Event
Custom Feed
Custom Feed
Databricks
Data Warehouse
Datadog
Event
Didomi
Event
Edge226
Audience
Eagle Eye
Audience
Emarsys
Audience
Epsilon
Event
Everflow
Audience
Google Analytics for Firebase
Event
Awin
Event
Flurry
Event
Facebook Offline Conversions
Event
ForeSee
Event
Flybits
Event
Friendbuy
Event
FreeWheel Data Suite
Audience
Google Ad Manager
Audience
Google Analytics 4
Event
Google BigQuery
Audience
Data Warehouse
Google Analytics
Event
Google Enhanced Conversions
Event
Google Marketing Platform
Cookie Sync
Audience
Event
Google Marketing Platform Offline Conversions
Event
Google Pub/Sub
Event
Google Tag Manager
Event
Heap
Event
Herow
Feed
Hightouch
Feed
Hyperlocology
Event
Ibotta
Event
Impact
Event
ID5
Kit
InMarket
Audience
Inspectlet
Event
Intercom
Event
ironSource
Audience
Kafka
Event
Kissmetrics
Event
Kubit
Event
LaunchDarkly
Feed
LifeStreet
Audience
Liveramp
Audience
LiveLike
Event
Localytics
Event
MadHive
Audience
mAdme Technologies
Event
Marigold
Audience
MediaMath
Audience
Mediasmart
Audience
Microsoft Ads
Microsoft Ads Audience Integration
Microsoft Azure Event Hubs
Event
Mintegral
Audience
Monetate
Event
Movable Ink
Event
Movable Ink - V2
Event
Multiplied
Event
Nanigans
Event
Nami ML
Feed
NCR Aloha
Event
Neura
Event
OneTrust
Event
Oracle BlueKai
Event
Paytronix
Feed
Persona.ly
Audience
Personify XP
Event
Plarin
Event
Primer
Event
Qualtrics
Event
Quantcast
Event
Rakuten
Event
Reveal Mobile
Event
RevenueCat
Feed
Salesforce Mobile Push
Event
Scalarr
Event
SFTP
Audience
Shopify
Custom Pixel
Feed
SimpleReach
Event
Singular-DEPRECATED
Event
Skyhook
Event
Smadex
Audience
Slack
Event
SmarterHQ
Event
Snapchat Conversions
Event
Snowflake
Audience
Data Warehouse
Snowplow
Event
Splunk MINT
Event
StartApp
Audience
Talon.One
Audience
Feed
Event
Loyalty Feed
Tapad
Audience
Tapjoy
Audience
Taplytics
Event
Teak
Audience
Taptica
Audience
The Trade Desk
Audience
Cookie Sync
Event
Ticketure
Feed
Triton Digital
Audience
Valid
Event
TUNE
Event
Vkontakte
Audience
Vungle
Audience
Webhook
Event
White Label Loyalty
Event
Webtrends
Event
Xandr
Audience
Cookie Sync
Yahoo (formerly Verizon Media)
Audience
Cookie Sync
Wootric
Event
Yotpo
Feed
YouAppi
Audience
Regal
Event
Overview
mParticle is a customer data platform that makes it easy to collect and organize data before sending it to product analytics, A/B testing, marketing automation, and data warehousing tools.
mParticle provides several SDKs and APIs allowing you to collect data from a variety of sources, like a mobile app, web app, or data feeds from other SaaS providers.
You can collect two types of data with mParticle:
- Event data: data that describes what your users are doing
- User data: data that describes who your users are
Learn how to integrate the Web SDK from start to finish
To demonstrate how mParticle works, you will learn how to track basic event data like page views and purchase events in a web app using the mParticle web SDK. Then, you will learn how to send that data to a webhook. You will also learn how to manage your data quality by creating a data plan.
mParticle is extremely flexible. There are thirteen SDKs for specific platforms like web, iOS, and Android, in addition to several APIs. mParticle also provides over 250 integrations with data warehouse, analytics, and marketing automation tools.
To keep your first steps with mParticle quick and easy, this tutorial uses the web SDK and a sample ecommerce app built using React called The Higgs Shop.
About the Web SDK
mParticle’s Web SDK supports commonly used web browsers, connected TVs, and other client-side environments using JavaScript and TypeScript.
By initializing the Web SDK in your app, you gain access to useful methods you can call in your app’s code to send events and user data to mParticle.
Prerequisites
Access to an mParticle instance
In order to begin sending data from your app to mParticle, you will need access to an mParticle account and an API key.
Download the mParticle sample app
This tutorial demonstrates how mParticle works using The Higgs Shop, a sample web application built using React.
- Open your terminal or command prompt, and clone the web sample app repository on GitHub.
Install the sample app
- While in your terminal or command prompt, navigate to the root folder of the web sample app:
/mparticle-sample-apps/mparticle-web-sample-apps/core-sdk-samples/higgs-shop-sample-app - If you don’t have Node.js or npm installed, install them now. Optionally, you may also install Node Version Manager (nvm) which is a helpful tool for installing and managing different versions of Node.
- Install the sample app’s dependencies with
npm install - Open the folder /higgs-shop-sample-app in your IDE or text editor. Rename the file
.env.sampleto.env. We will replace the environment variableREACT_APP_MPARTICLE_API_KEYwith the API Key in step 5 - To run the sample app from your computer, run
npm start. This will start a development server before automatically opening The Higgs Shop in a new browser window.
- For now, ignore the API key warning and close the page and stop the development server in your terminal or command prompt. In the next step, we’ll create and add our API key before restarting the sample app.
Was this page helpful?
- Last Updated: June 25, 2026