Capacitor SDKでペイウォールビルダーのペイウォールを表示する
ペイウォールビルダーを使ってペイウォールをカスタマイズした場合、モバイルアプリのコードでレンダリングを行う必要はありません。ペイウォールビルダーのペイウォールには、表示内容と表示方法の両方が含まれているためです。
このガイドはペイウォールビルダーのペイウォール専用です。リモートコンフィグのペイウォールを表示する場合は、手順が異なります。リモートコンフィグのペイウォールの表示については、リモートコンフィグで設計されたペイウォールのレンダリングを参照してください。
ペイウォールを表示するには、createPaywallViewメソッドで作成したviewに対してview.present()メソッドを呼び出します。各viewは一度しか使用できません。ペイウォールを再度表示する必要がある場合は、createPaywallViewを再度呼び出して新しいviewインスタンスを作成してください。
viewを再作成せずに再利用すると、エラーが発生する場合があります。
const view = await createPaywallView(paywall);
view.setEventHandlers({
onUrlPress(url) {
window.open(url, '_blank');
return false;
},
});
try {
await view.present();
} catch (error) {
// handle the error
}
デベロッパー定義タイマーの使用
モバイルアプリでデベロッパー定義タイマーを使用するには、timerIdを指定します。この例ではCUSTOM_TIMER_NYが、Adaptyダッシュボードで設定したデベロッパー定義タイマーのTimer IDです。これにより、アプリは13d 09h 03m 34sのような正しい値(タイマーの終了時刻(例:元日)から現在時刻を引いた値)でタイマーを動的に更新できます。
const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };
const view = await createPaywallView(paywall, { customTimers });
この例では、CUSTOM_TIMER_NYはAdaptyダッシュボードで設定したデベロッパー定義タイマーのTimer IDです。タイマーにより、アプリは13d 09h 03m 34sのような正しい値(タイマーの終了時刻(例:元日)から現在時刻を引いた値)でタイマーを動的に更新します。
ダイアログの表示
Androidでペイウォールビューが表示されている場合は、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Androidでは通常のアラートがペイウォールビューの背後に表示されるため、ユーザーには見えません。このメソッドを使用することで、すべてのプラットフォームでペイウォールの上に適切にダイアログが表示されます。
try {
const action = await view.showDialog({
title: 'Close paywall?',
content: 'You will lose access to exclusive offers.',
primaryActionTitle: 'Stay',
secondaryActionTitle: 'Close',
});
if (action === 'secondary') {
// User confirmed - close the paywall
await view.dismiss();
}
// If primary - do nothing, user stays
} catch (error) {
// handle error
}
iOSプレゼンテーションスタイルの設定
present()メソッドにiosPresentationStyleパラメーターを渡すことで、iOSでのペイウォールの表示方法を設定できます。パラメーターには'full_screen'(デフォルト)または'page_sheet'を指定できます。
await view.present({ iosPresentationStyle: 'page_sheet' });