ゲストユーザーの診断結果を引き継ぐ方法を✅

早く就職して暖房を買いたいこと23期室温10度で凍え死にそうです。

宣伝

ZEROKENをリリースいたしました!

サイトURL

https://www.zeroken.site/

Image from Gyazo

簡単にお酒の強さを測る事ができて、アルハラを予防する事ができるアプリになります!

自分に合ったお酒の飲み方の順番を見つけて自分のペースで飲み会を乗り切ってください!

 

さて、今回は、Zerokenを2回以上使ってもらう方法に関してを考えていきたいと思います。

ユーザーがいきなり会員登録してくれるわけない。その前提から話を進めていく。

ひさじゅさんくらい強強な方が「個人情報を簡単に取れると思うな」と言うのだからそうなんだろう。

であれば、一旦サービスを使っていただいてまた使いたいとユーザーに思ってもらうことが重要になる。

では、どんな時にまた使いたいと思うのか。

先日、ひさじゅさんのtimesでこんな相談をさせていただいた。

「ZEROKENはサーバーサイドエンジニアになる上で必要な技術スタックを備えているのか」

こんなざっくりな質問に対して、下記のような返答をいただいた。

「フロントのUIはいい感じだったが、テーブル数やモデル数が足りない気がする。サーバーサイドで働きたいのであればテーブル数を増やす、もしくは既存のDBを最大限活用する必要がある。」

「また、一回診断して終了になってしまっている。ユーザー機能を発展させてユーザー体験を引き伸ばすべき。」

この、「ユーザー離脱(リテンションというらしい。)」と「モデルを活用できていない」解決することが12/31までの課題。

方向性

  1. 診断結果表示画面でログインの案内。
  2. ゲストユーザーで作成した酒ケジュールをログイン後に引き継ぐ
  3. 実際に飲んだお酒を投稿できる機能追加
  4. マイ酒ケジュールはTwitterに投稿する事ができる。

1. 診断結果表示画面でログインの案内。

診断結果の酒ケジュールを保存できるようにする。

下記のようにボタンを設置し、データを保存するタイミングでログインモーダルが出るようにする

Image from Gyazo

2. ゲストユーザーで作成した酒ケジュールをログイン後に引き継ぐ

ゲストユーザーとして作成した酒ケジュールを、ログインをした後でも使えるようにする。

そのためには、下記のようにPromise構文を使って処理を進める。

registerFunction() {
      const allAnalyzes = this.analyzes
        const targetAnalyzes = allAnalyzes[allAnalyzes.length -1]
      this.registerUser(this.user).then((user) => {

      //  酒ケジュールデータのshucheduleとalcohol_strongnessだけ引き継ぎたい
     
        if (user) {
const userId = user.data.id
const targetShuchedule = targetAnalyzes.shuchedule
const targetAlcoholStrongness = targetAnalyzes.alcohol_strongness

const dataPassedDownToLoginUserFromGuest = {
 id: userId,
shuchedule: targetShuchedule,
alcohol_strongness: targetAlcoholStrongness,
}

this.createSucceedShuchedule(dataPassedDownToLoginUserFromGuest)
          this.$router.push({ name: 'UserProfile' });
        } else {
          this.fetchSnackbarData({
            msg: '新規登録に失敗しました',
            color: 'error',
            isShow: true,
          });
        }
      });},

下記記述で、引き継ぎ情報を新しく作成する事ができるはず。まだ試してはいない。

userIdとデータを紐づけることで、ゲストとして作ったデータを、あたかもログイン後のユーザーとして作ったデータかのようにすり替えている。

const userId = user.data.id
const targetShuchedule = targetAnalyzes.shuchedule
const targetAlcoholStrongness = targetAnalyzes.alcohol_strongness

const dataPassedDownToLoginUserFromGuest = {
 id: userId,
shuchedule: targetShuchedule,
alcohol_strongness: targetAlcoholStrongness,
}

this.createSucceedShuchedule(dataPassedDownToLoginUserFromGuest)
  1. 実際に飲んだお酒を投稿できる機能追加
  2. マイ酒ケジュールはTwitterに投稿する事ができる。

下記のように、飲んだお酒を保存するページを作りたい。accepts_nested_attributes_forを使ったら実装できるかもしれない。

Image from Gyazo

一言

リリースしたのはいいけど、追加機能が結構あって大変だ。