---
title: "WebView tracking"
slug: "webview-tracking"
updated: 2025-03-26T10:32:55Z
published: 2025-03-26T10:32:55Z
canonical: "docs.mapp.com/webview-tracking"
excludeFromExternalSearch: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WebView tracking

## Overview

The [Mapp Intelligence React Native Plugin](https://www.npmjs.com/package/react-native-webview) 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.

> [!NOTE]
> **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](https://github.com/react-native-webview/react-native-webview). You can find its documentation [here](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md).
> 
> 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](https://www.npmjs.com/package/react-native-webview)
- [React Native WebView](https://www.npmjs.com/package/react-native-webview)

---

### Step 2: Import the Hook

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

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

---

### Step 3: Initialize the Hook

Define the `useWebTracking` hook at the beginning of your component:

```javascript
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:

```bash
<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}
/>
```