WebView Tracking

Introduction

To track WebViews in your app using Contentsquare, you’ll need to configure the tracking tag and the mobile SDK to work together.

Context

Your page is only accessible from WebView

This means you only display the webpage in your mobile app using a WebView. The mobile SDK will automatically inject the tracking tag into the WebView. You only need to track the WebView through the mobile code, and you’re all set! Below are the implementation guides for each platform:

📚 iOS
📚 Android
📚 Flutter
📚 React Native

Your page is accessible from WebView and web

This means you use Contentsquare to track the same webpage on both your website and your mobile app within a WebView. The tracking tag needs to be configured based on whether the webpage is running in a WebView or a standard web context.

Tracking tag configuration

We support implementing the tracking tag via Google Tag Manager or manually. Note that GTM is the preferred method of injection of the Contentsquare Tag.

Google Tag Manager (Template)

You may already have implemented our GTM Tag (Contentsquare - Main Tag) for your website. Follow these steps to implement or verify the WebView setup.

Open your container and go to the templates section.
Select Search gallery.
Type in contentsquare and select the Contentsquare - Main tag option.
Click Add to workspace.
Confirm your choice by selecting Add
Go to the Tags section and click the New button to create a new tag.
Configure it by selecting the top-right button.
Search for contentsquare and select the Contentsquare - Main tag template that you’ve previously added to your container.
Confirm that your my_web_tag_id is correctly added. This should have been provided by your Contentsquare contact during your web implementation.
Similarly, confirm that your my_webview_tag_id is properly configured. This is also provided by your Contentsquare contact.
Select the DOM Ready as trigger.

Google Tag Manager (Custom HTML)

If your page loads in both a web and WebView environment, you should use a variable to determine whether the page is running in a WebView context before integrating the tracking tag. The Contentsquare Android and iOS SDK injects a window.CS_isWebView variable into the WebView to simplify the integration.

Add a new tag on your workspace.
Select “Choose a tag type to begin setup…”.
In the list, pick the “Custom HTML” tag.

Copy and paste the following code in the Tag Configuration HTML section:

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

    var tag_id = MY_WEB_TAG_ID;

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

    window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);

    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>

Select “Choose a trigger to make this tag fire…” and pick “All Pages” from the list.

Manual injection

To set up the tracking tag on your website, add the following lines of code on every page you want to analyze, either at the end of the <body> tag.

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

    var tag_id = MY_WEB_TAG_ID;

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

    window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);

    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>

This code creates a function which will add an asynchronous call to a script and then execute the function. This is a way to avoid other elements loading being blocked on the page. This reduces the impact of the tag on your website’s performance.

Validate WebView tracking

To verify WebView tracking, refer to the documentation available for iOS and Android.