Track WebViews
Enable tracking in WebViews
Section titled Enable tracking in WebViewsInject the Bridge between the CS Tag in WebView mode and the SDK
Section titled Inject the Bridge between the CS Tag in WebView mode and the SDKThis step is twofold:
- 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.
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.
1. Use the CSWebView component to render your WebView
Section titled 1. Use the CSWebView component to render your WebViewOur 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).
2. Setting the CSWebView URL
Section titled 2. Setting the CSWebView URLCSWebView
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)
If you have a more complex use for your webviews such as 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)
Inject the CS Tag in WebView mode into your HTML page
Section titled Inject the CS Tag in WebView mode into your HTML pageAfter 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.