導入

そこで、私は CodeStash に取り組んできました。これは、コード スニペットを共有して議論するためのプラットフォームで、Reddit と Stack Overflow を組み合わせたようなものです。クールな部分は？ Google Gemini を利用して、コード スニペットを説明する AI が組み込まれています。それが厄介な JavaScript であろうと Python コードであろうと、CodeStash を使用すると、ユーザーはオンデマンドで AI の説明をリクエストできます。しかし… AI の説明には多少の当たり外れがあるかもしれません。この回答が非常に役立つと感じるユーザーもいるでしょうが、他のユーザーもいるでしょうか?それほど多くはありません。そこで Formbricks の出番です。

この投稿では、AI の回答を受け取った後にユーザーにアンケートを実施し、それが有益であるかどうかを確認するために Formbricks を追加した方法を説明します。アプリ内のフィードバックに興味がある場合、または Formbricks がプロジェクトにどのように適合するかを知りたい場合は、しばらくお待ちください!

なぜわざわざアンケートを行う必要があるのでしょうか?

AI は優れていますが、正直に言って、的を外していることもあります。ユーザーに説明が役に立ったかどうかを直接尋ねることで、CodeStash を微調整するために使用できる正直なその場でのフィードバックを得ることができます。また、Formbricks を使用すると、これらの迅速で手間のかからないアンケートをアプリに直接追加することが非常に簡単になります。双方にとって有利です。

Formbricks を CodeStash に追加する (Next.js を使用)

Formbricks の追加は簡単で、セットアップには 10 分もかかりませんでした。したがって、「このアンケート内容をすべて追加する時間がない」と考えている場合は、信じてください。思っているよりも早く完了します。内訳は次のとおりです:

ステップ 1: Formbricks アカウントを作成する

このクイックスタート ガイドの手順に従って、Formbricks の使用を開始してください。

ステップ 2: Formbricks をインストールする

まず Formbricks パッケージが必要になります。このコマンドを実行してインストールし、次の手順に従います:

npm install @formbricks/js zod

次に、app/formbricks.tsx ファイルを作成します

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    formbricks.init({
      environmentId: "",
      apiHost: "",
      userId: "", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}

次に、app/layout.tsx ファイルを更新します。

// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
      {children}
    
  );
}

ステップ 3: アンケートを埋め込む

AI の説明が提供された後、ユーザーにその説明が気に入ったかどうかを尋ねるアンケートがポップアップ表示されます。アンケート コンポーネントを回答に直接埋め込む方法は次のとおりです。

Formbricks アカウントで新しいアンケートを作成し、設定の下のアンケート トリガーにキー「ai_answer」を持つコード トリガーを追加します。

これで、コード内の任意の場所で formbricks.track("ai_answer") メソッドを使用して、プログラムによってアンケートをトリガーできるようになりました。

例えば...

import formbricks from "@formbricks/js";
import axios from "axios";

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});

ステップ 4: アンケートの質問をカスタマイズする

Formbricks ダッシュボードで、探している内容に合わせてアンケートを調整します。私は次のような質問をしました:

「この説明は役に立ちましたか?」 (はい、いいえ)
「AI の説明を改善するにはどうすればよいでしょうか?」 (オプション)

ユーザーがアンケートに集中しすぎないよう、アンケートは短くシンプルにしました。

一番いいところは？アンケートが頻繁に表示されるように設定できるため、ユーザーが説明を求めるたびにスパムを送信する必要がなくなります。

スクリーンショット

フィードバックの実際の動作を確認する

応答が受信され始めると、Formbricks はすべて適切で整ったデータを提供します。これで、何が機能しているのか、何が混乱しているのか、そして 1 ～ 2 つの調整が必要なものがわかるようになりました。

まとめ

Formbricks を CodeStash に追加すると、ユーザー エクスペリエンスを中断することなく、正直なフィードバックを簡単に取得できるようになりました。ユーザーのフィードバックを念頭に置いて構築している場合は、Formbricks を試してみてください!

読んでいただきありがとうございます。私と同じようにこれらのツールに興味がある方は、Formbricks の GitHub リポジトリにスターを付けることを忘れないでください ⭐—CodeStash が気に入ったら、それにもスターを付けてください!

参考文献

1. フォームブリックのドキュメント
2. Next.js ドキュメント