Native WebViews

In addition to running in a standard web browser environment, the web SDK is also able to detect when it is running in a native WebView, and communicate with mParticle’s native iOS and Android SDKs, if present.

This allows developers to share the JavaScript tracking code between their web app and the WebView of a mobile app.

How it works

When initialized within a native WebView, the web SDK operates only as an intermediary, passing data to the native iOS or Android SDK. Data collected in a WebView is sent to mParticle as Android or iOS data. For this reason, you do not need to set up a Web input in the mParticle platform, or provide an API key in the initialization snippet. Instead, you will need to bind the web SDK to the iOS or Android SDK in your native code.

Because the web SDK acts as write-only within a WebView, a limited subset of the full 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, any get methods, such as those used to return the current user, will not work within a WebView. Similarly, any callbacks, such as the optional callbacks for Identity methods, will not work within a WebView.

Setup

There are three different paths for using the web SDK in a WebView

  • Treat a WebView like a browser - initialize the full web SDK and send data to the Web input. See our standard [Getting Started] guide for this style of implementation.
  • Hybrid - Use the same snippet to send data to mParticle via the Web input when the code is run in a browser, and via the iOS or Android input when the code is run in a WebView.
  • WebView only - take this approach if you only need to track activity in a mobile WebView and you want the activity attributed to the native app.

Hybrid - Web Browser + 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, but set the mParticle.config.useNativeSdk flag to true when your web app is loaded in a webview.

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.

WebView-only

If your web app will only ever be loaded in native app WebView, there’s no need to create a web platform for your app. You can use the custom snippet below to include the web SDK without an API key.

<script type="text/javascript">
 (function () {
     window.mParticle = window.mParticle || {};
     window.mParticle.config = window.mParticle.config || {};
     window.mParticle.config.rq = [];
     window.mParticle.ready = function (f) {
         window.mParticle.config.rq.push(f);
     };
     var mp = document.createElement('script');
     mp.type = 'text/javascript';
     mp.async = true;
     mp.src = 'https://jssdkcdns.mparticle.com/js/v2/mparticle.js';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(mp, s);
 });
 </script>
  1. If you are instrumenting a WebView in a native iOS or Android app, you should additionally follow the Getting Started and Initialization steps for either platform, if you haven’t already.
  2. Follow the instructions below to bind the respective native SDK to your WebView.

Bind the Web SDK

iOS SDK

The mParticle SDK supports both the WKWebView and UIWebView types.

WKWebView (iOS 8+)

//Step 1: Enables the web SDK to pass requests from the webview through the iOS SDK
[myWebView evaluateJavaScript:@"mParticle.isIOS = true;" completionHandler:nil];

//Step 2: Use a WKNavigationDelegate to pass all applicable URL requests to mParticle
- (void) webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if([[MParticle sharedInstance] isMParticleWebViewSdkUrl:navigationAction.request.URL]) {
        [[MParticle sharedInstance] processWebViewLogEvent:navigationAction.request.URL];
    }
    
    decisionHandler(WKNavigationActionPolicyAllow);
}

UIWebView

//Step 1: Enable the web SDK to pass requests from the webview through the iOS SDK
[[MParticle sharedInstance] initializeWebView:myWebView];

//Step 2: Use a UIWebViewDelegate to pass all applicable URL requests to mParticle
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if([[MParticle sharedInstance] isMParticleWebViewSdkUrl:[request URL]]) {
        [[MParticle sharedInstance] processWebViewLogEvent:[request URL]];
        return  NO;
    } else {
        return YES;
    }
}

In order to use the web SDK in an iOS App WebView, you must register every UIWebView with mParticle, with the initializeWebView method, as well as pass all applicable UIWebView URL requests through mParticle.

Android SDK

WebView wv = (WebView) findViewById(R.id.webview);
MParticle.getInstance().registerWebView(wv);

For every WebView in your Android application, add the mParticle web interface to its scope.

Was this page helpful?