Guides

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

Suggest Edits

アプリケーションによっては、一部画面をWebViewで構成するケースがあります。
このようなケースにおいてもユーザーの行動をトラッキングするために SDK では WebView トラッキングの機能を提供しています。

WebViewトラッキングを行うためには、Webページ内に計測タグを設置してトラッキングを行います。

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

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

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

STEP1: ページ内に計測タグを設置する

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

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

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

計測タグを設置するとユーザー行動の計測が行われるようになりますが、ネイティブSDKでトラッキングした情報（ネイティブアプリ内のユーザー行動）と、計測タグでトラッキングした情報（WebView内のユーザー行動）は、それぞれ別のユーザー行動として取り扱われます。

そのためネイティブアプリ内のユーザー行動と、WebView内のユーザー行動を統合するために、ユーザーの紐付け処理を実装する必要があります。

📘

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

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

🚧

マルチドメインオプションとの併用について

WebとAppのユーザー紐付け処理はマルチドメインオプションによるクロスドメインでのユーザ統合機能の対象外となります

またWebViewで表示されるページに対して、マルチドメインモードの計測タグが出力されている場合には、*.karte.io及びktid.karte-edge.ioのドメインをアプリ側のホワイトリストとして登録する必要があります

参考:マルチドメインモードの計測タグを利用しているページを閲覧するために必要な主なドメイン

※ホワイトリストとして登録されていない場合には、WebView表示時にブランクページが表示される等の挙動が発生します。

🚧

紐付け処理の実行タイミングについて

紐付け処理で行われるユーザースクリプトは、計測タグの読み込み時点で実行済みである必要があります。タグの読み込み後にユーザースクリプトが実行された場合には、紐付け処理が実行されません。

紐付け処理の実装方法

紐付け処理の実装方法
UserSync.getUserSyncScript を用いて、ユーザースクリプトを取得し、WebView上でユーザースクリプトを実行することで連携が可能です。

ユーザースクリプトの設定が行われたWebViewでページをロードすることにより、紐付けが行われた状態でトラッキングが行われます。

webview_flutterでの実装例

// 連携用のスクリプトを取得します
var script = await UserSync.getUserSyncScript();

// WebView設定時にスクリプトを実行するように設定します
WebView(
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
  onPageStarted: (String url) async {
    // Androidではページロード直前にscriptを実行します
    var controller = await _controller.future;
    controller.evaluateJavascript(script);
  },
  onProgress: (progress) async {
    // iOSではページ直前にscript実行できないので、ロード開始後の早いタイミングで実行してください
    // 他のライブラリでは可能な場合があるので、適切なタイミングで実行してください
    var controller = await _controller.future;
    controller.evaluateJavascript(script);
  },
}

🚧

ユーザースクリプトを実行できない場合

ユーザースクリプトを実行できない環境では、SDKによるユーザー紐付けは行えません。
以前提供していた、クエリパラメータによる紐付けは非推奨となり、予告なく機能を停止する可能性があります。
identifyイベントを発火して、明示的にユーザーを紐づけてください。

STEP3: 動作検証を行う

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

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

🚧

WebView内で発生したイベントをトリガーに接客を配信する際の注意点

WebView内で発生したイベント（_sourceが native_app_webview のイベント）をトリガーに配信される接客サービスはSDKではなくアプリが管理するWebViewにアクションが表示されます。iOSにおいてWebViewがWKWebViewの場合、そのままではアクション内のURLスキームが自動で処理されずアクション経由のリンク遷移ができません。URLスキームを処理してアクション経由のリンク遷移を動作させるためにはWKWebViewのnavigationDelegateの実装が必要となります。

トラブルシューティング

WebViewの紐付け処理やWebView内に表示した接客で問題が起きた場合は以下ページをご確認ください。
WebView内の接客やWebView連携で問題が発生した時のチェックリスト

Updated about 2 months ago