Gatsbyサイトにフィードバックウィジェットを追加する

2021-01-02

Hotjar Feedback Widget in GatsbyJS

フィードバックウィジェットを追加しました

今回はコードを書いていません。ノーコードです。

Gatsbyの公式ページを見ていたらHotjarが紹介されていました。

Hotjarとは、サイト訪問者のページ内の動きを、動画やヒートマップで確認できるサイト分析ツールです。アクセス解析にはGoogle Analyticsを利用しているので興味はないですが、フィードバックウィジェットが面白そうだったので、導入することにしました。

最終的にはこんな感じになります。

5段階評価とメッセージ、該当箇所のスクリーンショットが受け取れるようになります。

フィードバックをもらうと設定したサンクスメッセージが表示されます。

Hotjarにサインアップする

Hotjarのアカウントを作ります。今回はグーグルアカウントで登録しました。

自分の情報を入力します。

入力が完了するとサイト埋め込み用のコードが表示されます。

必要なのは5行目のh._hjSettings={hjid:1234567,hjsv:6};のhjidとhjsvです。

まだVerify Installationは押さずに、いったんこの画面でストップします。

プラグインを設定する

プラグインgatsby-plugin-hotjarをインストールします。

yarn add gatsby-plugin-hotjar

gatsby-config.plugins.js

{
  resolve: `gatsby-plugin-hotjar`,
  options: {
    includeInDevelopment: true,
    id: 1234567,
    sv: 6,
  },
},

idには上で取得したhjidを、svはhjsvを設定します。

プラグインを設定したら通常通りビルドしてデプロイします。

この時点でWappalyzerを見るとHotjarが追加されてることが確認できます。

デプロイできたらHotjarのページに戻りVerify Installationをクリックします。

HotjarのVerifyが成功しました。有料のビジネスプランのフリートライアルでスタートします。

とりあえず無料で使いたいのでプランを変更します。Settings→Plans & Billingにすすみます。

Basicプランに変更してUpdate Plansをクリックします。

無事、無料プランに変更できました。

フィードバックウィジェットを設定する

ダッシュボードに戻ってCreate Feedback Widgetに進みます。

ウィジェットの言語と外観と表示位置を設定します。プレビューが表示されるので、確認しながら調整します。

続いてInvitation messageとEmotionとThank you messageでそれぞれのメッセージを設定します。デフォルトは英語になっているので日本語に書き換えます。フィードバックを送信したときのスクリーンショットも取得したいのでAutomatically include a screenshot with the user's feedback.はオンにします。