ノーコードでオンボーディングチュートリアルを設定できるUserGuidingをNuxtプロジェクトに導入してみた

複雑な家庭の事情でUserGuidingというオンボーディングチュートリアルツールを導入したのでメモ。

UserGuidingという素敵便利ツールの紹介記事です。
Qiita上でUserGuidingについて詳しく説明されてる記事がなかったので書いてみました。

## オンボーディングチュートリアルとは
自分がオンボーディングチュートリアルという呼んでるのは、WEBサービスへの登録時などに表示される↓こういうやつのことです。
![スクリーンショット 2021-05-08 0.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/5689cd4d-6dad-1025-fb0f-da24d5106ae9.png)
チュートリアルとか、ガイド表示とか、オンボーディングフローとかなんかいろんな呼ばれ方されてる気がします。誰か呼び方統一してほしい。


## 実装の選択肢
### パッケージをつかって自前で実装する
- おそらく一番有名なのがintro.js
    - https://introjs.com/
    - 商用利用は別途有償
- 古き良きBootstrap Tour
    - http://bootstraptour.com/
    - 商用利用もOK
- Vueで使えるVue Tour
    - https://pulsardev.github.io/vue-tour/
    - 商用利用もOK

### SaaSを利用する
- UserGuiding
    - https://userguiding.com/
    - 月166ドルからつかえる（年払い）
- Appcues
    - https://www.appcues.com/
    - 月249ドルくらいからつかえる（年払い）
- pendo
    - https://www.pendo.io/
    - 値段不明

実装の方法としては上記の選択肢がありますが、今回は海外で人気で値段もお安めなUserGuidingというSaaSを使用しました。

Appcuesも使ったことありますが、ActiveUserが2500を超えるといきなり月800ドルとかになっちゃってちょっと高すぎるので、UserGuidingを選んだ感じです。

クレカ登録なしで14日間無料でお試しできるので是非触ってみてほしいす。


## UserGuidingの導入方法（Nuxtプロジェクトの場合）

流れとしてはこんな感じ。
タイトルにノーコードって書きましたがスクリプトの埋め込みだけはもちろん必要です。

```
1. UserGuidingのアカウントを作成
2. ログインし、Guideを作成
3. Nuxtプロジェクトにスクリプトを埋め込む
4. UserGuidingのChromeエクステンションをインストール
5. Chromeエクステンションをつかって、任意のURLにガイドを設置
6. ガイドを公開
7. サイトにガイドが表示されるように！
```


### 1. UserGuidingのアカウントを作成

https://panel.userguiding.com/register
からどうぞ。


### 2. ログインし、Guideを作成
![スクリーンショット 2021-05-08 1.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/03f758b6-92d6-05c8-c640-64ef9afe0524.png)
UserGuidingにおけるプロジェクト的存在をGuideと呼ぶらしいです。
Guideをつくって、どのURLにGuideを設置したいかなどを入力します。


### 3. Nuxtプロジェクトにスクリプトを埋め込む

UserGuidingがGuideを表示しにこれるように、Nuxtプロジェクトにスクリプトをheadに埋め込みます。

```nuxt.config.js
  head: {
    script: [
      {
        hid: 'userGuiding',
        innerHTML: `(function(g,u,i,d,e,s){g[e]=g[e]||[];var f=u.getElementsByTagName(i)[0];var k=u.createElement(i);k.async=true;k.src='https://static.userguiding.com/media/user-guiding-'+s+'-embedded.js';f.parentNode.insertBefore(k,f);if(g[d])return;var ug=g[d]={q:[]};ug.c=function(n){return function(){ug.q.push([n,arguments])};};var m=['previewGuide','finishPreview','track','identify','triggerNps','hideChecklist','launchChecklist'];for(var j=0;j<m.length;j+=1){ug[m[j]]=ug.c(m[j]);}})(window,document,'script','userGuiding','userGuidingLayer','XXXXXXXXX');`,
      }
    ],
```

### 4. UserGuidingのChromeエクステンションをインストール

Guideを設置先のサイトにどう表示するかを設定するためには、chromeエクステンションが必要らしいので、こちらをインストールします。
![スクリーンショット 2021-05-08 1.32.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/42a7819a-bb26-8133-c1c4-6a66684900ec.png)

https://chrome.google.com/webstore/detail/userguiding-better-user-o/bejnkpeokbmilompefleppmlblpblbok



### 5. 任意のURLにガイドを設置
#### Cookieに関するお知らせを設定
![スクリーンショット 2021-05-08 1.41.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/62429dd8-5305-6a91-4df8-9041f51edc07.png)

#### モーダルを設定
![スクリーンショット 2021-05-08 1.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/63cfb93e-6a0b-8e7f-cfff-a1661c0348d2.png)

#### ツールチップを設定
![スクリーンショット 2021-05-08 1.37.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/8850239d-6707-fe65-1d20-14dfb64dd1dd.png)
WEB上で見たことがある形のものであれば、だいたい何でも実現できそうな雰囲気でした。




### 6. ガイドを公開
![screenshot-panel.userguiding.com-2021.05.08-01_41_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/943c0670-1b4d-76b3-8039-0a23c0f10b24.png)
変更内容をPUBLISHします。

### 7. サイトにガイドが表示される！
#### Cookieに関するお知らせ表示
![スクリーンショット 2021-05-08 1.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/094583d7-7872-72d6-a44b-733ba2320f36.png)

#### モーダル表示
![スクリーンショット 2021-05-08 1.39.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/1f87a1f2-7dac-7007-5f92-d0ed976a07db.png)

#### ツールチップ表示
![スクリーンショット 2021-05-08 1.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/8499fa51-0ead-628e-7b56-a64f40ca6070.png)

先程設定したガイドがそれぞれ表示されることが確認できました。

めでたしめでたし！

---

### おまけ

上で紹介したこと以上に色々できるので、おまけとして載せておきます。

#### おまけ①：ガイドなどを表示するユーザーをセグメントできる！
![スクリーンショット 2021-05-08 2.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/465b824c-26cf-4ae9-5c4a-ef1c08f27c5f.png)
リファラーURLがどこか。Cookieにこういう値があるかどうか。といった情報で表示対象をセグメントできます。


#### おまけ②：オンボーディングプロセスのステップ表示もできる！
![スクリーンショット 2021-05-08 1.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/728934f8-1a72-4dfa-a655-fb9956206e18.png)
管理画面のChecklists機能をつかうと、こんな風に「オンボーディングが何％まで完了してるよ！」というやつも表示可能でした。
まずガイドを作成して、ガイドをチェックリストの子要素として設定する感じですね。

#### おまけ③：おもむろにNPSもとれる！
![スクリーンショット 2021-05-08 1.58.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/7addb964-dcdc-0d68-7227-181d40d2d87c.png)
画面操作中に下からニュインとNPSアンケートを表示することも可能です。
メールとかでNPS調査をするとめちゃくちゃ無視されるので、こっちのが回答してもらえる率高そう。

#### おまけ④：説明用の小さいツールチップ表示も設定できる！
![スクリーンショット 2021-05-08 2.04.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253912/b94e6dd7-bfe6-2450-d8c6-b8ce88f48bfe.png)
↑のようなインフォメーションアイコンをクリック/ホバーした時に説明文が表示されるUIがあると思うんですが、あれも設定できます。
あれのことをUserGuiding上ではHotspotsというらしい。

---

以上です。

なんかUserGuidingの回し者みたいな記事になっちゃいましたね。

プロダクトへのユーザーのオンボーディングに課題を感じている方はぜひUserGuidingを試してみてください！

https://userguiding.com/