Track WebViews

Enable tracking in WebViews

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

This step will inject our JavaScript Bridge in order to connect the CS Tag in WebView mode and our SDK.

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. 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. Retrieve the native tag to the WebView

In order to be able to call our bridge injection functions, you need to store the native tag of the WebView component, which acts as an identifier, so you can inject it with Contentsquare bridge later. We do that using the useState hook (1), and setting it to the value of the webview target (2) we get from the onLoadStart callback of the WebView component (3).

import React, { useState } from 'react';
import { WebView } from 'react-native-webview';
import { WebViewNavigationEvent } from 'react-native-webview/lib/WebViewTypes';

const WebviewWithTagScreen = () => {
  const [webViewNativeTag, setWebviewNativeTag] = useState<number>(); // (1)

  const loadStart = (event: WebViewNavigationEvent) => {
    // react-native-webview typing for nativeEvent.target is not correct
    // @ts-ignore
      const webViewTag = (event.nativeEvent.target as number)
      if (webViewTag) {
          setWebviewNativeTag(webViewTag); // (2)
      }
  }

  return (
      <>
        <WebView
          source={{ uri: "https://www.mywebpage.com" }}
          onLoadStart={loadStart} // (3)
        />
      </>
  );
};

export default WebviewWithTagScreen;

2. Call the Contentsquare bridge’s injection/removal functions

In order for the injection and removal to be successful, you should call the bridge when your WebView is fully loaded, and before it is destroyed. To avoid multiple injections issues, you have to create a new state (1) to set the tag once it is injected (2). You should inject the tag (3) in a function you pass to the onLoadEnd callback of the WebView (4) and remove the injection in the useLayoutEffect (5). Make sure to only inject it once, and pay attention to side effects of useLayoutEffect when states change within your component.

import Contentsquare from '@contentsquare/react-native-bridge';
import React, { useState, useLayoutEffect } from 'react';
import { WebView } from 'react-native-webview';
import { WebViewNavigationEvent } from 'react-native-webview/lib/WebViewTypes';

const WebviewWithTagScreen = () => {
   const [webViewNativeTag, setWebviewNativeTag] = useState<number>();
   const [injectedWebViewTag, setInjectedWebViewTag] = useState<number>(); // (1)

   const loadStart = (event: WebViewNavigationEvent) => {
    // react-native-webview typing for nativeEvent.target is not correct
    // @ts-ignore
      const webViewTag = (event.nativeEvent.target as number)
      if (webViewTag) {
          setWebviewNativeTag(webViewTag);
      }
  }

  const loadEnd = () => {
      if (webViewNativeTag !== undefined && webViewNativeTag !== injectedWebViewTag) {
          Contentsquare.injectWebView(webViewNativeTag); // (3)
          setInjectedWebViewTag(webViewNativeTag); // (2)
      }
  }

  useLayoutEffect(() => {
      return () => {
          if (webViewNativeTag !== undefined) {
              Contentsquare.removeWebViewInjection(webViewNativeTag); // (5)
          }
      }
  }, [webViewNativeTag])

   return (
      <>
        <WebView
          source={{ uri: "https://www.mywebpage.com" }}
          onLoadStart={loadStart}
          onLoadEnd={loadEnd} // (4)
        />
      </>
  );
};

export default WebviewWithTagScreen;