Track WebViews
How it works
Section titled 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.
-
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
Section titled Implementing the JavaScript bridgeHere 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
Section titled 1. Use CSWebView component to render your WebViewCSWebView
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
Section titled 2. Setting CSWebView URLCSWebView
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;