English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

Capacitor SDKでフローにデータを渡す

カスタムタグは、アプリの値を持つカスタム変数です。変数の設定で Value comes from outside the app を選択すると、アプリは Adapty SDK を通じてその値を設定できます。たとえば、テキスト要素に「Coins:」とカスタムタグが含まれている場合、アプリがタグに「120」を渡すと、ユーザーには「Coins: 120」と表示されます。

始める前に

Adapty SDK v4 以降が必要です。v4 より前のバージョンではフローが表示されません。

フローにカスタムタグを追加する

アプリの値をフローで表示するには、ビルダーでカスタムタグを設定します。

  1. アプリが渡す各値に対してカスタムタグを作成します。

    名前、説明、String値タイプ、および初期値を含む変数作成フォーム

  2. 各タグをテキスト要素に挿入します。

  3. グループ名を含む各タグのフルネームを確認してください。アプリのコードはこの名前で各値を渡します。たとえば、user グループに streak タグが含まれている場合、タグのフルネームは user.streak となります。

    streakタグがuserグループ内にある、変数追加ドロップダウンのカスタムタブ

カスタムタグの値を渡す

アプリの値を createFlowView の customTags パラメータにオブジェクトとして渡します：

  • 各キーは user.streak のように、カスタムタグのフル名です。
  • 各値は、タグの代わりにユーザーが目にする文字列です。
  • 各値は “1,250” のように人が読める形式にしてください（“1250.0” のような形式は不可）。Adapty はフォーマットや翻訳を行いません。

SDK はビューの作成時に値を一度だけ読み込むため、フローが開いている間は変更されません。


const customTags = {
  'username': 'DragonSlayer42',
  'coins': '1,250',
};

try {
  const view = await createFlowView(flow, { customTags });
  await view.present();
} catch (error) {
  // handle the error
}

カスタムタグをテストするには、タグの値を設定するコードを追加した後、アプリでフローを開いてください。ビルダーのキャンバスおよびデバイスでのプレビューには初期値のみが表示されます。Adapty モバイルアプリはカスタムタグの値を設定しません。

アプリがすでに旧ペイウォールビルダーのペイウォールにカスタムタグの値を設定している場合は、フローにおけるカスタムタグの違いを確認してください。

値がない場合にユーザーに表示されるもの

以下の場合、ユーザーにはカスタムタグの初期値がフォールバックとして表示されます。

  • アプリがそのタグに値を渡していない場合。
  • ユーザーがアプリを値を渡すバージョンにアップデートしていない場合。
  • アプリのコード内の名前が、大文字・小文字を含めタグのフルネームと一致していない場合。
  • 同じテキスト要素内の別のカスタムタグに値がない場合。その場合、そのテキスト要素内のすべてのカスタムタグが初期値を表示します。

タグの位置に何も表示しないようにするには、空の文字列を渡してください。Adapty は空の文字列を値として扱うため、フォールバックは表示されません。

例：オンボーディングの回答からBMIを表示する

フローはユーザーから回答を収集でき、カスタムタグはアプリの値を表示できます。この2つを組み合わせることで、スコア、おすすめプラン、健康指標など、回答からアプリが計算した結果をユーザーに表示できます：

  1. フローが回答を収集し、アプリに送信します。
  2. アプリが結果を計算します。
  3. アプリが次のフローにカスタムタグの値として結果を渡します。

この例では、オンボーディングフローがユーザーの体重と身長を収集します。ユーザーがオンボーディングフローの最後の画面を閉じると、アプリがBMI（ボディマス指数）を計算します。そして、BMIを表示するペイウォールフローを開きます。

フローを設定する

  1. 2つのフローを作成します: ユーザーの体重と身長を収集するオンボーディングフローと、BMIを表示するペイウォールフローです。

  2. オンボーディングフローに2つのNumber入力を追加します:

    • 体重（キログラム）用。Element IDをweightに設定します。
    • 身長（センチメートル）用。Element IDをheightに設定します。

    両方の入力で、FormatをIntegerに設定します。入力はユーザーが入力した通りのテキストとして値を送信するため、サンプルコードは”70.5”と”70,5”を同じように読み取りません。整数には小数点区切り文字がないため、すべてのロケールで同じように読み取られます。

  3. アプリが両方の値を確実に受け取れるよう、オンボーディングフローを入力のない画面で終了させます。その画面に、Close flowアクションを持つボタンを追加します。入力はフォーカスを失ったとき、またはユーザーが別の画面に移動したときに値を送信します。Close flowアクションは値を送信しません。サンプルコードは、ユーザーが最後の画面に到達した場合にのみペイウォールを開きます。

  4. ペイウォールフローで、bmiという名前のカスタムタグを作成します。Initial valueフィールドにダッシュ（—）を入力します。アプリがBMIを渡さない場合、ユーザーにはダッシュが表示されます。

  5. ペイウォールフローに「Your BMI:」という文字列を含むテキスト要素を追加します。この文字列の後に、bmiカスタムタグを挿入します。

  6. オンボーディングフローをonboardingなどのプレースメントに追加します。ペイウォールフローをID bmi_paywallのプレースメントに追加します。BMIをペイウォールに渡すのコードは、このIDでペイウォールを取得します。

ペイウォールにBMIを渡す

オンボーディングフローの flow_user_input イベントから体重と身長を収集します。詳細は フローからデータを処理する を参照してください。ユーザーが最後の画面に到達したことを確認するには、is_last_screen が true に設定された flow_screen_showed イベントを監視します。詳細は フロー画面の表示を追跡する を参照してください。ユーザーがその画面を閉じてオンボーディングフローを終了したら、BMIを計算します。次に、ペイウォールのビューを作成し、bmi カスタムタグにBMIを渡します。

onboardingView に以下のハンドラーを登録してください。これはオンボーディングフロー用に作成するビューです：


const bodyAnswers: Record<string, string> = {};
let reachedLastScreen = false;

await onboardingView.setEventHandlers({
  onAnalytics(name, params) {
    if (name === 'flow_screen_showed' && params.is_last_screen) {
      reachedLastScreen = true;
    }
    if (name === 'flow_user_input' && typeof params.value === 'string') {
      bodyAnswers[params.element_id as string] = params.value;
    }
    return false;
  },
  onDisappeared() {
    // Number inputs send their values as strings.
    const weight = Number(bodyAnswers.weight);
    const height = Number(bodyAnswers.height);
    const finished = reachedLastScreen;
    delete bodyAnswers.weight;
    delete bodyAnswers.height;
    reachedLastScreen = false;

    if (finished && weight > 0 && height > 0) {
      const heightInMeters = height / 100;
      const bmi = weight / (heightInMeters * heightInMeters);
      showBmiPaywall(bmi.toLocaleString(undefined, { maximumFractionDigits: 1 }));
    }
    return false;
  },
});

async function showBmiPaywall(bmi: string) {
  try {
    const flow = await adapty.getFlow({ placementId: 'bmi_paywall' });
    const view = await createFlowView(flow, { customTags: { 'bmi': bmi } });
    await view.present();
  } catch (error) {
    // handle the error
  }
}

toLocaleString はユーザーのロケールの小数点区切り文字を使用します: 英語では “22.7”、ドイツ語では “22,7”。

BMIをユーザーのプロファイルに保存する

BMIに基づいてユーザーに異なるフローを表示するには、BMIをプロファイルのカスタム属性として保存します。Adapty ダッシュボードで、キー bmi を使ってNumber カスタム属性を作成し、その属性から構築したオーディエンスに各フローを表示します。

onDisappearedのbmiを計算した行の直後でupdateProfileメソッドを呼び出します。セグメントがBMIをしきい値と比較できるように、フォーマットされた文字列ではなく数値を渡してください。onDisappearedはasyncにできないため、awaitの代わりに.catchで結果を処理します：

adapty
  .updateProfile({ codableCustomAttributes: { bmi } })
  .catch((error) => {
    // handle the error
  });