Track WebViews

How it works

Implementing the Contentsquare Web Tracking Tag on all the web pages that are displayed in your app’s WebViews and that you want to track.

📚 Web Tracking Tag Documentation

Earlier versions of the WebView tracking feature relied on a dedicated WebView Tracking tag and is limited to analytics events only. For pages implementing the WebView Tracking tag, the Session Replay will display the “Untracked WebView” placeholder.
Injecting a JavaScript bridge in your WebViews, which will allow the Tracking Tag you added to the web page in the previous step to communicate with our native SDK.

In order to inject this JavaScript, you will have to use CSWebView component to render your WebView.

Implementing the JavaScript bridge

Here is a simple screen with a react-native-webview WebView component. Let’s detail how we will inject it with the Contentsquare JavaScript WebView interface.

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

1. Use CSWebView component to render your WebView

CSWebView component will perform all the needed task to inject and remove the injection from the WebView. Import CSWebView component (1) and move your current WebView implementation to the renderWebView prop (2) in CSWebView. The renderWebView prop’s callBack exposes an onLayout parameter which will be used to extract the WebView tag needed for the injection. Pass the onLayout parameter to the WebView’s onLayout callBack (3).

import React from 'react';
import { WebView } from 'react-native-webview';
import { CSWebView } from '@contentsquare/react-native-bridge'; // (1)

const WebviewWithTagScreen = () => {
  return (
      <CSWebView // (1)
        renderWebView={(onLayout, webViewUrl) => { // (2)
          return (
            <WebView
              onLayout={onLayout} // (3)
              source={{ uri: "https://www.mywebpage.com" }}
            />
          );
        }}
      />
  );
};

export default WebviewWithTagScreen;

2. Setting CSWebView URL

CSWebView handles internally setting the URL state. For this pass the URL to CSWebView (1) then renderWebView callBack will expose a URL (2) to be set on your webview (3)

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

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

export default WebviewWithTagScreen;

If you have a more complex use for your webviews (e.g. static HTML), you can use our CSWebview API with the source prop (1). Then, the renderWebView callBack will expose a new source object (2) to be passed on to your webview (3)

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

const htmlPage = `<html lang="en">
    ...
  </html>`;

const WebViewWithTagHTML = () => {
  return (
    <CSWebView
      source={{ // (1)
        html: htmlPage,
      }}
      renderWebView={(onLayout, source) => { // (2)
        return <WebView onLayout={onLayout} source={source} />; // (3)
      }}
    />
  );
};

export default WebViewWithTagHTML;