---
title: "React Native SDKでリモートコンフィグによるペイウォールをレンダリングする"
description: "Adapty React Native SDKでリモートコンフィグのペイウォールを表示し、ユーザー体験をパーソナライズする方法をご覧ください。"
---

リモートコンフィグを使ってペイウォールをカスタマイズした場合、ユーザーに表示するためのレンダリング処理をモバイルアプリのコードに実装する必要があります。リモートコンフィグはニーズに合わせた柔軟性を提供するため、ペイウォールに何を含めるか、またどのように表示するかはあなた次第です。リモートコンフィグから取得したカスタムペイウォールを表示できるよう、リモートコンフィグを取得するメソッドを提供しています。

## ペイウォールのリモートコンフィグを取得して表示する \{#get-paywall-remote-config-and-present-it\}

ペイウォールのリモートコンフィグを取得するには、`remoteConfig` プロパティにアクセスして必要な値を取り出します。

```typescript showLineNumbers
try {
  const paywall = await adapty.getPaywall({ placementId: "YOUR_PLACEMENT_ID" });
  const headerText = paywall.remoteConfig?.data?.["header_text"];
} catch (error) {
  // handle the error
}
```

必要な値をすべて取得したら、それらをレンダリングして見栄えの良いページに組み立てましょう。さまざまなスマートフォンの画面サイズや向きに対応したデザインにすることで、デバイスを問わずシームレスで使いやすい体験を提供できます。

:::warning
AdaptyアナリティクスがファネルやみA/B テストのデータを正確に収集できるよう、以下で説明する[ペイウォール表示イベントの記録](present-remote-config-paywalls-react-native#track-paywall-view-events)を必ず行ってください。
:::

ペイウォールの表示が完了したら、購入フローの設定に進みます。ユーザーが購入を行う際は、ペイウォールのプロダクトを使って `.makePurchase()` を呼び出すだけです。`.makePurchase()` メソッドの詳細については、[購入の実装](react-native-making-purchases)をご覧ください。

インターネット接続がない場合やキャッシュが利用できない場合でもスムーズな体験を確保するため、[フォールバックペイウォールの作成](react-native-use-fallback-paywalls)をおすすめします。

## ペイウォール表示イベントを記録する \{#track-paywall-view-events\}

Adaptyはペイウォールのパフォーマンス測定をサポートしています。購入データは自動的に収集されますが、ペイウォールの表示ログはお客様側で記録する必要があります。ペイウォールをいつ表示するかを把握しているのはあなただけだからです。

ペイウォール表示イベントをログに記録するには、`.logShowPaywall(paywall)` を呼び出すだけです。これにより、ファネルやA/B テストのペイウォール指標に反映されます。

:::important
[ペイウォールビルダー](adapty-paywall-builder)で作成したペイウォールを表示する場合、`.logShowPaywall(paywall)` の呼び出しは不要です。
:::

```typescript showLineNumbers
await adapty.logShowPaywall(paywall);
```

リクエストパラメータ:

| パラメータ   | 必須 | 説明                                                                                 |
| :---------- | :------- |:--------------------------------------------------------------------------------------------|
| **paywall** | 必須 | [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall) オブジェクト。       |