🤑

Superwallを使ってアプリの最適な課金訴求画面を見つけよう！

kazutoyo

2024/02/23に公開

こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！

アプリにサブスクリプションの機能を入れる際に課金の訴求画面（Paywall）を表示し、ユーザにサブスクリプションのメリットを示すことが多いと思います。

例えばテラーノベルでは次のような課金訴求画面を表示しています。

今回紹介するSuperwallは、このような課金訴求画面を簡単に導入・A/Bテストや分析をするためのツールとなっています。

Superwallについて

Superwallは2024年の2月時点で、iOS、Android（Beta)、Flutter（Beta）に対応しています。
わずか10分でアプリに組み込めると謳っています。
https://superwall.com/

superwall.com

様々なテンプレートとエディター

Superwallには200以上のテンプレートが無料で用意されています。

superwall.com

Superwallの管理画面では次のようなエディターが用意されており、テンプレートをカスタマイズすることができます。

superwall.com

課金訴求のA/Bテスト

どのデザインが最も効果が良いかは、アプリやユーザの特性によって変わってきます。
Superwallでは一度にいくつものパターンでA/Bテストを行うことができます。
また、条件を決めて課金訴求の表示をコントロールすることも可能です。

superwall.com

料金体系

2024年2月時点では、Superwallを無料で始めることができます。
1ヶ月に250コンバージョンまでは無料で使え、超えた分は総収益の〜1％ほどとなるようです。
個人開発やスモールなチームで試すには嬉しいですね！

superwall.com

サードパーティアナリティクスの対応

Superwall内でA/Bテストの効果比較や簡易的な分析を行う機能が標準で搭載されています。
それとは別にアプリで既にに導入されているAmplitudeやMixpanel、Firebase Analyticsなどに送信し、詳細に分析することも可能です。

RevenueCatとの組み合わせ

アプリ内課金を簡単に導入することができるRevenueCatと組み合わせることも可能です。

RevenueCatとSuperwallを組み合わせることで、アプリのマネタイズがとても簡単に実装できますね！

iOSアプリの実装例

登録＆アプリの追加

Superwallのトップページの右上にある「Sign Up」から登録を行います。

追加したいアプリ名やプラットフォーム、言語などを選択します。

アプリへの組み込み

Superwall上のAppが作成されると、SuperwallのQuickStartが始まります。
基本的にこのステップに従って進めれば導入できます。

SDKの追加

今回はSPMで導入を行います。
次のパッケージのURLで追加します。

https://github.com/superwall-me/Superwall-iOS

SDKの設定

コピペでそのまま設定できます。
今回はプロジェクトをSwiftUIを選んでいるので、SwiftUIのタブのコードを参考にします。

import SwiftUI
import SuperwallKit

@main
struct SuperwallSampleApp: App {
    init () {
        Superwall.configure(apiKey: "API Keyは置き換えてください")
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

課金訴求画面の表示

Superwall.shared.register を呼び出すことで、課金訴求画面が表示されます。
今回はデフォルトで作成されている campaign_trigger キャンペーン^[1]を表示します。

import SwiftUI
import SuperwallKit

struct ContentView: View {
    var body: some View {
        VStack {
            Button("🤑 Show Paywall") {
                Superwall.shared.register(event: "campaign_trigger")
            }
        }
        .padding()
    }
}