> For the complete documentation index, see [llms.txt](https://app.developers.karte.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://app.developers.karte.io/flutter-sdk/webview-flutter-sdk.md).

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

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

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

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

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

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

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

計測タグの設置方法については、[カスタムイベントタグの設置](https://support.karte.io/post/6qO99I3EWDpj58BDOwX0v5) をご覧ください。

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

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

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

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

{% hint style="info" %}
**紐付け処理によってできること**

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

{% hint style="warning" %}
**マルチドメインオプションとの併用について**

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

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

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

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

{% hint style="warning" %}
**紐付け処理の実行タイミングについて**

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

Flutter環境では、Flutter側からWebView側でスクリプトが実行されるタイミングの制御が困難な場合もあるため、WebView側の計測タグの出力タイミング等も含めた調整が必要な場合もあります。
{% endhint %}

#### 紐付け処理の実装方法

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

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

**`webview_flutter`での実装例**

{% code overflow="wrap" %}

```dart
// 連携用のスクリプトを取得します
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);
  },
}
```

{% endcode %}

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

ユーザースクリプトを実行できない環境では、SDKによるユーザー紐付けは行えません。\
以前提供していた、[クエリパラメータによる紐付け](https://github.com/plaidev/karte-app-dev-docs/blob/main/japanese/app-faq/app-faq-webview-query-parameters.md)は、2025年8月以降提供を停止しています、ご了承ください。
{% endhint %}

### STEP3: 動作検証を行う

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

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

![](/files/7I3ts5n5iOa2tmJ3Noa2)

{% hint style="warning" %}
**WebView内で発生したイベントをトリガーに接客を配信する際の注意点**

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

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/flutter-sdk/webview-flutter-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.