WebView領域で必要なデータ連携設定（アプリ計測）

WebView領域を計測する場合、Google Analytics for Firebase (以下Firebase) SDK をお客様アプリに導入していただく必要はございますが、ただ、Webページ上に設置されたUSERGRAM計測タグと、アプリにインストールしていただく弊社提供のWebView計測用スクリプトとで計測を行う仕組みになっているため、カスタムイベントの取得などそれ以上お客様アプリ内に実装いただくものはございません。

お客様のアプリが、WKWebView（iOSアプリの場合）またはWebView（Androidアプリの場合）を使用してアプリ内ブラウザの実装を行っている場合、Firebaseと連携させることができます。 これにより、アプリ内ブラウザでWebページを開いた時の行動もアプリの行動データとして計測でき、USERGRAMではネイティブアプリとWebViewの行動データを同じユーザとして統合して表示できます。 ※ただし、SFSafariViewController（iOSアプリの場合）やChrome Custom Tabs（Androidアプリの場合）を使用してアプリ内ブラウザ実装を行っている場合は、ネイティブアプリ上の行動との統合は行えませんのでご注意ください

Firebaseでは、これを以下のような流れで実現しています。

• Webサイト側の準備: Webサイトに埋め込んだ計測タグにJavaScriptの処理を加え、WebView経由での閲覧であればデータがアプリ内のコードに転送されるようにする
• アプリ側の準備: アプリ内のコードに、WebViewのデータを受け取ったらFirebaseのイベントとして送信する処理を追加しておく

詳しくは、Firebaseのドキュメントをご覧ください。( iOS, Android)

USERGRAMの場合、以下の1.～2. の作業を行うことで アプリ内ブラウザ上の行動データもFirebaseに送られるようになり、同じユーザによるネイティブアプリ上の行動とアプリ内ブラウザ上の行動をアプリ計測のユーザ識別子(user_pseudo_id) によってUSERGRAM上で統合できるようになります。

1. WebサイトにUSERGRAM計測タグを設置する

上記で説明した「WebView経由の閲覧である場合に計測データをアプリに転送する処理」は、既にUSERGRAMのWebサイト用計測タグに実装されており、タグの発火に合わせその処理が動作します。そのため、Webサイト側で行うべき作業は、USERGRAMでWebサイトを計測する場合と全く同じです。計測対象サイトの登録等の必要な設定を行ったうえで、USERGRAM管理画面から計測タグを取り出し、計測したい各ページのHTMLファイルに設置してください。手順の詳細については、以下の記事をご覧ください。 ※すでに作業が済んでいる項目については改めて作業していただく必要はございません。

• 初期導入ガイド(Web計測)
• タグ設置時のマニュアル

2. アプリにWebView計測用スクリプトをインストールする

ご利用のプラットフォームおよび開発言語に該当するスクリプトを、それぞれアプリへ実装してください。

Android (Java) の場合

JavaScriptからネイティブAndroidコードを呼び出すために、下記のクラスを実装してください。

public class AnalyticsWebInterface {
    public static final String TAG = "AnalyticsWebInterface";
    public static final String UgEventName = "ug_webview";
    private FirebaseAnalytics mAnalytics;

    public AnalyticsWebInterface(Context context) {
        mAnalytics = FirebaseAnalytics.getInstance(context);
    }

    @JavascriptInterface
    public void logEvent(String name, String jsonParams) {
        if(name.equals(UgEventName)){
            mAnalytics.logEvent(name, bundleFromJson(jsonParams));
        }
    }

    private Bundle bundleFromJson(String json) {
        if (TextUtils.isEmpty(json)) {
            return new Bundle();
        }

        Bundle result = new Bundle();
        try {
            JSONObject jsonObject = new JSONObject(json);
            Iterator<String> keys = jsonObject.keys();

            while (keys.hasNext()) {
                String key = keys.next();
                Object value = jsonObject.get(key);

                if (value instanceof String) {
                    result.putString(key, (String) value);
                } else if (value instanceof Integer) {
                    result.putInt(key, (Integer) value);
                } else if (value instanceof Double) {
                    result.putDouble(key, (Double) value);
                } else {
                    Log.w(TAG, "Value for key " + key + " not one of [String, Integer, Double]");
                }
            }
        } catch (JSONException e) {
            Log.w(TAG, "Failed to parse JSON, returning empty Bundle.", e);
            return new Bundle();
        }

        return result;
    }
}

次に、作成したクラスをWebViewに登録し、WebView内のJavaScriptコードから呼び出せるようにしてください。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    mWebView.addJavascriptInterface(new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
}

※ 上記コードは、Android OS 4.2 以下のバージョンの端末には対応しておりません

iOS (Swift) の場合

JavaScriptからネイティブiOSコードを呼び出すために、 WKScriptMessageHandler プロトコルに準拠したメッセージハンドラクラスを作成し、userContentController:didReceiveScriptMessage: コールバック内に下記実装を行ってください。

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 }
        if name != "ug_webview" { return }
        Analytics.logEvent(name, parameters: params)
     }
}

次に、メッセージハンドラをWebViewのユーザーコンテンツコントローラへ追加してください。

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

iOS (Objective C) の場合

JavaScriptからネイティブiOSコードを呼び出すために、 WKScriptMessageHandler プロトコルに準拠したメッセージハンドラクラスを作成し、userContentController:didReceiveScriptMessage: コールバック内に下記実装を行ってください。

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.body[@"command"] isEqualToString:@"logEvent"]) {
        if([message.body[@"name"] isEqualToString:@"ug_webview"]) {
            [FIRAnalytics logEventWithName:message.body[@"name"] parameters:message.body[@"parameters"]];
        }
    }
}

次に、メッセージハンドラをWebViewのユーザーコンテンツコントローラへ追加してください。

[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"firebase"];

アプリ内ブラウザの連携設定なしでWebViewとネイティブアプリの行動を統合したい場合

上記のアプリ内ブラウザの連携設定を行わない(あるいは行えない)場合、 アプリ内ブラウザ上の行動データは通常のWeb計測と同様、_usergram.pngビーコンリクエストを介して送られます。Web計測の行動データのユーザ識別子(ブラウザのCookieまたはlocalStorage)はアプリ計測のユーザ識別子(user_pseudo_id)と異なるため、WebViewの行動とネイティブアプリの行動を紐付けるためには、WebViewとネイティブアプリの両方で同じサービスIDが取得されるようにする必要がございます。

サービスIDの取得を行わない場合、USERGRAMはWebViewとネイティブアプリの行動をそれぞれ別のユーザのものとして計測しますので、その点ご留意ください。

上記の連携設定が完了しますと、アプリのWebView領域を利用した際に、ページ閲覧などユーザのWebページ上の行動に合わせ計測タグが発火し、計測に必要なデータが収集されます。それらのデータは、計測タグ内に実装されたアプリ内コードへの転送処理によってアプリ内に転送されます。そして、WebView計測用スクリプトにより、「ug_webview」という名前の弊社内で定義したFirebaseのカスタムイベントとして計測が行われます。

上記のような仕組みとなっておりますため、WebView領域の計測において、お客様アプリ内に実装していただくものはWebView計測用スクリプトのインストールのみでして、カスタムイベント取得の実装などその他に必要な実装はございません。

※ug_webviewというカスタムイベントをお客様側実装で取得するといったこともございません