BrazeのNPSテンプレを使って計測してみる

Brazeブロガーの國崎です。
昨今ユーザー調査の一環でNPS調査を実施する企業様が多くいらっしゃいます。

NPSとは顧客ロイヤルティを計測するための指標で、企業やブランドへの愛着度などをスコア化するアンケート調査を指したりします。
今回Brazeから提供されているNPSテンプレートを実装してみたので、カスタマイズ変数や何が計測できるのかなどの部分を具体化してお伝えします。

BrazeのNPSテンプレート

BrazeのNPSテンプレートは以下githubで公開されています。
https://github.com/braze-inc/in-app-message-templates/tree/master/braze-templates/6-braze-nps

上で公開されているHTMLをまるっとアプリ内メッセージのカスタムコードに流し込めば、NPSとして使うことが可能になります。
筆者の環境ではまるっとコピーだと一部文字化けが発生してたので、

<meta charset="UTF-8">

の記述は追加しました。

アプリの場合は以下のようにviewportも追加すると表示崩れがなくなると思います。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

細かい部分を上げるとアイコンや色味など諸々の装飾品は調整が必要になります。
その他カスタマイズできる変数についての以下補足です。

実際に設定してみる

上記の各変数の部分を以下書き換えて設定してみました。

<script>
      var SURVEY_ID = 'survey_kunisaki';
      var QUANT_QUESTION = '本日購入した商品の満足度は？';
      var QUAL_QUESTION =
        '詳細な意見をお聞かせください';
      var AVATAR_IMAGE =
        'https://appboy-images.com/appboy/communication/assets/image_assets/images/5ecfe4358356682f445de9ee/original.png'; // optional
      var THANKYOU_TEXT = ''; // optional
      var SUBHEADER_TEXT = ''; // optional
      var CHOICES = CHOICES || [
        'とても悪い', // 1
        'やや悪い', // 2
        '普通', // 3
        'ややいい', // 4
        'とてもいい', // 5
      ]; // can remove or edit choice names
</script>

実際の画面では以下のように表示がされます。

選択肢の回答を選択後、フィードバックのコメントを入力します。

送信するとサンクスメッセージが表示されました。

NPS回答後の測定値を見てみる

NPSに回答するとカスタム属性には以下2つの項目が追加されていました。

survey_kunisakiの部分はSURVEY_IDで設定されたものが表示されます。 survey.survey_kunisaki.feedbackにはフィードバックのコメント、survey.survey_kunisaki.scoreには変数のCHOICESで設定していたスコアが記録されています。

カスタムイベントにはアンケート完了時の以下ログが記録されています。

ちなみに上記の計測されたカスタムイベントには以下プロパティが含まれるようになっています。

Currentsでの計測内容

CurrentsではButton_id=選択肢の回答、Campaign_id=キャンペーンAPI識別子は計測できますが、feedbackの回答までは確認できませんでした。

まとめ

以上BrazeのNPSテンプレートを使った実装の解説でした。
テンプレートを使えばカスタマイズ変数をいじるだけで、あっという間に自分用のNPSに早変わり。

NPSをBrazeで使いたいと言う方はぜひ今回紹介したテンプレートを使ってみることをお勧めします。
https://github.com/braze-inc/in-app-message-templates/tree/master/braze-templates/6-braze-nps