> 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/variables-react-native-sdk.md).

# \[React Native]設定値を利用する

Key-Valueで構成される値をKARTE経由で配信したい場合は、設定値配信機能を利用することで実現可能です。

アプリケーションの設定などをKARTEに切り出して管理することで、アプリケーションをリリースすることなく、挙動を変更することが可能になります。

## 導入手順

### 共通

npm または yarn を利用してパッケージをインストールしてください。

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

```shell
npm install --save @react-native-karte/variables
```

{% endcode %}
{% endtab %}

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

```shell
yarn add @react-native-karte/variables
```

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

パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。

### iOS

Pod をインストールしてください。

{% code overflow="wrap" %}

```shell
npx pod-install ios
```

{% endcode %}

### Android

導入にあたり必要な手順はありません。

## 変数参照の実装

### STEP1: 変数を取得する

管理画面上で設定した変数は、SDKを初期化しただけでは取得されません。 変数を利用する前に、事前にリモートから取得する必要があります。

1. SDKのインポート宣言を追加

{% code overflow="wrap" %}

```typescript
import { Variables } from '@react-native-karte/variables';
```

{% endcode %}

2. 変数の取得 変数を取得するには `Variables` クラスの `fetch()` メソッドを呼び出します。 `fetch()`は要素の表示の直前や、セグメント更新の直後といった任意のタイミングで実行することが一般的です。 実行のタイミングについての注意事項等は、[設定値配信のベストプラクティス](/karte-for-app-best-practices/best-practices-for-variables-module.md)も合わせてご確認ください。 ※前セッションで配信済みのキャッシュをリセットしたい場合は、アプリケーション起動時（SDKの初期化直後）にも呼び出すことを推奨しております。

{% code overflow="wrap" %}

```typescript
Variables.fetch().then(() => {
  // 成功時の処理
}).catch(() => {
  // 失敗時の処理
});
```

{% endcode %}

`fetch()` メソッドを呼び出すと、SDKは変数取得（ `_fetch_variables` ）イベントを発行し、これをトリガーに設定値配信の接客サービスが配信されます。

この時、配信された接客サービスに含まれる変数は `UserDefaults` や `SharedPreference` にキャッシュされます。 加えて、変数を取得した時点で既にキャッシュされた変数がある場合は、キャッシュされた全変数を削除した上で新たに取得した変数をキャッシュします。 また、これと同時にSDKは表示準備（ `_message_ready` ）イベントを発行します。

{% hint style="info" %}
**変数名の重複**

配信された複数の接客サービスの間で、同名の変数が定義されている場合は、接客サービスの `最終更新日時` が最近のものがキャッシュされます。
{% endhint %}

### STEP2: 変数を参照する

1. 変数オブジェクトを取得

{% code overflow="wrap" %}

```typescript
const variable = Variables.getVariable("参照する変数名を指定");
```

{% endcode %}

2. 変数オブジェクトから値を取得 管理画面上で設定した変数は、変数オブジェクト内で文字列型で保持されています。 変数オブジェクトから値を取得して利用する場合は、任意の型にキャストして利用します。

{% code overflow="wrap" %}

```typescript
// 文字列型で参照
variable.getString("foo");
```

{% endcode %}

{% hint style="info" %}
**デフォルト値**

キャッシュされていない変数を参照した場合や、指定した型にキャストできない場合にデフォルト値が返ります。
{% endhint %}

なお、Variablesクラスの [getAllKeys()](https://plaidev.github.io/karte-sdk-docs/react-native/variables/latest/classes/Variables.html#getAllKeys) を呼ぶことで、現在配信されている設定値のキーの一覧をリスト形式で確認することができます。

## 効果測定の実装

設定値配信機能では、配信した変数を利用するだけでなく、その変数を利用した接客の効果を測定することが可能です。

ここでは説明のために、配信した変数を利用してバナーを表示するケースを例に話を進めます。

接客サービス名は「トップバナー」とし、配信する変数は下記の2変数とします。

| 変数名                     | 内容                   |
| ----------------------- | -------------------- |
| TOP\_BANNER\_IMAGE\_URL | バナー画像のURL            |
| TOP\_BANNER\_LINK\_URL  | バナー画像をクリックした時の遷移先URL |

なお、ここでは変数を利用してバナーを作成する処理については解説しません。 変数の参照については、[変数参照の実装](#section-変数参照の実装) を参考にしてください。

### インプレッションを計測する

バナーが表示されたタイミングで、`message_open` イベントを送信することでインプレッションを計測することが可能です。 なお `message_open` は `Variables` クラスの `trackOpen()` メソッドで送信することが可能です。

{% code overflow="wrap" %}

```typescript
// バナーが表示されたタイミングで、下記処理を実行
const imgVar = Variables.getVariable("TOP_BANNER_IMAGE_URL");
const linkVar = Variables.getVariable("TOP_BANNER_LINK_URL");
Variables.trackOpen([imgVar, linkVar]);
```

{% endcode %}

### クリックを計測する

バナーがクリックされたタイミングで、`message_click` イベントを送信することでクリックを計測することが可能です。 なお `message_click` は `Variables` クラスの `trackClick()` メソッドで送信することが可能です。

{% code overflow="wrap" %}

```typescript
// バナーがクリックされたタイミングで、下記処理を実行
const imgVar = Variables.getVariable("TOP_BANNER_IMAGE_URL");
const linkVar = Variables.getVariable("TOP_BANNER_LINK_URL");
Variables.trackClick([imgVar, linkVar]);
```

{% endcode %}

### 変数オブジェクトのキャッシュ削除

一度 `fetch` メソッドで取得した変数オブジェクトのキャッシュは、 [clearCacheByKey](https://plaidev.github.io/karte-sdk-docs/react-native/variables/latest/classes/Variables.html#clearCacheByKey) や [clearCacheAll](https://plaidev.github.io/karte-sdk-docs/react-native/variables/latest/classes/Variables.html#clearCacheAll) のメソッドを用いて削除することが可能です。

## 設定値配信の接客サービスの設定

[設定値配信の接客サービス](https://support.karte.io/post/reO1yrya5guq8jPqLIclh)をご確認ください。


---

# 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/variables-react-native-sdk.md?ask=<question>&goal=<endgoal>
```

`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.