Brazeの In-App Messages を活用したゲーミフィケーション機能

こちらの記事は、アソビュー！ Advent Calendar 2024 の17日目（表面）です。

こんにちは。マーケットプレイス開発部の五十嵐です。

もうすぐクリスマスですね。みなさんは、どのようにお過ごしでしょうか？
今年も我が家では子供達のためサンタさんの準備をしているのですが、6歳の息子の今年の願いは、Switchでハマっているソフトの追加コンテンツだそうです・・・。
ニンテンドープリペイドカードを枕元に置いておけばいいのでしょうか... 😇

さて、今回はアソビュー！アプリのゲーミフィケーション機能をBrazeの In-App Messages を利用して実現した話をご紹介します。

Braze について

Brazeを全く知らない方もいるかもしれませんので簡単にご説明すると、Brazeはマルチチャネルマーケティングを実現するための、カスタマーエンゲージメント(=顧客との関係構築)プラットフォームです。
モバイルアプリ、ウェブ、Eメール、プッシュ通知、SMSなど、さまざまなチャネルを活用して顧客とのコミュニケーションを最適化し、パーソナライズされた体験を提供できます。直近だと、「LINE」との連携も発表され、益々多様なチャネルで顧客とコミュニケーションが可能となってきていますね。
一般的には、サービス提供元から顧客に対してメッセージ配信することが、主な使用方法になると思います。

メッセージ配信

Brazeからのメッセージ配信は、「２つの配信方式」 ✖️ 「複数のチャネル」の組み合わせによって行われるのが一般的かと思います。

[配信方式]

配信方式	用途	利用例
キャンペーン	単発のメッセージを届けたい	定例のニュースレター、特定イベント時の告知
キャンバス	ユーザ行動などに基づいた複雑な条件に合わせたメッセージを届けたい	新規登録後にウェルカムEメールを送り、その後ログインがなければ3日後にプッシュ通知、それでも行動がなければ7日後に別のIn-Appメッセージを表示

[チャネル]

チャネル	特徴・用途
Eメール	会員向けの定期案内、プロモーション、ニュースレター
プッシュ通知（アプリ）	アプリインストールユーザーへの即時通知・リマインダー
プッシュ通知（Web）	ブラウザ上でのリアルタイム通知
In-App Messages	アプリ利用中のユーザーにその場で表示するポップアップやバナー
SMS・MMS	携帯電話番号宛の直接的・短いテキストメッセージ
コンテンツカード	アプリ内やWeb上の専用領域に表示する非同期コンテンツ

アソビュー！におけるBraze活用法

アソビュー！でもゲストとコミュニケーションを取るための手段として、様々な場面で活用しています。

Eメール

予約・購入を検討されているゲストへの確認メールなどに利用しています。下記の記事で、このあたりを導入した際の話が詳しく記載されているため、ぜひこちらもご覧になってみてください。 tech.asoview.co.jp

PUSH通知

モバイルアプリユーザ向けに、ゲストの属性に合わせたおすすめスポットの紹介などを配信することが多いですが、最近ではよりゲストに便益がある、パーソナライズされたメッセージの送信も始めました。

In-App Messages

キャンペーン商品の告知や、施設ページの注意事項の表示、などに利用されることが多いですが、今回はこれを使ったゲーミフィケーション施策を実施したお話をこの後で取り上げたいと思います。

コンテンツカード

配信したコンテンツをアプリやWebページに上に永続的に表示できる、といった特徴があるため、これを活用したアプリ機能をリリース予定なので、この辺りの話もまた記事で取り上げる予定です。

In-App Messages でゲーミフィケーション機能を開発

さて、ここからがこの記事の本題です。
アソビュー！ではアプリ利用を促進するために、アプリ利用者に毎日ポイントを付与する機能を検証中です。ただし、あくまでも検証フェーズの施策であり、通常の機能開発とは異なる側面があったため、Brazeの In-App Messages をフルに活用して実現することになりました。

ゲーミフィケーションの要素は何でもよかったのですが、今回はルーレットを採用しました。
よく見かける「１日１回ルーレットなどを回して、ポイントゲット！」みたいなやつです。

In-App Messages (以降、IAM) を採用した主な理由は2点です。

特定のゲストグループから少しずつ検証したい
→ Brazeのセグメント機能で制御するのが良さそう
施策開始後（機能リリース後）、見た目の修正を適宜実施したい
→ アプリ側でUI実装を行うと、変更の度にアプリ再リリースが必要になるため、Brazeの配信機能に乗っかると良さそうで、その中で In-App Messages が一番適してそう

実現イメージ

(1) アプリ起動時にキャンペーンポップを表示し、ゲストの意思を持ってルーレットを開始する

(2) ルーレットが回り、当選したポイントをゲット

仕様のポイント

認証されたユーザのみがルーレットを回せる
ユーザの意思を持ってルーレットを開始する（やらない選択もあり）
ルーレットが開始されたことを持ってポイント抽選と付与を実施

実装のポイント

通常、Brazeから配信するメッセージに自社サーバー等から取得したメッセージを埋め込みたい場合は Connected Content を使用します。Connected ContentはBrazeサーバーで実行され、その後、IAMが配信されるため、IAMが表示された後に、APIを実行することはできません。従って、今回のように、ルーレットの開始をユーザの意思を持って実行させる場合は、IAMだけで実装するとなると、IAMを２段階で配信する必要があります。

アプリから認証コード付きのカスタムイベントを送り、IAM1をトリガーとする
IAM1からカスタムイベントを送り、IAM2をトリガーする
IAM2からConnected Contentを利用してAPIを呼び出す

全体処理イメージ

アプリの実装

アプリからはカスタムイベント（必要に応じて属性付与して）を送信するだけなので、詳細は割愛します。

1つ目のIAM（キャンペーンポップ）

MESSAGE TYPE = Custom Code を選択し、UI を独自実装します。

ポイントとしては、ボタンタップ時の動作として、このIAMをトリガーしたカスタムイベントの属性値を付与して、２つ目のIAMをトリガーするカスタムイベントを呼ぶ点です。
カスタムイベントの属性値を参照する際の記述方法は、Liquidという言語仕様に則って記載します。



  <script>
    window.addEventListener("ab.BridgeReady", function () {

      document.querySelector(".start-button").onclick = function () {
        const param1 = "{{event_properties.${param1}}}";
        brazeBridge.logCustomEvent("roulette_start", { param: param1 });
        brazeBridge.requestImmediateDataFlush();
        closeMessage();
      };

      document.querySelector(".close-button").onclick = function () {
        closeMessage();
      };
    });

    function closeMessage() {
      if (typeof appboyBridge !== 'undefined' && typeof appboyBridge.closeMessage === 'function') {
        appboyBridge.closeMessage();
      } else {
        window.close();
      }
    }
  </script>

2つ目のIAM（ルーレット）

こちらも同様に、MESSAGE TYPE = Custom Code を選択し、UI を独自実装します。
ここでのポイントはConnected Contentに使い方です。

Connected Contentの結果を保存したローカル変数は、同一階層のタグ内でしか参照できないため、隠しフィールドに格納し、別階層のタグやJavaScript内で参照できるようにしています
Connected Contentは2XX 系のレスポンスの時は、レスポンス結果を返し、それ以外の場合はレスポンスを返さないため、エラーのステータスコードによる細かいハンドリングはしていません。もし、厳密に制御したい場合は、APIのレスポンスを工夫する必要がありそうです。

Connected Contentの詳細仕様については公式ドキュメントも参照してみてください。



{% connected_content
  https://mydomain.api/BonusPoint
  :method post
  :body param1={{event_properties.${param1}}}
  :headers {
    "Content-Type": "application/json"
  }
  :save response
%}

<input type="hidden" name="dummy" id="api-response" value="{{ response.point }}">

{% if response.__http_status_code__ != 200 %}
    <!-- エラー時の表示 -->
    ...
{% else %}
    <!-- ルーレット表示 -->
    ...
{% endif %}
<!-- DOM操作でAPI取得: document.getElementById('api-response').value -->