Capacitor SDKでボタンアクションに応答する

Adaptyのペイウォールビルダーを使ってペイウォールを構築する場合、ボタンを正しく設定することが重要です:

  1. ペイウォールビルダーにボタンを追加し、既存のアクションを割り当てるか、カスタムアクションIDを作成します。
  2. 割り当てた各アクションを処理するコードをアプリに記述します。

このガイドでは、コード内でカスタムアクションや既存のアクションを処理する方法を説明します。

ペイウォールを閉じる

ペイウォールを閉じるボタンを追加するには:

  1. ペイウォールビルダーでボタンを追加し、Close アクションを割り当てます。
  2. アプリのコードに、ペイウォールを閉じる close アクションのハンドラーを実装します。

Capacitor SDKでは、close アクションはデフォルトでペイウォールを閉じる動作をトリガーします。ただし、必要に応じてコードでこの動作をオーバーライドできます。たとえば、あるペイウォールを閉じたときに別のペイウォールを開くようにすることもできます。


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    console.log('User closed paywall');
    return true; // Allow the paywall to close
  }
});

ペイウォールからURLを開く

リンクのグループ(利用規約や購入の復元など)を追加したい場合は、ペイウォールビルダーで Link 要素を追加し、Open URL アクションが割り当てられたボタンと同じ方法で処理してください。

ペイウォールからリンクを開くボタン(Terms of usePrivacy policy など)を追加するには:

  1. ペイウォールビルダーでボタンを追加し、Open URL アクションを割り当てて、開きたいURLを入力します。
  2. アプリのコードに、受け取ったURLをブラウザで開く openUrl アクションのハンドラーを実装します。

Capacitor SDKでは、window.open アクションはデフォルトでURLを開く動作をトリガーします。ただし、必要に応じてコードでこの動作をオーバーライドできます。


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false; // Don't close the paywall
  },
});

アプリにログインする

ユーザーをアプリにログインさせるボタンを追加するには:

  1. ペイウォールビルダーでボタンを追加し、Login アクションを割り当てます。
  2. アプリのコードに、ユーザーを識別する login アクションのハンドラーを実装します。

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'login') {
      // Navigate to login screen
      console.log('User requested login');
    }
  }
});

カスタムアクションを処理する

その他のアクションを処理するボタンを追加するには:

  1. ペイウォールビルダーでボタンを追加し、Custom アクションを割り当てて、IDを設定します。
  2. アプリのコードに、作成したアクションIDのハンドラーを実装します。

たとえば、別のサブスクリプションオファーや買い切り購入がある場合、別のペイウォールを表示するボタンを追加できます:

const unsubscribe = view.setEventHandlers({
  onCustomAction(actionId) {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
      console.log('User requested new paywall');
    }
  },
});