Track WebViews

Enable tracking in WebViews

Inject the Bridge between the CS Tag in WebView mode and the SDK

This step is threefold:

It will inject our JavaScript Bridge in order to connect the CS Tag in WebView mode and our SDK.
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.
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 simple 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. There are two ways to implement this:

1. Wrap your WebView with CSWebView component

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;

2. Legacy CSWebView implementation

Follow this steps to use the legacy implementation:

1. Use the CSWebView component to render your WebView

Our CSWebView component will perform all the needed task to inject the WebView. Import the 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 the CSWebView URL

CSWebView handles internally setting the URL state. For this, pass the URL to CSWebView (1), then the 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 Component 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;

Inject the CS Tag in WebView mode into your HTML page

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.