WebViewからFirebase Analyticsへイベントを送る

こんにちは。iOSエンジニアのキムです。

モバイルアプリの場合、無料のトラッキングツールでFirebase Analyticsがよく使われますが、今回はWebViewからFirebase Analyticsへイベントを送る方法について調べてみたいと思います。 Firebase AnalyticsのSDKは、WebViewページからのイベントの送信をサポートしていませんので、WebViewでAnalyticsを使用するには、WebView側からネイティブコード側へイベントを転送する必要があります。

それでは実際にやってみます。

JavaScript ハンドラを実装する

WebView側ではまず、JavaScript関数を作成してネイティブコード側へ転送する必要があります。次の例は、Firebaseのドキュメントにあるサンプルコードです。

WebView でアナリティクスを使用する | Firebase Documentation

function logEvent(name, params) {
  if (!name) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'logEvent',
      name: name,
      parameters: params
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}

function setUserProperty(name, value) {
  if (!name || !value) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android interface
    window.AnalyticsWebInterface.setUserProperty(name, value);
  } else if (window.webkit
      && window.webkit.messageHandlers
      && window.webkit.messageHandlers.firebase) {
    // Call iOS interface
    var message = {
      command: 'setUserProperty',
      name: name,
      value: value
   };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS interface found
    console.log("No native APIs found.");
  }
}

ネイティブコードでWebViewからイベントを受信する

次に、iOSのネイティブコード側では、WebView側から転送されたイベントを収集し、FirebaseSDKに渡す必要があります。

まずは、メッセージハンドラをWebViewのユーザーコンテンツコントローラに追加します。

override func loadView() {
    super.loadView()
    self.webView.configuration.userContentController.add(self, name: "firebase")
}

そして、WKScriptMessageHandlerプロトコルに準拠したメッセージハンドラークラスを作成します。userContentController:didReceiveScriptMessage:コールバック内でWebView側から転送されたイベントの詳細が取得できます。

extension WebViewController: WKScriptMessageHandler {

    func userContentController(_ userContentController: WKUserContentController,
                               didReceive message: WKScriptMessage) {
        guard let body = message.body as? [String: Any] else { return }
        guard let command = body["command"] as? String else { return }
        guard let name = body["name"] as? String else { return }

        if command == "logEvent" {
            guard let params = body["parameters"] as? [String: NSObject] else { return }
            Analytics.logEvent(name, parameters: params)
          }
    }

}