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

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

導入手順

共通

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

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

yarn add @react-native-karte/variables

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

iOS

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

npx pod-install ios

Android

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

変数参照の実装

STEP1: 変数を取得する

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

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

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

2. 変数の取得
   変数を取得するには Variables クラスの fetch() メソッドを呼び出します。

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

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

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

📘

変数名の重複

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

STEP2: 変数を参照する

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

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

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

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

📘

デフォルト値

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

効果測定の実装

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

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

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

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

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

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

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

クリックを計測する

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

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