Data Subject Request API Version 1 and 2
Data Subject Request API Version 3
Platform API Overview
Accounts
Apps
Audiences
Calculated Attributes
Data Points
Feeds
Field Transformations
Services
Users
Workspaces
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
Bulk Profile Deletion API Reference
Calculated Attributes Seeding API
Custom Access Roles API
Data Planning API
Group Identity API Reference
Pixel Service
Profile API
Events API
mParticle JSON Schema Reference
IDSync
AMP SDK
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
Linting Data Plans
Troubleshooting the Android SDK
API Reference
Upgrade to Version 5
Cordova Plugin
Identity
Direct URL Routing FAQ
Web
Android
iOS
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
App Extensions
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
Getting Started
Identity
Upload Frequency
Getting Started
Opt Out
Initialize the SDK
Event Tracking
Commerce Tracking
Error Tracking
Screen Tracking
Identity
Location Tracking
Session Management
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
Getting Started
Identity
Web
Alexa
Node SDK
Go SDK
Python SDK
Ruby SDK
Java SDK
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
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 1. Create an input
Step 2. Create an output
Step 3. Verify output
Introduction
Outbound Integrations
Firehose Java SDK
Inbound Integrations
Compose ID
Data Hosting Locations
Glossary
Rules Developer Guide
API Credential Management
The Developer's Guided Journey to mParticle
Create an Input
Start capturing data
Connect an Event Output
Create an Audience
Connect an Audience Output
Transform and Enhance Your Data
The new mParticle Experience
The Overview Map
Introduction
Data Retention
Connections
Activity
Live Stream
Data Filter
Rules
Tiered Events
mParticle Users and Roles
Analytics Free Trial
Troubleshooting mParticle
Usage metering for value-based pricing (VBP)
Introduction
Sync and Activate Analytics User Segments in mParticle
User Segment Activation
Welcome Page Announcements
Project Settings
Roles and Teammates
Organization Settings
Global Project Filters
Portfolio Analytics
Analytics Data Manager Overview
Events
Event Properties
User Properties
Revenue Mapping
Export Data
UTM Guide
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
Understanding the Screen View Event
Analyses Introduction
Getting Started
Visualization Options
For Clauses
Date Range and Time Settings
Calculator
Numerical Settings
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
Getting Started with Funnels
Group By Settings
Conversion Window
Tracking Properties
Date Range and Time Settings
Visualization Options
Interpreting a Funnel Analysis
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
Dashboards––Getting Started
Manage Dashboards
Dashboard Filters
Organize Dashboards
Scheduled Reports
Favorites
Time and Interval Settings in Dashboards
Query Notes in Dashboards
User Aliasing
The Demo Environment
Keyboard Shortcuts
Analytics for Marketers
Analytics for Product Managers
Compare Conversion Across Acquisition Sources
Analyze Product Feature Usage
Identify Points of User Friction
Time-based Subscription Analysis
Dashboard Tips and Tricks
Understand Product Stickiness
Optimize User Flow with A/B Testing
User Segments
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
Overview
Create and Manage Group Definitions
Introduction
Catalog
Live Stream
Data Plans
Blocked Data Backfill Guide
Predictive Attributes Overview
Create Predictive Attributes
Assess and Troubleshoot Predictions
Use Predictive Attributes in Campaigns
Predictive Audiences Overview
Using Predictive Audiences
Introduction
Profiles
Warehouse Sync
Data Privacy Controls
Data Subject Requests
Default Service Limits
Feeds
Cross-Account Audience Sharing
Approved Sub-Processors
Import Data with CSV Files
CSV File Reference
Glossary
Video Index
Single Sign-On (SSO)
Setup Examples
Introduction
Introduction
Introduction
Rudderstack
Google Tag Manager
Segment
Advanced Data Warehouse Settings
AWS Kinesis (Snowplow)
AWS Redshift (Define Your Own Schema)
AWS S3 (Snowplow Schema)
AWS S3 Integration (Define Your Own 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)
Aliasing
In addition to running in a standard web browser environment, the web SDK is also able to be connected or “bridged” to mParticle’s native iOS and Android SDKs.
This allows you to build and instrument your app in a web and Javascript context, while taking advantage of the advanced capabilities of the mParticle native iOS or Android SDKs.
In bridged mode, the web SDK operates only as an intermediary that passes data to the iOS or Android SDKs. Data collected in a WebView is sent to the mParticle Events API as Android or iOS data.
Configuring Webviews takes two steps. First, add the web SDK. Second, bind the web SDK to the native layer. Instrumentation depends on your use case, as explained below.
Because the web SDK acts as write-only within a WebView, a limited subset of the full web SDK functionality is available. All event logging works as normal, and the event data is simply passed to the native SDK to be sent on to mParticle. However, HTTP API calls will not work within a WebView. Similarly, any callbacks, such as the optional callbacks for IDSync API methods, will not work within a WebView.
There are two different approaches for using the web SDK in a WebView:
If the same JavaScript will potentially be loaded in a web browser and a native app’s WebView, you should instrument the Web SDK as normal. Start by creating a web input in order to get a Web API key. Then initialize the SDK. This setup will cause the SDK to send data via the web input when in a browser, and via the native SDK when in a WebView. At this point, your set up is complete.
Initializing the Web SDK this way only works if your WebView is not instantiated upon app launch. This is generally the case with most native apps. When a user launches your app, the user is brought to a native app and only navigates to a WebView some time after app launch. Alternatively, some native apps use a WebView as their entire app, and in this case, the webview is instantiated at app launch. If this is the case, you will have to also add a config option to the normal Web SDK set up as shown below:.
<script type="text/javascript">
const mySdkConfig = {
...
requiredWebviewBridgeName: 'myUniqueName', // this must match the bridge name you set for iOS or Android when binding the SDK in step 2
};
window.mParticle = {
config: mySdkConfig
};
// IMPORTANT NOTE! The below snippet is distinct from the WebView only snippet in the next section
(
function(e){window.mParticle=window.mParticle||{};window.mParticle.EventType={Unknown:0,Navigation:1,Location:2,Search:3,Transaction:4,UserContent:5,UserPreference:6,Social:7,Other:8};window.mParticle.eCommerce={Cart:{}};window.mParticle.Identity={};window.mParticle.config=window.mParticle.config||{};window.mParticle.config.rq=[];window.mParticle.config.snippetVersion=2.3;window.mParticle.ready=function(e){window.mParticle.config.rq.push(e)};var i=["endSession","logError","logBaseEvent","logEvent","logForm","logLink","logPageView","setSessionAttribute","setAppName","setAppVersion","setOptOut","setPosition","startNewSession","startTrackingLocation","stopTrackingLocation"];var n=["setCurrencyCode","logCheckout"];var t=["identify","login","logout","modify"];i.forEach(function(e){window.mParticle[e]=o(e)});n.forEach(function(e){window.mParticle.eCommerce[e]=o(e,"eCommerce")});t.forEach(function(e){window.mParticle.Identity[e]=o(e,"Identity")});function o(i,n){return function(){if(n){i=n+"."+i}var e=Array.prototype.slice.call(arguments);e.unshift(i);window.mParticle.config.rq.push(e)}}var r,c,a=window.mParticle.config,s=a.isDevelopmentMode?1:0,l="?env="+s,w=window.mParticle.config.dataPlan;if(w){r=w.planId;c=w.planVersion;if(r){if(c&&(c<1||c>1e3)){c=null}l+="&plan_id="+r+(c?"&plan_version="+c:"")}}var d=window.mParticle.config.versions;var m=[];if(d){Object.keys(d).forEach(function(e){m.push(e+"="+d[e])})}var f=document.createElement("script");f.type="text/javascript";f.async=true;f.src=("https:"==document.location.protocol?"https://jssdkcdns":"http://jssdkcdn")+".mparticle.com/js/v2/"+e+"/mparticle.js"+l+"&"+m.join("&");var p=document.getElementsByTagName("script")[0];p.parentNode.insertBefore(f,p)}
)("REPLACE WITH API KEY");
</script>If your web app will only ever be loaded in your native app’s WebViews, there’s no need to create a web input for your app. You can use the static snippet below to include the web SDK without an API key. For iOS, you should set the mParticle.config.isIOS flag to true when your web app is loaded in a WebView. You will also need to set the bridgename on iOS and Android as detailed below.
<script type="text/javascript">
const mySdkConfig = {
...
requiredWebviewBridgeName: 'myUniqueName', // this must match the bridge name you set for iOS or Android
isIOS: true, // not necessary for Android webviews
};
window.mParticle = {
config: mySdkConfig
};
// IMPORTANT NOTE! Use the below snippet if your web app will only ever be loaded in your native app's WebView. It is unique to this use case and will not work in a hybrid scenario as described earlier.
(
function(){window.mParticle=window.mParticle||{EventType:{Unknown:0,Navigation:1,Location:2,Search:3,Transaction:4,UserContent:5,UserPreference:6,Social:7,Other:8}};window.mParticle.eCommerce={Cart:{}};window.mParticle.Identity={};window.mParticle.config=window.mParticle.config||{};window.mParticle.config.rq=[];window.mParticle.ready=function(t){window.mParticle.config.rq.push(t)};function e(e,o){return function(){if(o){e=o+"."+e}var t=Array.prototype.slice.call(arguments);t.unshift(e);window.mParticle.config.rq.push(t)}}var o=["endSession","logError","logEvent","logForm","logLink","logPageView","setSessionAttribute","setAppName","setAppVersion","setOptOut","setPosition","startNewSession","startTrackingLocation","stopTrackingLocation"];var n=["setCurrencyCode","logCheckout"];var i=["identify","login","logout","modify"];o.forEach(function(t){window.mParticle[t]=e(t)});n.forEach(function(t){window.mParticle.eCommerce[t]=e(t,"eCommerce")});i.forEach(function(t){window.mParticle.Identity[t]=e(t,"Identity")});var r=document.createElement("script");r.type="text/javascript";r.async=true;r.src="https://jssdkcdns.mparticle.com/js/v2/mparticle.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(r,c);}
)(); // NO API KEY!
</script>On Apple SDK version 7.8.6 or later, the native webview bridge API requires a single initialization per instance of a given WKWebView. If you are using an older version of the Apple SDK, please upgrade to the latest version which you can find here.
Allocate a WKWebView (or otherwise acquire a reference to it), and initialize it with mParticle.
The following will add a WKScriptMessageHandler to your WKWebView that is scoped to your mParticle workspace.
- (void)viewDidLoad {
[super viewDidLoad];
WKWebView *myWkWebView = [[WKWebView alloc] init];
[[MParticle sharedInstance] initializeWKWebView: myWkWebView];
}override func viewDidLoad() {
super.viewDidLoad()
let myWkWebView = WKWebView()
MParticle.sharedInstance().initializeWKWebView(myWkWebView)
}The mParticle web SDK will look for this handler by name, forming a bridge to the Apple SDK. By default the handler’s name will be mParticle_<WORKSPACE TOKEN>_<BRIDGE VERSION>.
Where the values are:
<WORKSPACE TOKEN> is an alphanumeric value unique to your mParticle workspace<BRIDGE VERSION> represents the version of the mParticle WebView API (currently v2)Generally, you should let the SDKs use the default bridge names. For advanced use cases, you can customize the bridge name by:
mParticle.config.requiredWebviewBridgeName when initializing the mParticle web SDKSetting the bridge name from the iOS-side, with the following requirements:
mParticle.config.requiredWebviewBridgeName setting on the web SDK should match the bridge name set on iOS.[[MParticle sharedInstance] initializeWKWebView:myWkWebView
bridgeName:@"myUniqueName"];MParticle.sharedInstance().initializeWKWebView(myWkWebView, // reference to your webView variable
bridgeName: "myUniqueName")The following will add a “javascript interface” inline with this documentation:
WebView myWebView = (web view) findViewById(R.id.web view);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
//note that this *must* be before you load the page
MParticle.getInstance().registerWebView(myWebView);
myWebView.loadUrl("http://www.foo.com");The mParticle web SDK will look for this interface by name, forming a bridge to the Android SDK. By default the handler’s name will be mParticleAndroid_<WORKSPACE TOKEN>_<BRIDGE VERSION>
Where the values are:
<WORKSPACE TOKEN> is an alphanumeric value unique to your mParticle workspace<BRIDGE VERSION> represents the version of the mParticle WebView API (currently v2)For advanced use cases, you can customize the bridge name by:
mParticle.config.requiredWebviewBridgeName when initializing the mParticle web SDKmParticle.config.requiredWebviewBridgeName setting on the web SDK should match the bridge name set on Android.MParticle.getInstance().registerWebView(myWebview, "myUniqueName");Was this page helpful?