Webviewsの追跡

ネイティブアプリは、webviewと呼ばれる組み込みブラウザに機能を委任してWebコンテンツを表示することができます。TealiumのiOSまたはAndroid SDKでwebviewからイベントを追跡するには、ネイティブコードへの通信ブリッジが必要です。これは、JavaScriptを使用してアプリにメッセージを送信することでネイティブコードを呼び出すことによって行われます。

このソリューションは、Tealium Universal Tag（utag.js）がインストールされているかどうかに関係なく、webviewsで動作します。

仕組み

このソリューションは以下のコンポーネントを使用します：

• Webview JavaScriptハンドラ
  このJavaScriptコードは、webベースのイベント追跡をラップして、イベントをネイティブアプリに送信します。
  • Tealium iQタグ管理を使用 - 拡張機能を使用してこのコードをページに迅速に追加します。
  • Tealiumを使用しない場合 - 既存のイベント追跡を使用するか、ページに追跡を追加します。
• ネイティブメッセージハンドラ
  このネイティブコードは、イベントデータを含むメッセージを受信するためのJavaScriptインターフェースを使用します。

Webview JavaScriptハンドラ

以下のJavaScriptコードは、ビューの追跡とイベントの追跡のための2つのラッパー関数を提供し、webベースの追跡呼び出しをネイティブコードに転送します。このコードはiOSと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);
  }
}

Tealium付きのWebview

webviewでロードされるページにすでにTealium Universal Tag（utag.js）がある場合、JavaScriptハンドラコードを2つのJavaScript Code extensionsを使用して追加します：一つはラッパー関数を初期化し、もう一つは既存の追跡呼び出しをJavaScriptインターフェースに転送します。

このシナリオでは、webviewのページとネイティブアプリは異なるTealium iQプロファイルを使用しなければなりません。

1. JavaScriptハンドラコードをPre Loaderの範囲にあるJavaScript Code extensionに追加します。

2. 以下のコードをAll Tags - After Tagsの範囲にある2つ目のJavaScript Code extensionに追加します。これにより、webview内で既に発生しているTealiumの追跡呼び出しをネイティブのホストアプリに転送します。

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

TealiumなしのWebview

webviewでロードされるページにTealiumがない場合、JavaScriptハンドラコードをwebview内でロードされる各ページに追加します。その後、ページビューを追跡するためにtealViewを呼び出し、ボタンクリックやカートイベントなどの非ページビューイベントが発生したときにtealLinkを呼び出します。

ネイティブメッセージハンドラ

public class WebViewInterface {

    @JavascriptInterface
    public void trackView(String viewName, String data) throws JSONException {
	    tealium.track(viewName, new JSONObject(data));
    }

    @JavascriptInterface
    public void trackEvent(String eventName, String data) throws JSONException {
    	tealium.track(eventName, new JSONObject(data));
    }
}

mWebView.addJavascriptInterface(mInterface, "WebViewInterface");

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

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
  }
}

サポートされているライブラリ

以下のプラットフォームはJavaScriptインターフェースソリューションをサポートしています：

• Tealium for Android
• Tealium for iOS