【React Native】【Expo】ストアのレビュー誘導ダイアログを表示する

こんにちは、maricuruのワダ(@takahi5)です。

最近 結局、人生はアウトプットで決まる という本を読んだせいでアウトプット熱が高いです。
せめて1ヶ月くらいこの熱が保たれることを願います。

さて今回はストアのレビュー誘導ダイアログをExpoで実装してみた、というお話です。

レビュー誘導ダイアログとは？

「このアプリが気に入ったらレビューしてください！」

みたいなダイアログです。

昔はオレオレ実装でこのダイアログを出すことが出来たのですが、
iOS11からは、公式で用意されたSKStoreReviewControllerを使わないとリジェクト対象になります。

androidはオレオレ実装でも大丈夫です。

レビュー誘導をするきっかけ

ASOの向上を狙っています。

ストア検索の順位はレビュー数、レビュー★数に左右されるので、よいレビューがたくさん集まってるほど有利になります。

また、ユーザーがアプリを発見したあとも、よいレビューが多いほど安心してインストールできるので、結果インストール数も増えることでしょう。

まず仕様を考える

せっかくレビュー誘導のダイアログを出しても、悪評ばかりが蓄積しては意味がありません。

またダイアログが頻繁に表示されると、煩わしくてUXを低下させる恐れがあります。

そこで以下のような条件をもとに、ダイアログ表示のタイミングを判定するようにしました。

• ある程度アプリを使い込んでいる（良いレビューをくれそう）
• 前回のダイアログ表示から一定期間が空いた後 (頻繁に出るとウザい)
• 何らかのアクションが一段落した後 (操作の途中に出ると煩わしい)

具体的には

• 投稿を◯件以上しているユーザーで
• 前回ダイアログ表示から◯日経過していて
• 投稿が終わった後に表示

のような感じです。

レビュー誘導ダイアログの実装

ではExpoでレビュー誘導ダイアログを実装しましょう！

と言ってもExpoがStoreReviewというAPIを用意してくれているので、それを使えば楽ちんです。

まずapp.jsonにストアURLを入れておきましょう。
androidの方はストアに飛ばす仕様なのでURL必須です。

  # app.json
  "expo": {
    "ios": {
      "appStoreUrl": "https://itunes.apple.com/jp/app/id1320721074"
    },
    "android": {
      "playStoreUrl": "https://play.google.com/store/apps/details?id=com.maricuru"
    },
  }

レビュー誘導ダイアログを表示する

hasAction()でレビュー誘導ダイアログが表示できるかチェックして、
requestReview()でレビュー誘導ダイアログを表示します。

ちなみにレビュー誘導ダイアログの表示は、iOSの場合年間3回まで、ユーザーが設定でOFFに出来る、という制限があるため、それに引っかかった場合はrequestReview()を呼んでも表示されません。

  if (Expo.StoreReview.hasAction()) {
    Expo.StoreReview.requestReview();
  }

Expoクライアントで実行するとこんな感じで表示されました！

Androidの場合は？

Androidの場合は、requestReview()を実行したら速攻でPlay Storeが開かれちゃいます...！ (app.jsonで定義したplayStoreUrlが開かれます)

この唐突感はUX的にイマイチすぎます！

なのでAlertダイアログを挟むなどする方がよいと思います。

maricuruの場合はAlertダイアログで「レビューしてくれますか？」と尋ねた上でPlay Storeに飛ばすようにしました。

全体の流れ(maricuruの場合)

結果的にこのようなフローチャートになります。

サーバーにレビュー誘導を表示すべきか問い合わせる
↓
AndroidならAlertダイアログを挟む
iOSならふつうに表示
↓
サーバーにレビュー誘導を表示した日時を保存

といった感じです！

さてさて、効果が出るか楽しみです。
気長に待ちましょう🤗