WebView内の行動をトラッキングする

WebView内の行動(ページ遷移など)をトラッキングしたい場合に、WebViewトラッキングの機能を利用することで実現可能です。

導入手順

coreモジュールの導入が必要です。
導入手順の詳細については SDKを導入する をご覧ください。

実装方法

WebViewトラッキングを行う方法として、2種類の方法を提供しています。

  • Webページ内に 計測タグ を設置してトラッキングを行う(推奨)
  • SDKを利用してトラッキングを行う

👍

実装方法を選択する上での考え方

Webページ側にKARTEの計測タグを設置してトラッキングを行う方が取得できる情報量が多いため、基本的には計測タグを設置してトラッキングを行う方法を推奨しております。

Webページ側に手を入れることが難しいなどの場合に限り、SDKを利用してトラッキングを行う方法をご利用ください。


Webページ内に計測タグを設置してトラッキングを行う

Webページ内に計測タグを設置してトラッキングを行う場合は、以下のステップで実装を行います。

  1. Webページ内に計測タグを設置する
  2. WebとAppのユーザーの紐付け処理を実装する

1. Webページ内に計測タグを設置する

計測タグの設置方法については、セットアップしよう(ウェブ) をご覧ください。

なお、既にKARTEをご契約中でWebページに計測タグが設置されている場合は、このステップは不要です。

2. WebとAppのユーザーの紐付け処理を実装する

Webページに計測タグを設置することでページロードに合わせてトラッキングが行われるようになりますが、このままではネイティブSDKでトラッキングした情報(ネイティブアプリ内のユーザー行動)と、計測タグでトラッキングした情報(WebView内のユーザー行動)が、別のユーザー行動としてトラッキングされます。

ネイティブアプリ上の行動とWebページ上での行動を同一のユーザー行動としてトラッキングするために、それぞれのユーザーの紐付け処理を行う必要があります。

📘

紐付け処理によってできること

  • 紐付け前後のネイティブアプリ内のユーザー行動と、WebView内のユーザー行動が紐付く(紐付け後WebView内・ネイティブアプリ内のユーザー行動は同一セッションとして扱われます)
  • 計測タグが発行する全イベントの _source フィールドの値が native_app_webview となる
  • 計測タグが自動発行する req イベントに app_info フィールドが付与される

紐付け処理の実装について

JavaScriptを利用した紐付けの実装方法 URLに余計なクエリパラメータを付与したくない場合は、JavaScriptを利用して紐付けを行うことが可能です。 SDKが用意しているヘルパーメソッドに WebView インスタンスを渡すことで、スクリプトの設定が行われます。

onPageStarted が呼び出されたタイミングでスクリプトを設定することで、紐付けが行われた状態でトラッキングが行われます。

override fun onCreate(savedInstanceState: Bundle?) {
  ...
  webView.webViewClient = object : WebViewClient() {
    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
      super.onPageStarted(view, url, favicon)
      if (view == null) return
      UserSync.setUserSyncScript(view)
    }
  }
  ...
}
@Override
public void onCreate(Bundle savedInstanceState) {
  ...
  webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
      super.onPageStarted(view, url, favicon);
      UserSync.setUserSyncScript(view);
    }
  });
  ...
}
クエリパラメータを利用した紐付けの実装方法 SDKが用意しているヘルパーメソッドにロードするページのURLを渡すことで、紐付け処理に必要となるクエリパラメータを付加することができます。

紐付け用のクエリパラメータが付加されたURLをWebViewでロードすることにより、紐付けが行われた状態でトラッキングが行われます。

url = UserSync.appendUserSyncQueryParameter(url)
webView.loadUrl(url)
url = UserSync.appendUserSyncQueryParameter(url);
webView.loadUrl(url);

🚧

クエリパラメータの有効期限について

クエリパラメータには1分の有効期限を設けており、有効期限が切れている場合は紐付けが行われません。
そのためページをロードする際は、URLに都度クエリパラメータを付与するようにしてください。


SDKを利用してトラッキングを行う

ネイティブアプリSDKを利用してトラッキングを行う場合、基本的にWebView内のページ遷移をフックしてトラッキングを行います。

実装例

webView.webViewClient = object : WebViewClient() {
  override fun onPageFinished(view: WebView?, url: String?) {
    if (view == null) return
    Tracker.view("webview", it.title, mapOf(
      "url" to (url ?: "-")
    ))
  }
}
webView.loadUrl("https://example.com?_karte_tracker_deactivate=true")
webView.setWebViewClient(new WebViewClient() {
  @Override
  public void onPageFinished(WebView view, String url) {
    Map<String, Object> values = new HashMap<>();
    values.put("url", url);
    Tracker.view("webview", view.getTitle(), values);
  }
});
webView.loadUrl("https://example.com?_karte_tracker_deactivate=true");

なおWebページ内に計測タグが設置されている場合は、WebとAppで別々のユーザーの行動としてトラッキングが行われてしまいます。
これを防ぐために、Webページ内の計測タグを無効にする実装を追加する必要となります。

WebView で開くページの URL にクエリパラメータとして _karte_tracker_deactivate=true を付加してください。

検証方法

Webページ内に計測タグを設置してトラッキングを行う場合

管理画面のユーザーストーリー画面で、Webページ上での行動がネイティブアプリ上での行動として扱われているか確認してください。

計測タグ経由でトラッキングされた閲覧イベントに APP アイコンが付いていれば、ネイティブアプリ上での行動として扱われております。

SDKを利用してトラッキングを行う場合

通常のイベントトラッキングと同様に、管理画面のユーザーストーリー画面で送信したイベントが計測されているか確認してください。

Updated about a month ago

WebView内の行動をトラッキングする


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.