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

Suggest Edits

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

導入手順

Coreパッケージの導入が必要です。
導入手順の詳細については以下をご覧ください。

実装方法

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

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

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

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

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

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

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

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

📘

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

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

🚧

マルチドメインオプション利用時の注意点

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

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

SDKでは2つの紐付け方法を提供しています。
なおiOSでは、利用しているWebViewにより利用可能な紐付け方法が異なりますので、ご注意ください。

ユーザースクリプトを利用した紐付けの実装方法（推奨）（iOS: WKWebViewのみ）

AndroidもしくはiOSでWKWebViewを利用している場合は、 WKUserScript 等を利用したJavascriptによる紐付け処理が可能です。
SDKが用意しているヘルパーメソッドに WKWebView インスタンスを渡すことで、ユーザースクリプトの設定が行われます。

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

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    var webView = new WKWebView(CoreGraphics.CGRect.Empty, new WKWebViewConfiguration());

    // 連携用のユーザースクリプトをWebViewに設定する
    KRTUserSync.SetUserSyncScriptWithWebView(webView);

    // ユーザースクリプトを設定した後で、ページのロード処理を行う
    var url = new NSUrl("https://example.com");
    if (url != null)
    {
        webView.LoadRequest(new NSUrlRequest(url));
    }
}

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    var webView = new WebView(this);
    webView.Settings.JavaScriptEnabled = true;
    webView.SetWebViewClient(new MyWebViewClient());
    // ユーザースクリプトを設定した後で、ページのロード処理を行う
    webView.LoadUrl("https://karte.io");
}

// ページロード開始後に実行するため、独自のWebViewClientを実装してください
class MyWebViewClient : WebViewClient
{
    public override void OnPageStarted(WebView view, string url, Bitmap favicon)
    {
        base.OnPageStarted(view, url, favicon);
        if (url == null) return;
        // 連携用のユーザースクリプトをWebViewに設定する
        UserSync.SetUserSyncScript(view);
    }
}
クエリパラメータを利用した紐付けの実装方法（iOS: WKWebView / SFSafariViewController）

SDKが用意しているヘルパーメソッドにロードするページのURLを渡すことで、紐付け処理に必要となるクエリパラメータを付加することができます。

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

var baseUrl = new NSUrl("https://example.com");
if (baseUrl != null)
{
    var webView = new WKWebView(CoreGraphics.CGRect.Empty, new WKWebViewConfiguration());

    // 連携用のパラメータを付与したURLを取得
    var url = KRTUserSync.AppendingQueryParameterWithURL(baseUrl);

    // 連携用パラメータが付与されたURLを利用して、ページのロード処理を行う
    webView.LoadRequest(new NSUrlRequest(url));
}

var baseUri = Android.Net.Uri.Parse("https://karte.io");

// 連携用のパラメータを付与したURLを取得
var url = UserSync.AppendUserSyncQueryParameter(uri);

// 連携用パラメータが付与されたURLを利用して、ページのロード処理を行う
var webView = new WebView(this);
webView.LoadUrl(url.ToString());

🚧

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

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

🚧

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

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

検証方法

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

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

トラブルシューティング

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

Updated 8 months ago