> 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/react-native-sdk/webview-react-native-sdk.md).
# \[React Native]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 %}
#### 紐付け処理の実装方法
`UserSync.getUserSyncScript` を用いて、ユーザースクリプトを取得し、WebView上でユーザースクリプトを実行することで連携が可能です。
ユーザースクリプトの設定が行われたWebViewでページをロードすることにより、紐付けが行われた状態でトラッキングが行われます。
**`react-native-webview`での実装例**
{% code title="WebViewComponent.jsx" overflow="wrap" %}
```jsx
import * as React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { UserSync } from '@react-native-karte/core';
export function WebViewComponent() {
// 連携用のスクリプトを取得します
const script = UserSync.getUserSyncScript();
return (
);
}
```
{% 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 アイコンが付いていれば、ネイティブアプリ上での行動として扱われております。
{% 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, and the optional `goal` query parameter:
```
GET https://app.developers.karte.io/react-native-sdk/webview-react-native-sdk.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.