Track WebViews

This step is threefold:

1. It will inject our JavaScript Bridge in order to connect the CS Tag in WebView mode and our SDK.
2. It will inject your CS Tag in WebView mode if it was not already injected, allowing us to gather data on all your webviews, even when the user is offline, on pages showing local HTML.
3. It will inject a window.CS_isWebView variable for you to use in order to detect if the page is loaded from a WebView.

In order to inject this JavaScript, you will use our CSWebView component to render your WebView, as detailed bellow.

Here is a screen with a react-native-webview WebView component.

import { WebView } from "react-native-webview";
const WebviewWithTagScreen = () => {
  return (
    <>
      <WebView source={{ uri: "https://www.mywebpage.com" }} />
    </>
  );
};
export default WebviewWithTagScreen;

Let’s walk through how we can inject it with a custom JavaScript interface.

In order to inject your WebView with the Contentsquare JavaScript WebView interface you will need to wrap your original WebView with CSWebView component. CSWebView component will handle all.

import { WebView } from "react-native-webview";
const WebviewWithTagScreen = () => {
  return (
    <>
      <CSWebView>
        <WebView source={{ uri: "https://www.mywebpage.com" }} />
      </CSWebView>
    </>
  );
};
export default WebviewWithTagScreen;

After doing all the above, in order for the implementation to be completed, you will need to make sure our CS Tag in WebView mode is injected on your pages. To do so, refer to 📚 Mobile Apps WebView Tracking Documentation.

If you are migrating from a previous version of the Contentsquare React Native SDK, update your CSWebView implementation:

import React from "react";
import { WebView } from "react-native-webview";
import { CSWebView } from "@contentsquare/react-native-bridge";

const WebviewWithTagScreen = () => {
  return (
     // This method is deprecated
     <CSWebView
      url="https://www.mywebpage.com"
      renderWebView={(onLayout, webViewUrl) => {
        return (
          <WebView
            onLayout={onLayout}
            source={{ uri: webViewUrl }}
          />
        );
      }}
    />
    <CSWebView>
      <WebView source={{ uri: "https://www.mywebpage.com" }} />
    </CSWebView>
  );
};

export default WebviewWithTagScreen;