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' });