WebView Tracking Tag Web

Introduction

In order for Contentsquare to be able to track WebViews in your app, a bit of setup is involved. It is necessary to inject our CS Tag in WebView Mode in your HTML page, which is the step detailed on this page. You will also have to link the CS Tag in WebView mode with our SDK by injecting your WebViews, following the documentation for your platform (📚 iOS, 📚 Android, 📚 Flutter, 📚 React Native).

CS Tag in WebView mode implementation

We support implementing the CS Tag in WebView mode via Google Tag Manager or manually. Note that GTM is the preferred method of injection of the Contentsquare Tag.

Google Tag Manager

The GTM implementation can be cut into several steps, some of which you might skip depending on your current implementation.

1. Add a variable to check if we are in a WebView

There are 3 different steps to creating this variable:

Set its type to DOM Element.
Set Selection Method to ID.
Identify the Element ID you injected in your webview, window.isWebView (see warning bellow for more info on that step).

2. Check your CS Tag implementation

In case your page can be loaded in browsers, you will probably already have implemented the CS Tag. Here are steps to either do or simply check, depending on your case:

You are using the GTM Tag Type Contentsquare - Main Tag, which simplifies the implementation of the CS Tag for the web.
You have properly added your Web Tag ID, as provided by your Contentsquare contact during your Web implementation.
⚠️ Make sure to remove any trigger, as the CS Tag will be triggered by the CS Tag in WebView mode (CS WebView Tag), as visible below.

3. Create a custom GTM Tag to inject the CS Tag in WebView mode

In order to support WebViews, you will have to add a new custom GTM Tag as described in the steps below:

Create a new GTM Tag using the Custom HTML template.

Add the following script as the HTML (note that we are using our {{Is Loaded In WebView}} variable):

<script type="text/javascript">
    (function () {
    window._uxa = window._uxa || [];
    if ([-- I'm loading in a WebView --]) {
        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/[MY_WEBVIEW_TAG_ID].js";
        document.getElementsByTagName("head")[0].appendChild(mt);
    }
    })();
</script>

Make sure you are triggering the GTM Tag once per event.
Sequence the GTM Tags firing, so that the CS Tag (CS Web Tag) is fired right after the CS Tag in WebView Mode (CS WebView Tag).
Make sure consent does not hinder the CS Tag in WebView mode triggering, as consent is handled by the SDK in the context of a mobile app.
Trigger the GTM Tag when the DOM is ready.

Manual

Depending if your page is also loaded in browsers, you will have a different snippet to add at the top for your page.

Page is also loaded in browsers
Page is only loaded in WebViews

Here’s what’s going on with the following snippet:

Detect if the page is loaded in a WebView.
If so,
- Set isWebView to true to start the CS Tag in WebView mode.
- Load the CS Tag in WebView mode with the WebView Tag ID provided by your CS contact.
Else, load the CS Tag with the Web Tag ID.

<script type="text/javascript">
    (function () {
        window._uxa = window._uxa || [];

        var tag_id = MY_WEB_TAG_ID;

        if (window.isWebView) {
            window._uxa.push(['setOption', 'isWebView', true]);
            tag_id = MY_WEBVIEW_TAG_ID;
        }

        var mt = document.createElement("script");
        mt.type = "text/javascript";
        mt.async = true;
        mt.src = "https://t.contentsquare.net/uxa/${tag_id}.js";
        document.getElementsByTagName("head")[0].appendChild(mt);
    })();
</script>

For pages that are only loaded in WebViews, we can simplify the implementation by not checking if we are in a WebView. Make sure to load the CS Tag in WebView mode with the WebView Tag ID provided by your CS contact.

<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/MY_WEBVIEW_TAG_ID.js";
        document.getElementsByTagName("head")[0].appendChild(mt);
    })();
</script>

What’s next?

Once you have completed all the steps required to add the CS Tag in WebView mode, you are ready to use our API to continue implementing Contentsquare in your WebViews.