• Platforms
  • Partners
  • Forums
  • TLC Tealium Learning Center Tealium Learning
    Community
  • Discussions & Ideas Dicussions & Ideas
  • Product Guides Product Guides
  • Knowledge Base Knowledge Base
  • Developer Docs Developer Docs
  • Education Education
  • TLC Blog TLC Blog
  • Support Desk Support Desk
  • CDH Customer Data Hub Customer Data Hub

Table of Contents

  • How It Works
  • Webview JavaScript Handler
    • Webview With Tealium
    • Webview Without Tealium
  • Native Message Handler
  • Supported Libraries
GETTING STARTED

Tracking Webviews

Learn how to track events from an in-app webview using a JavaScript interface.

A native app can display web content and delegate functionality to an embedded browser called a webview. To track events from a webview in the Tealium iOS or Android SDK you need a communication bridge to the native code. This is done using JavaScript to invoke native code by sending messages to your app.

This solution works in webviews with or without the Tealium Universal Tag (utag.js) installed.

How It Works

This solution uses the following components:

  • Webview JavaScript Handler
    This JavaScript code is a wrapper around your web-based event tracking to send the events to the native app.
    • With Tealium iQ Tag Management - Use extensions to quickly add this code to your pages.
    • Without Tealium - Use existing event tracking or add tracking to the pages.
  • Native Message Handler
    This native code uses a JavaScript interface to receive the messages containing the event data.

Webview JavaScript Handler

The following JavaScript code provides two wrapper functions, one for tracking views and one for tracking events, to forward a web-based tracking call to the native code. This code works for iOS and Android.

function tealView(tealiumEvent, data) {
  if (!tealiumEvent) {
    return;
  }
  if (window.WebViewInterface) {
    window.WebViewInterface.trackView(tealiumEvent, JSON.stringify(data));
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.tealium) {
    var message = {
      command: 'trackView',
      title: tealiumEvent,
      data: data
    };
    window.webkit.messageHandlers.tealium.postMessage(message);
  }
}

function tealEvent(tealiumEvent, data) {
  if (!tealiumEvent) {
    return;
  }
  if (window.WebViewInterface) {
    window.WebViewInterface.trackEvent(tealiumEvent, JSON.stringify(data));
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.tealium) {
    var message = {
      command: 'track',
      title: tealiumEvent,
      data: data
    };
    window.webkit.messageHandlers.tealium.postMessage(message);
  }
}

Webview With Tealium

If the pages loaded in the webview already have the Tealium Universal Tag (utag.js), then add the JavaScript handler code using two JavaScript Code extensions: one to initialize the wrapper functions and one to forward existing tracking calls to the JavaScript interface.

In this scenario the webview pages and the native app must be using different Tealium iQ profiles.

  1. Add the JavaScript handler code to a JavaScript Code extension scoped to Pre Loader.
  2. Add the following code to a second JavaScript Code extension scoped to All Tags - After Tags. This forwards the existing Tealium tracking calls, already occuring in the webview, to the native host app.

    if (a == "view") {
      tealView(b.tealium_event, b);
    } else if (a == "link") {
      tealLink(b.tealium_event, b);
    }
    

Webview Without Tealium

If the pages loaded in the webview do not have Tealium, then add the JavaScript handler code to each page that loads inside a webview. Then call tealView to track page views and tealLink when a non-page view event occurs, such as a button click or cart event.

Native Message Handler

    To invoke native Android code from JavaScript, implement a class with methods marked @JavaScriptInterface:

    public class WebViewInterface {
    
        @JavascriptInterface
        public void trackView(String eventName, String data) throws JSONException {
            TealiumHelper.trackView(eventName, new JSONObject(data));
        }
    
        @JavascriptInterface
        public void trackEvent(String eventName, String data) throws JSONException {
            TealiumHelper.trackEvent(eventName, new JSONObject(data));
        }
    }

    Once the native interface is created, register it with your WebView to make it visible to JavaScript code running in the WebView.

    mWebView.addJavascriptInterface(mInterface, "WebViewInterface");

    Call the method addJavascriptInterface() prior to calling the webView.loadUrl() method. Also, due to security concerns, only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above.

    Add the following message handler to the WebView’s user content controller:

    webView.configuration.userContentController.add(self, name: "tealium")

    To invoke native iOS code from JavaScript, create a message handler class conforming to the WKScriptMessageHandler protocol. For tracking, call Tealium.track inside the userContentController:didReceive: callback:

    func userContentController(_ userContentController: WKUserContentController,
                              didReceive message: WKScriptMessage) {
    
      guard let body = message.body as? [String: Any],
          let command = body["command"] as? String,
          let title = body["title"] as? String,
          let webViewData = body["data"] as? [String: Any] else {
              return
      }
    
      switch command {
      case "track":
          TealiumHelper.shared.tealium?.track(title: title,
                                              data: webViewData,
                                              completion: nil)
      case "trackView":
          TealiumHelper.shared.tealium?.trackView(title: title,
                                                  data: webViewData,
                                                  completion: nil)
      default:
          break
      }
    }

    Supported Libraries

    The following platforms support the JavaScript interface solution:

    • Tealium for Android
    • Tealium for iOS
    Server-Side
    Data Layer

     
    • Mobile
    • Getting Started
      • Overview
      • Quick Start Guide
      • Mobile Concepts
      • Client-Side
      • Server-Side
      • Tracking Webviews
      • Data Layer
      • Consent Management
      • Event Batching
      • User Location and Geofencing
      • Deep Links
      • Timed Events
      • Trace
      • Hosted Data Layer
      • Feature Comparison
      • Troubleshooting
    • Remote Commands
      • Overview
      • How It Works
      • Integrations
        • AppsFlyer
        • Braze
        • Contentsquare
        • Facebook
        • Firebase
        • Kochava
        • Usabilla
    • Android (Java)
      • Overview
      • Install
      • Track
      • Data Layer
      • Data Management
      • Consent Management
      • Module List
        • Ad Identifier Module
        • Crash Reporter Module
        • Install Referrer Module
        • Lifecycle Tracking Module
        • Location Module
        • Optimizely X Tracking Module
      • Android TV
      • Android Wear
      • API Reference
        • ConsentManager
        • DataSources
        • Lifecycle
        • Tealium
        • Tealium.Config
        • TealiumLocation
      • Release Notes
    • Android (Kotlin)
      • Overview
      • Install
      • Track
      • Data Layer
      • Consent Management
      • Identity Resolution
      • Module List
        • Ad Identifier Module
        • Collect Module
        • Collectors Module
        • Crash Reporter Module
        • Install Referrer Module
        • Lifecycle Tracking Module
        • Location Manager Module
        • RemoteCommands Module
        • Tag Management Dispatcher Module
        • Visitor Service Module
      • Android TV
      • API Reference
        • ConsentCategory
        • ConsentManager
        • CurrentVisit
        • DataLayer
        • Lifecycle
        • LocationManager
        • Tealium
        • TealiumConfig
        • VisitorProfile
        • VisitorService
      • Release Notes
    • Cordova
      • Overview
      • Install
      • Track
      • Data Management
      • Module List
        • Ad Identifier Module
        • Crash Reporter Module
        • Install Referrer Module
      • API Reference
      • Release Notes
    • Flutter
      • Overview
      • Install
      • Track
      • Consent Management
      • Data Management
      • API Reference
      • Release Notes
    • iOS (Objective-C)
      • Overview
      • Install
      • Track
      • Data Layer
      • Data Management
      • Consent Management
      • Tag Management
      • Module List
        • Lifecycle Tracking Module
      • tvOS
      • watchOS
      • API Reference
      • Release Notes
    • iOS (Swift) 1.x
      • Overview
      • Install
      • Track
      • Data Layer
      • Data Management
      • App Extensions
      • Identity Resolution
      • Consent Management
      • Modules
      • Module List
        • AppData Module
        • Attribution Module
        • AutoTracking Module
        • Collect Module
        • Connectivity Module
        • CrashReporter Module
        • DataSource Module
        • DefaultStorage Module
        • Delegate Module
        • DeviceData Module
        • DispatchQueue Module
        • FileStorage Module
        • Lifecycle Module
        • Location Module
        • Logger Module
        • PersistentData Module
        • RemoteCommands Module
        • TagManagement Module
        • VisitorService Module
        • VolatileData Module
      • Feature Comparison
      • Working with Objective-C
      • API Reference
        • TealiumConfig
        • TealiumConsentCategories
        • TealiumConsentManagerDelegate
        • TealiumConsentManager
        • TealiumInstanceManager
        • TealiumPersistentData
        • TealiumVolatileData
        • Tealium
      • Release Notes
    • iOS (Swift) 2.x
      • Overview
      • Install
      • Track
      • Data Layer
      • Consent Management
      • App Extensions
      • Identity Resolution
      • Modules
      • Module List
        • AppData Module
        • Attribution Module
        • AutoTracking Module
        • Collect Module
        • Connectivity Module
        • CrashReporter Module
        • DeviceData Module
        • Lifecycle Module
        • Location Module
        • RemoteCommands Module
        • TagManagement Module
        • VisitorService Module
      • Working with Objective-C
      • API Reference
        • Tealium
        • TealiumConfig
        • TealiumConsentCategories
        • TealiumConsentManager
        • TealiumDataLayer
        • TealiumInstanceManager
      • Release Notes
    • NativeScript
      • Overview
      • Install
      • Track
      • API Reference
        • Tealium
        • TealiumConfig
      • Release Notes
    • React Native 1.x
      • Overview
      • Install
      • Track
      • API Reference
      • Release Notes
    • React Native 2.x
      • Overview
      • Install
      • Track
      • API Reference
      • Release Notes
    • Unity
      • Overview
      • Install
      • Track
      • API Referencee
    • Xamarin
      • Overview
      • Install
      • Track
      • Data Management
      • Consent Management
      • API Reference
      • Release Notes
    • Web
    • Getting Started
      • Overview
      • Quick Start Guide
      • Web Concepts
    • Adobe Launch
      • Overview
      • Install
      • Data Layer
    • AMP
      • Install
      • Track
      • Data Layer
      • Overview
    • Angular
      • Install
      • Track
      • API Reference
      • Overview
    • Google Tag Manager
      • Overview
      • Data Layer
      • Install
    • JavaScript (Web)
      • Install
      • Track
      • Data Layer
      • Overview
      • Universal Data Object (utag_data)
      • Universal Tag (utag.js)
      • Data Layer Object (b)
      • Single-Page Applications
      • Settings
      • Debugging
      • API Reference
        • Cookie Functions
        • GDPR Functions
        • Tracking Functions
        • Utility Functions
      • Release Notes
    • Server
    • C#
      • Overview
      • Install
      • Track
      • Data Layer
      • API Reference
      • Release Notes
    • HTTP API
      • Overview
      • Endpoint
      • Data Layer
    • Java
      • Overview
      • Install
      • Track
      • API Reference
      • Release Notes
    • Node
      • Overview
      • Install
      • Track
      • API Reference
    • Python
      • Overview
      • Install
      • Track
      • API Reference
    • Roku
      • Overview
      • Install
      • Track
      • API Reference
    • Ruby
      • Overview
      • Install
      • Track
      • API Reference

    Was this article helpful?

    This page was last updated: October 20, 2020       Thank you for your feedback!
    • Platforms
    • Partners
    • Forums
    • Mobile
    • Getting Started
    • Remote Commands
    • Android (Java)
    • Android (Kotlin)
    • Cordova
    • Flutter
    • iOS (Objective-C)
    • iOS (Swift) 1.x
    • iOS (Swift) 2.x
    • NativeScript
    • React Native 1.x
    • React Native 2.x
    • Unity
    • Xamarin
    • Web
    • Getting Started
    • Adobe Launch
    • AMP
    • Angular
    • Google Tag Manager
    • JavaScript (Web)
    • Server
    • C#
    • HTTP API
    • Java
    • Node
    • Python
    • Roku
    • Ruby