WebView Tracking

Overview

The Mapp Intelligence React Native Plugin provides a custom hook to enable WebView tracking in React Native apps. This guide walks you through setting up and integrating the useWebTracking hook for intelligent tracking within a WebView component.

Important Note on WebView Support in React Native

React Native does not offer an officially integrated WebView component out of the box. Instead, several third-party solutions exist to implement WebViews.

Mapp Intelligence supports only the officially recommended WebView module. You can find its documentation here.

Please ensure your project uses this package to guarantee compatibility with our tracking functionality.

Setup Steps

Step 1: Install Required Packages

Ensure you have these packages installed:

• Mapp Intelligence React Native Plugin

• React Native WebView

Step 2: Import the Hook

Import the useWebTracking hook at the top of the component where the WebView is used:

import { useWebTracking } from 'mapp-intelligence-reactnative-plugin';

Step 3: Initialize the Hook

Define the useWebTracking hook at the beginning of your component:

const {
  webViewRef,
  handleMessage,
  handleLoad,
  getInjectedJavaScript,
} = useWebTracking(
  (data) => {
    // register callback when onMessage received to execute some additional logic
    console.log('On Message', data);
  },
  () => {
    // register callback when web page onLoad event triggers to execute some additional logic
    console.log('On Load');
  }
);

Hook Parameters

• onMessage: (optional) Callback triggered when the WebView sends a message.

• onLoad: (optional) Callback triggered after the page has fully loaded.

Returned Properties

• webViewRef: Reference used to inject tracking logic.

• handleMessage: Handles communication from the WebView.

• handleLoad: Injects everId or other logic when the page loads.

• getInjectedJavaScript: Returns JavaScript to inject into the WebView.

Step 4: Configure Your WebView

Attach the hook outputs to the corresponding WebView props:

<WebView
  ref={webViewRef}
  source={{
    uri: demoUri,
  }}
  useWebView2={true}
  javaScriptEnabled={true}
  onMessage={handleMessage}
  cacheEnabled={false}
  cacheMode={'LOAD_NO_CACHE'}
  bounces={false}
  webviewDebuggingEnabled={true}
  startInLoadingState={true} // Show a loading indicator while the page is loading
  renderLoading={() => (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  )}
  injectedJavaScript={getInjectedJavaScript(
    `document.body.style.backgroundColor = '#A9A9A9';
    true;`
  )}
  onLoad={handleLoad}
/>