WebView Tracker

The Snowplow WebView Tracker allows you to track Snowplow events from Web views in mobile hybrid apps. The current tracker version is 0.2.0.

Hybrid apps are mobile apps that in addition to a native interface, provide part of the UI through an embedded Web view. Snowplow events are tracked from both the native code (e.g. written in Swift or Kotlin) as well as the Web view (in JavaScript). Our goal is to have both events tracked from the native code as well as the Web view, share the same session and appear as tracked with the same tracker.

The WebView tracker should be integrated in Web apps used in Web views within native mobile apps. The tracker provides APIs to track Snowplow events. It forwards the events to the native app code to be tracked by the Snowplow mobile trackers (iOS, Android tracker, or React Native). The diagram below shows the interaction of the WebView and mobile trackers in hybrid apps.

Installation

You may choose to install the tracker as an npm package or by loading it through an HTML script tag.

Using npm

To install the WebView tracker in your JavaScript or TypeScript app, add the npm package:

npm install --save @snowplow/webview-tracker

You will then be able to use the functions provided by the WebView tracker as follows:

import { trackSelfDescribingEvent } from '@snowplow/webview-tracker';

In addition, you will need to install the iOS or Android tracker in your native code and configure and initialize a tracker (see the mobile tracker docs). Afterwards, you will be able to subscribe to and track the events from the WebView tracker in a Web view by calling Snowplow.subscribeToWebViewEvents(webView).

Using Snowplow tag

You may download the sp.js file from the Releases section on Github, self-host it, and load to your page using the following tag:

<script type="text/javascript" async=1>
;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[]; p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments) };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1; n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","{{URL to sp.js}}","snowplow"));
</script>

note

Make sure to replace the {{URL to sp.js}} with the URL to the sp.js file in the snippet.

Using the tracker

To track events, simply call their corresponding functions given the event data:

Installed using npm

trackSelfDescribingEvent({
    event: {
        schema: 'iglu:com.snowplowanalytics.snowplow/link_click/jsonschema/1-0-1',
        data: {
            targetUrl: 'http://a-target-url.com'
        }
    }
});

Installed using Snowplow tag

window.snowplow('trackSelfDescribingEvent', {
    event: {
        schema: 'iglu:com.snowplowanalytics.snowplow/link_click/jsonschema/1-0-1',
        data: {
            targetUrl: 'http://a-target-url.com'
        }
    }
});

Accelerator guide

For a step-by-step guide on how to instrument hybrid apps and model the mobile data, please visit the Mobile & Hybrid App Analytics accelerator.