WebView¶

You can use JavaScript to track events and set user profile values within web pages displayed by native WebViews.

Warning

This document describes how to use WebView for those who have deployed the iOS SDK or Android SDK; if you have deployed the Web SDK, please refer to Using Web SDK with WebView .
To configure user profiles in native WebViews, you must have iOS SDK 5.19.0 or higher and Android SDK 5.18.0 or higher, and use repro.js version 6 or higher . The following is a list of requirements in order to access Repro from within webviews.
- Please see User Profile for detailed usage.

Note

SFSafariViewController under iOS is not supported.
Furthermore WebViews in Unity and Cocos2d-x are not supported as well.
In case you use WebViews in Cordova or Monaca the implementation instructions on this page are not necessary.
See also: Event Tracking.

The following settings are required to use the Repro functionality from within WebViews.

Enable the use of Repro in WebViews¶

First, enable event tracking and user profile settings in WebViews. The method of enabling is different for iOS and Android, so both methods are explained separately.

iOS¶

Pass the delegate object which you set to WKWebView object.

In the following example MyViewController will implement the WKNavigationDelegate protocol so it can be passed as a delegate to a WKNavigation instance. To start tracking you will also have to pass the delegate to Repro.startWebViewTracking(). Just use self as the parameter.

@interface MyViewController () <WKNavigationDelegate>

- (void)viewDidLoad
{
    [super viewDidLoad];

    WKWebView *webView = [[WKWebView alloc] init];

    ...

    [Repro startWebViewTracking:self];
    webView.navigationDelegate = self;
}

class MyViewController: WKNavigationDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        let webView = WKWebView()

        ...

        Repro.startWebViewTracking(delegate: self)
        self.webView.navigationDelegate = self
    }

// This section explains the implementation in iOS.
// Please change the language to Objective-C or Swift.

// This section explains the implementation in iOS.
// Please change the language to Objective-C or Swift.

// This section explains the implementation in android.
// Please change the language to Objective-C or Swift.

Warning

You must call startWebViewTracking: before you set WKWebView's navigationDelegate.

After completing the settings, proceed to Add Tracking Code on Your Web Page.

Android¶

To track events and set user profiles in WebViews, pass the WebView itself and an optinal WebViewClient set to startWebViewTracking().

// This section explains the implementation in android.
// Please change the language to java.

// This section explains the implementation in android.
// Please change the language to java.

import android.webkit.WebView;
import android.webkit.WebViewClient;
import io.repro.android.Repro;

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView webView = (WebView)findViewById(R.id.webView);
        WebViewClient client = /* your WebViewClent object or null */;
        // webView.setWebViewClient(client); **Avoid implementing this line**

        // call startWebViewTracking() with webView and client
        Repro.startWebViewTracking(webView, client);

        // (Optional) You must specify "utf-8" as default encoding if you track events included localized strings
        webView.getSettings().setDefaultTextEncodingName("utf-8");
    }
}

// This section explains the implementation in android.
// Please change the language to java.

// This section explains the implementation in android.
// Please change the language to java.

Warning

startWebViewTracking() will execute WebView.setWebViewClient() inside it. Therefore, even if you implement your own WebViewClient, avoid explicitly calling WebView.setWebViewClient().

Warning

Note that WebView tracking is not possible, if WebView.setWebViewClient() is executed after startWebViewTracking().

Warning

To perform HTTP communication with an OS after Android 9 Pie, you will need to explicitly designate the authorizing HTTP communication domain. For details, please refer to Cannot track HTTP page Webview in Android 9 Pie.

After completing the settings, proceed to Add Tracking Code on Your Web Page.

React Native¶

Only react-native-webview supports React Native WebView.

In react-native-webview onShouldStartLoadWithRequest pass request.url to Repro's handleWebViewUrl.

Next, add 'repro://*' to the originWhitelist.

Sample code is presented below.

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

render() {
    return <WebView
        source={{ uri: 'https://somewebsite_that_loads_repro.js' }}
        style={{ flex: 1 }}
        originWhitelist={['https://*', 'repro://*']}
        onShouldStartLoadWithRequest={ (request) => {
            if (Repro.handleWebViewUrl(request.url)) {
                return false;
            }
            ... optional other custom code ...

            return true;
        }}
    />
}

// This section explains the implementation in React Native.
// Please change the language to JavaScript(React Native).

After completing the settings, proceed to Add Tracking Code on Your Web Page.

Flutter¶

Flutter's WebView supports webview_flutter and flutter_inappwebview . Also, Please note that webview_flutter and flutter_inappwebview are implemented differently.

The sample code for webview_flutter is as follows Set setJavaScriptMode to JavaScriptMode.unrestricted.

Next, add addJavaScriptChannel and pass the data.message received with onMessageReceived to handleWebViewUrl.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// WebViewControllerの初期化
final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

// JavaScriptチャンネルの追加
controller.addJavaScriptChannel(
  Repro.WEBVIEW_FLUTTER_CHANNEL_NAME,
  onMessageReceived: (JavaScriptMessage data) {
    Repro.handleWebViewUrl(data.message);
  },
);

// WebViewWidgetの作成
WebViewWidget(controller: controller)

The sample code for flutter_inappwebview is as follows Pass navigationAction.request.url.toString() to Repro's handleWebViewUrl in shouldOverrideUrlLoading.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

// This section explains the implementation in Flutter.
// Please change the language to Dart.

InAppWebView(
  // ...
  shouldOverrideUrlLoading: (controller, navigationAction) async {
    if (Repro.handleWebViewUrl(navigationAction.request.url.toString())) {
      return NavigationActionPolicy.CANCEL;
    }
    // optional other custom code ...

    return NavigationActionPolicy.ALLOW;
  },
  // ...
)

After completing the settings, proceed to Add Tracking Code on Your Web Page.

Add Tracking Code on Your Web Page¶

Load our JavaScript library repro.js in your html. Please add the following to the page where you want to generate tracking tags.

<head>
  ...
  <script src="//cdn.reproio.com/js/v8/repro.js" type="text/javascript" charset="utf-8"></script>
  ...
</head>

Prevent repro.js from execution after load

In order to use your HTML in a normal browser or if tracking is undesired, please use the flag isInAppBrowser to prevent repro.js from being executed. When isInAppBrowser is set to false, repro.js won't execute. The default value of isInAppBrowser is true.

In the following example, it checks the value of user agent by regular expression, and sets the result to isInAppBrowser. By setting the value of user agent which matches with the regular expression set by the app, repro.js runs only when the page is being viewed by the WebView of the app.

<head>
  ...
  <script>
    // enable repro.js only when loading this HTML by your app's WebView
    window.repro = window.repro || {};
    window.repro.isInAppBrowser = /MY_CUSTOM_USER_AGENT/.test(navigator.userAgent);
  </script>
  <script src="//cdn.reproio.com/js/v8/repro.js" type="text/javascript" charset="utf-8"></script>
  ...
</head>

Please see bellow to know how to specify the user agent in your app.