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

WebView内の行動（ページ遷移など）をトラッキングしたい場合に、KARTEのWeb向け計測タグを利用し、WebViewのトラッキングを行うことで実現可能です。

また、WebViewトラッキングとSDKのユーザー紐付け処理を組み合わせることで、アプリ内WebViewでの行動をアプリ上の行動と合わせて見ることができるようになります。

### WebViewトラッキングを行う上での考え方

WebViewで読み込むWebページに、KARTEの計測タグを設置してトラッキングを行う方が取得できる情報量が多いため、計測タグを設置してトラッキングを行う方法を推奨します。

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

* [アプリ内WebViewのページ遷移のみSDKを利用してトラッキングする場合](https://app.developers.karte.io/app-faq/app-faq-webview-deactivate#ページ遷移のみsdkを利用してトラッキングする場合)

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

ユーザーの紐付け処理を行うことで、以下の処理が行われます。

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

これによりアプリ内WebViewでの行動を、アプリ内行動と合わせて見ることや、通常のWebページ閲覧と区別して扱うことができます。

{% hint style="warning" %}
**マルチドメインオプション利用時の注意点**

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

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

参考:[マルチドメインモードの計測タグを利用しているページを閲覧するために必要な主なドメイン](https://support.karte.io/post/6mYPLBvWgVSOaTzd9x8cTj#2-1)

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

## 導入手順

ユーザー紐付け処理のためには、coreモジュールの導入が必要です。\
導入手順の詳細については [SDKを導入する](https://app.developers.karte.io/android-sdk/setup-android-sdk) をご覧ください。

## 実装方法

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

WebViewトラッキングを行うためには、Webページ内に `計測タグ` を設置する必要があります。\
計測タグの設置方法については、[カスタムイベントタグの設置](https://support.karte.io/post/6qO99I3EWDpj58BDOwX0v5) をご覧ください。

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

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

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

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

#### OS提供のWebViewの場合

OSが提供している `android.webkit.WebView` を利用している場合は、 JavaScriptを利用した紐付け処理が可能です。\
SDKが用意しているヘルパーメソッドに WebView インスタンスを渡すことで、スクリプトの設定が行われます。

webViewClientの`onPageStarted` が呼び出されたタイミングで`setUserSyncScript`を実行しユーザースクリプトを設定し、ユーザースクリプトの設定が行われたWebViewでKARTE計測タグが設置されたページをロードすることにより紐付けが行われた状態でトラッキングが行われます。

※ユーザースクリプト自体は計測タグの読み込み前に実行されている必要があります

{% tabs %}
{% tab title="Kotlin" %}
{% code overflow="wrap" %}

```kotlin
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)
    }
  }
  ...
}
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code overflow="wrap" %}

```java
@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);
    }
  });
  ...
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

#### その他のWebViewの場合

その他のWebViewの場合は `UserSync.getUserSyncScript` を用いて、ユーザースクリプトを取得し、対応する方法で実行することで連携が可能です。

{% hint style="warning" %}
**ユーザースクリプトを実行できない場合**

CustomChromeTabs等の外部ブラウザなど、ユーザースクリプトを実行できない環境では、SDKによるユーザー紐付けは行えません。

以前提供していた、[クエリパラメータによる紐付け](https://github.com/plaidev/karte-app-dev-docs/blob/main/japanese/app-faq/app-faq-webview-query-parameters.md)は、2025年8月以降提供を停止しています、ご了承ください。

またユーザースクリプトを実行できない場合、identifyイベントでuser\_idを発火して、明示的にユーザーをuser\_idベースで紐付けることは可能です。ただしこの方法ではユーザーの紐付けのみされるため、WebView内のイベントはアプリではなくWebでの計測として扱われます。
{% endhint %}

### 3. 必要に応じてNative画面からWebView画面への遷移時にdismiss()を追加する

画面遷移時に[dismiss()](https://app.developers.karte.io/android-sdk-appendix/appendix-iam-control-android-sdk)の実行が望ましい場合もあるため、必要に応じて実装してください。

詳細は[WebViewに遷移した際の画面境界の認識と、考慮すべき事項について](https://app.developers.karte.io/app-faq/boundary-behavior-in-webview)をご確認ください。

## 検証方法

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

計測タグ経由でトラッキングされた閲覧イベントに **App** 表記が付いていれば、WebView内の閲覧イベントがネイティブアプリ上での行動として扱われております。\
※閲覧イベント内の"\_source"フィールドの値が"native\_app\_webview"になっていることでも確認いただけます

![](https://2393392196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FH4XuUv5EgXiqltJXSiRd%2Fuploads%2Fgit-blob-d1643aa363639da7f4e7fbc0bce2c6c4fcea7825%2F37ab71a-_2024-01-24_12.14.44.png?alt=media)

{% hint style="info" %}
**Webページ上での「閲覧（view）」以外のイベント計測について**

計測タグを設置したWebページでは、デフォルトで「閲覧（view）」イベントが発生します。

それ以外のイベントをWebページ上から取得したい場合は、Webページ内にカスタムイベントタグを設置してください。「WebとAppのユーザーの紐付け処理」が実装されていれば、Webページ内での「閲覧（view）」以外のイベントもAppのユーザーに紐付きます。

詳細: [カスタムイベントタグの設置 | KARTEサポートサイト](https://support.karte.io/post/6qO99I3EWDpj58BDOwX0v5)
{% endhint %}

## トラブルシューティング

WebViewの紐付け処理やWebView内に表示した接客で問題が起きた場合は以下ページをご確認ください。\
[WebView内の接客やWebView連携で問題が発生した時のチェックリスト](https://support.karte.io/post/5p11ldZv1FiG7KAGtuO8y1)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://app.developers.karte.io/android-sdk/webview-android-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
