WebView Tracking Tag Web
In order to enable WebView tracking, two steps are required:
- Call the injection API on the native side, in order to inject the Contentsquare JavaScript Bridge into the WebViews and thus allow the Tracking Tag and the SDK to connect. For more information on this step, refer to 📚 iOS SDK WebView tracking and 📚 Android SDK WebView tracking.
- Inject the Contentsquare Tracking Tag in WebView mode in every the web pages you load in your app’s WebViews. This is the step described on this page.
Getting Started
Section titled Getting StartedThe Tag in WebView mode is responsible for exposing some APIs and capturing events in the WebView. It then reroutes calls to its API and events tracked to the SDK, through the Contentsquare JavaScript Bridge, which you inject in your webview on the native side.
Enabling WebView mode
Section titled Enabling WebView modeThe Tag needs to be set in WebView mode in order to collect data and pass them to the main SDK that will send them to the dedicated Apps project. To do so, the following command must to be added before loading the Tag (or it will be ignored):
window._uxa.push(['setOption', 'isWebView', true]);
Injecting the Tracking Tag
Section titled Injecting the Tracking TagWhen implementing WebView support, a specific tracker will be created for the WebView context, even if you are already using a Tracker for the Web context. Depending on if you are tracking a page only in WebViews, or also in browsers, you will have two ways to inject the Tracking Tag.
My page is loaded in WebViews and in Browsers
Section titled My page is loaded in WebViews and in BrowsersIf you detect that the page is loaded in a WebView context, then make sure to set isWebview
to true
and change the Tag ID to that of the Tracker for WebViews.
<script type="text/javascript"> (function () { window._uxa = window._uxa || [];
var my_tag_id = YOUR_WEB_TAG_ID;
if (loadedInAWebview()) { window._uxa.push(['setOption', 'isWebView', true]); my_tag_id = YOUR_WEBVIEW_TAG_ID; }
var mt = document.createElement("script"); mt.type = "text/javascript"; mt.async = true; mt.src = "https://t.contentsquare.net/uxa/${my_tag_id}.js"; document.getElementsByTagName("head")[0].appendChild(mt); })();</script>
My page is only loaded in WebViews
Section titled My page is only loaded in WebViewsFor local pages or pages visited exclusively in the WebView context, implement as follows.
<script type="text/javascript"> (function () { window._uxa = window._uxa || []; window._uxa.push(["setOption", "isWebView", true]); var mt = document.createElement("script"); mt.type = "text/javascript"; mt.async = true; mt.src = "https://t.contentsquare.net/uxa/YOUR_WEBVIEW_TAG_ID.js"; document.getElementsByTagName("head")[0].appendChild(mt); })();</script>
Next steps
Section titled Next stepsIn order to set up the Tracking Tag, follow the different implementation guidelines presented in The main Tracking Tag section. Then, finish the implementation by using the APIs supported in WebView mode, as described in the following sections of this documentation.