みなさん、こんにちは！
今回は Rewardful というサービスを Bubble と連携して、Bubble アプリに手軽にアフィリエイトプログラムを導入する方法について、ご紹介します！
Rewardful は、SaaS やサブスクリプションビジネス向けに特化したアフィリエイトおよびリファラルプログラム（紹介プログラム）の管理ツールです。Rewardful を使用することで、アプリ内でアフィリエイトプログラムを立ち上げ、管理し、報酬を支払うことができます。
アフィリエイトプログラムは、新規顧客の獲得、広告費用の最適化、ブランド認知の拡大、そして持続的な成長を実現するための強力なマーケティング手法です。Rewardful と Bubble を連携させることで、簡単にアフィリエイトプログラムを導入し、これらの利点を最大限に活用することができますので、ぜひ最後までお付き合いいただければと思います！
1. 事前準備
本記事では決済機能として Stripe を使用します。Rewardful の動作確認には、本番環境が使用できる Stripe アカウントが必要となりますので、実装を検討されている方はご準備いただければと思います。
また、今回の動作確認では「Bubble アプリのアフィリエイトに申し込んだユーザーが、誰か別の人にアプリを紹介して、その人がアプリのサブスクを購入した時に報酬が発生する」という、一般的なストーリーを想定したものとします。Stripeでは開発環境と本番環境では商品が別で管理されますので、動作確認時は本番環境の商品を準備するようにしてください。
2. Rewardfulの設定
冒頭で述べた通り Rewardful は、SaaS やサブスクリプションビジネス向けのアフィリエイトおよびリファラルプログラムの管理ツールです。Stripe や Paddle などの決済プラットフォームと統合し、顧客が他の人を紹介したり、アフィリエイトとして報酬を得たりすることを容易にします。
Rewardful 側の設定は、以下の4ステップで進めていきます。
- Rewardful にサインアップ
- Stripeアカウントとの連携
- 設定を構成
- 新しいアフィリエイトプログラムの作成
2.1. Rewardfulにサインアップ
まずは、以下のURLに接続して Rewardful にサインアップします。
必要項目を入力して「Sign up」ボタンで登録します。
サインアップしたら登録メールアドレスを確認して、アカウントを有効化します。
なお、Rewardful には無料プランがありませんので、今回は14日間のトライアル期間を利用して動作確認を行っています。
2.2. Stripeアカウントとの連携（Connect payment processor）
アカウントの作成ができたら、Stripe と連携していきます。「Connect payment processor」で「Stripe」を選択します。
「Connent with Stripe」ボタンをクリックして、連携するアカウントを選択します。同じブラウザウィンドウで、Stripe アカウントにログインしておくとスムーズに連携できます。
本番環境が使用できない Stripe アカウントの場合は、連携時に口座などの追加情報を登録する必要があります。
2.3. 設定の構成（Configure settings）
次に、取り扱いたい通貨と支払い方法を選択し「Next →」ボタンで進みます。
2.4. 新しいアフィリエイトプログラムの作成（Create a campain）
キャンペーン（新しいアフィリエイトプログラム）を作成していきます。「Campaign name」に任意のキャンペーン名、「Website URL」に Bubble アプリのURLを入力します。下図の例では「Commission percentage」は推奨値の「30」で設定しました。その他の項目はデフォルト値で設定しています。入力できたら「Create Campaign」ボタンをクリックして保存します。
「Add Rewardful to your website」画面で Platform Integrations の中から Bubble を選択すると、Bubble との連携手順のマニュアルが表示されます。
ここまで出来たら、次は Bubble アプリ側で Rewardful と連携していきます。なお Bubble との連携設定が完了したら、下図のような Campaign ページが表示されるようになります。
3. Bubble アプリの準備
では、次に Rewardful の「Add Rewardful to your website」に表示しれている手順を参考に Bubble 側の設定を行っていきます。
3.1. Stripe.Js 2 プラグインをインストール
Plugins タブから Stripe.Js 2 プラグインを検索してインストールします。
3.2. トラッキングスクリプトの設定
Rewardful の「Step2: Install Rewardful's Click Tracking Script」項から、スクリプトをコピーして、Bubble エディタの Settings > SEO / metatags の Script/meta tags in header の項目にペーストします。
3.3. サインアップワークフローの作成
次に Bubble でサインアップページを作成していきます。今回の例では index ページを使用しました。
サインアップ時のワークフローは、以下の手順で進めます。
- sign the user up アクションの実行
- Stripe.js - Customer - Create アクションの実行
- 2のレスポンスで受け取った Stripe の CustomerID をデータベースに退避
- ログインユーザー用のページに遷移
上図で設定したワークフローの一番の目的は、サインアップしたユーザーを Stripe 側でもカスタマーとして登録し CustomerID を取得することにあります。
なお、今回の例では、下図のような定義で User type を準備しています。具体的には、ワークフローの Step3 で CustomerID フィールドに、Stripe から受け取った ID を登録しています。
3.4. ログインユーザー用ページの作成
次にサインアップ後に遷移する、ログインユーザーのみが表示できるページを作成します。今回の例では payments という名前のページにしました。
Rewardful の「Step3: Install Rewardful's Conversion Tracking Script」項から、スクリプトをコピーして、Bubble の HTML エレメントに貼り付けます。Current User's email の部分は、コピーしてきたプレーンテキストのままではなく、「Insert dynamic data」から取得する「Current User's email」に置き換える必要があります。
この payments ページでは、Stripe.Js2 プラグインのエレメントである「StripeElement」を配置して決済処理のワークフローを設定します。
ページに配置した「購入する」ボタン（ユーザーがサブスク購入時にクリックするボタン）のイベントで Stripe の Payment method を作成します。
Payment method が作成されたタイミング（Stripe Element の「PaymentMethod was created」イベント）で、CustomerID と PaymentMethod ID を紐づけて、ユーザーによるサブスク購入の処理を実行します。具体的な手順は以下の３ステップです。
- Stripe.js - PaymentMethod - Attach アクションの実行
- Stripe.js - Subscription - Create アクションの実行
- 必要があれば PaymentMethod ID と Subscription ID をデータベースに退避
なお、Subscription ID については、トライアル期間を設定している商品の場合、Stripe.Js2（ver2.2.1）では未取得となるようですので、Subscription ID を必ず取得する必要があるといった場合はご留意くださいね。
3.5. Rewardful から接続確認
ここまで出来たら、Rewardful の「Add Rewardful to your website」画面の一番下に表示されている「OK, I've completed this」ボタンをクリックします。
Setup complete > Confirm your instrallation に表示されている「Confirm installation →」ボタンをクリックして、Bubble アプリに遷移できれば Rewardful と Bubble の連携設定が完了です。
4. アフィリエイトリンクの生成
次に、アフィリエイトリンクを作成していきます。このリンクは、Bubble アプリに登録しているユーザーが、アフィリエイトプログラムに申し込むことによって作成されるリンクとなりますが、今回は動作確認用に Rewardful から手動で作成していきます。
Affiliates ページを開き、「Add an affiliate」ボタンをクリックします。
「Add a new affiliate」で必要項目を入力して、「Create affiliate」ボタンをクリックします。
これで、アフィリエイトプログラムに申し込んだ想定のテストユーザーを作成することができました。
ユーザー名をクリックすると「Links ＆ Coupons」タブでアフィリエイトリンクを取得することができます。
「View username's dashboard」リンクをクリックすると、ユーザーのダッシュボードを開くこともできます。
5. 動作確認
では、動作確認をしていきましょう。
5.1. 【注意事項】Stripe について
なお動作確認を行う際に Rewardful では、以下のような検証環境であることを推奨しています。
- 広告ブロック機能のない、キャッシュとクッキーがクリーンなシークレット／プライベートブラウジングモードを使用すること。
- Stripeの顧客セクションにまだ存在しないメールアドレスを使用すること。
- Rewardful のスクリプトは、Stripe の本番環境のカスタマーレコードを検索するため、Stripe では本番環境で確認すること。
上記の推奨環境を適用するには、決済ではテスト用の「4242」カードではなく、実際に決済可能なクレジットカードを使用する必要があります。また、Bubble で「version-test」環境を使用している場合であっても、Stripe.Js2 プラグインのキーの設定値では、dev の部分に Liveモードキーを設定する必要があります。
Stripe の本番環境では実際に決済が実行されますので、トライアル期間を設定したサブスクを利用して購入をキャンセルさせるなど、テストを実行される際は十分にご注意くださいね。また、テスト実行後はプラグインキーの設定値を test モードキーに変更するなども忘れずに行うようにしましょう。
動作確認を実行する上でおススメの手順は、Rewardful の連携確認は一旦置いておいて、まずは先に Stripe.Js2 と Bubble の連携が正常に完了できるかを開発環境で試してみることです。Stripe の決済フローに問題がなければ、Stripe を本番環境に切り替えて、次に Rewardful の連携を確認すると、スムーズに一連の流れの動作確認が行えるかと思います。なお、その際は Stripe では本番と開発環境で商品IDが異なることと、Stripeに未登録の顧客を使用する必要がある点に注意するようにしてくださいね。
5.2. シークレットモードブラウザの起動
シークレットモードのブラウザを使用して、前項で準備したアフィリエイトリンクに接続します。
Rewardful のスクリプトが正しく読み込まれているかを確認するには、開発ツールを使ってクッキーを参照します。「rewardful.referral」という名前のクッキーが見つかれば、スクリプトの読み込みが成功しています。
Stripe の顧客に登録されてないメールアドレスを使用して、サインアップします。サインアップ後は、payments ページに遷移して、このページでも先程と同様に「rewardful.referral」クッキーを確認することができます。
もし Stripe が開発環境を参照している場合は、ログイン後の画面で Rewardful のクッキーを取得することができません。これは、Rewardful が Current's user's email で取得したメールアドレスを本番環境に検索しにいくために発生します。もし、このページでクッキーが消滅してしまっている場合は、設定をもう一度確認してみてください。
Stripe との連携が上手くいっているかを確認するには、このタイミングで Bubble のデータベースを確認してみます。User type の CustomerID フィールドの値と、Stripe のダッシュボードで確認できる顧客情報が一致していれば連携成功です。
次に、payment ページでサブスク購入の決済処理を実行して、PaymentMethodID などが正しく取得されているかなどを確認します。
Rewardful との連携が成功している場合は、Rewardful のダッシュボードで、Visitor や Leads といった数値が加算され、Stripe 側のダッシュボードでは、メタデータの部分に アフィリエイトに関する情報が記載されます。
連携は以上です！
6. まとめ
今回は、Bubble アプリにアフィリエイトプログラムを導入することができる Rewardful についてご紹介しました！現在のところ Rewardful に無料プランはありませんが、14日のトライアル期間がありますので、アフィリエイトプログラムを検討されている方は一度試してみてはいかがでしょうか？アプリの新規顧客の獲得やブランド認知の拡大などに、ぜひご活用くださいね！
それでは、ここまでお読みいただきありがとうございました。次回もどうぞお楽しみに～！
