PrivateStaterフィードバック連携ガイド
訪問者からの意見を集めるフィードバックウィジェットの追加方法です。
動作の仕組み
PrivateStater のフィードバックウィジェットは次の機能を提供します:
- フローティングボタン - 画面下部にフィードバックボタンを表示
- 絵文字評価 - 4 段階の絵文字で満足度を素早く入力
- テキストフィードバック - 詳しい意見の記入 (任意)
- スクリーンショット - 現在画面のキャプチャを添付 (任意)
- メール収集 - 返信先メール (任意)
スクリプト設置
このドキュメント の方法で privatestater.js を設置します。
既に設置済みの場合はこのセクションを飛ばしてください。
ステップ 2: ダッシュボードでフィードバックを有効化
- ダッシュボード > ウェブサイト > フィードバック > 設定 に移動します
- フィードバックを有効化 をオンにします
- 必要なオプションを設定します
設定オプション
| 設定 | 説明 | 既定値 |
|---|---|---|
| 有効 | フィードバックウィジェットの利用 | 無効 |
| localhost を許可 | localhost でのテストを許可 | 無効 |
| テキスト入力 | テキストフィードバックの収集 | 有効 |
| 絵文字評価 | 絵文字評価の収集 | 有効 |
| スクリーンショット添付 | 訪問者によるスクリーンショット添付 | 有効 |
| メール収集 | メール欄の表示 | 無効 |
| デバイス情報 (アナリティクス) | フィードバックとアナリティクスセッションの紐付け | 有効 |
| コンソールエラー添付 | 捕捉したコンソールログの添付 | 有効 |
| メール日次ダイジェスト | 新規フィードバック時に 1 日最大 1 通のダイジェストメール | 有効 |
| ウィジェット位置 | フローティングボタンの位置 | 右下 |
ウィジェット位置
| 値 | 説明 |
|---|---|
bottom-right |
画面右下 (既定) |
bottom-left |
画面左下 |
ウィジェットの自動表示
フィードバックを有効にすると、ウェブサイトにフローティングボタンが自動表示されます。
追加の HTML は不要です。
流れ
- 訪問者がフローティングボタンをクリック
- フィードバックポップアップが開く
- 絵文字評価を選択 (設定時)
- テキストを入力 (設定時)
- スクリーンショットを添付 (設定時)
- 次へ をクリック (ステップ 2 がない場合は 送信)
- ステップ 2 でメール入力 (設定時) と技術情報の添付を選択
- 送信
プログラムから開く
独自のボタンや特定のイベントからウィジェットを開く場合:
window.PrivateStater.showFeedback();
使用例
<!-- Custom Feedback Button -->
<button onclick="window.PrivateStater.showFeedback()">
Leave Feedback
</button>
// Request feedback on specific condition
if (userCompletedPurchase) {
window.PrivateStater.showFeedback();
}
オプション
window.PrivateStater.showFeedback({
onClose: function() {
console.log('Feedback widget closed');
}
});
収集されるデータ
既定で収集されるデータ
| フィールド | 説明 | 条件 |
|---|---|---|
| 評価 (rating) | 絵文字評価 (1〜4) | 絵文字評価が有効なとき |
| テキスト (text) | フィードバック本文 (最大 2000 文字) | テキスト入力が有効なとき |
| メール (email) | 返信用メール | メール収集が有効なとき |
| スクリーンショット (screenshot) | 画面キャプチャ画像 | ユーザーが添付したとき |
絵文字評価
| 値 | 絵文字 | 日本語 | 英語 |
|---|---|---|---|
| 1 | 😠 | いまいち | Hate |
| 2 | 😕 | 物足りない | Dislike |
| 3 | 😊 | 良い | Like |
| 4 | 😍 | 最高 | Love |
任意の技術情報添付
訪問者がウィジェットで技術情報添付をオンにした場合、PrivateStater は次の追加情報を保存できます:
| フィールド | 説明 | 条件 |
|---|---|---|
| technicalAttachment | 技術情報添付の同意フラグ | 送信ペイロードに常に含まれる |
| pageUrl | フィードバック送信時の URL | 技術情報添付が有効なとき |
| language | ブラウザの言語 | 技術情報添付が有効なとき |
| consoleLogs | 捕捉したブラウザコンソールログ | 技術情報添付とコンソールログ設定が有効なとき |
| analyticsSessionConsent | アナリティクスセッションとの紐付け同意 | 技術情報添付とデバイス情報設定が有効なとき |
| visitorHash / sessionIndex / sessionStartedAt | アナリティクス v2 用のセッション紐付けフィールド | アナリティクスセッション紐付けが有効なとき |
レガシーのフィードバック記録には、ブラウザやデバイスフィールドが残っている場合があります。
ダッシュボードでのフィードバック管理
フィードバック一覧
ダッシュボードで収集したフィードバックを確認できます:
- フィルター: 期間とステータスで絞り込み
- 検索: フィードバック本文、メール、ページ URL のサーバー側検索
- 並び替え: 新しい順
- ページネーション: 一覧は 1 ページ 20 件
ステータス管理
| ステータス | 説明 |
|---|---|
| 未読 | 新規に届いたフィードバック |
| 対応中 | 確認または対応中 |
| 完了 | クローズまたは対応済み |
| ブロック | 自動ブロックされたフィードバック |
機能
- ステータス更新: 未読、対応中、完了、ブロックに変更
- 一括操作: ステータスの一括更新と一括削除
- スクリーンショット表示: 添付画像の閲覧
- セッション表示: 紐付けがある場合アナリティクス v2 セッションへ移動
- 削除: フィードバックの削除 (元に戻せません)
統計
| 統計 | 説明 |
|---|---|
| フィードバック総数 | 選択期間の合計件数 |
| 平均評価 | 絵文字評価の平均 (1〜4) |
| 未読 | 未読件数 |
スタイル
フィードバックウィジェットは Shadow DOM で隔離され、外部 CSS の影響を受けません。prefers-color-scheme を検出し、ダーク/ライトに自動対応します。
多言語対応
フィードバックウィジェットはブラウザの言語に応じて韓国語または英語で表示されます。
追加の言語が必要な場合は hello@privatestater.com までご連絡ください。対応を追加します。
フォームデータの一時保存
入力中にウィジェットを閉じても、内容は一時保存されます。再度開くと以前の入力が復元されます。
- 評価、テキスト、メール、技術情報添付の選択は保存されます
- 送信成功時のみ初期化されます
- ページを再読み込みすると初期化されます
プライバシー
- クッキー不使用: フィードバック収集にクッキーは使いません
- IP 非保存: IP アドレスは保存しません
- 任意の技術情報: ページ URL、言語、コンソールログは訪問者がオプトインした場合のみ収集します
- アナリティクスセッション紐付け: セッション紐付けには日次の訪問者ハッシュを使い、生の IP は使いません
トラブルシューティング
ウィジェットが表示されない
- ダッシュボードでフィードバックが 有効 か確認します
- スクリプトが正しく設置されているか確認します
- ブラウザのコンソールにエラーがないか確認します
localhost で動作しない
ダッシュボードで localhost を許可 を有効にしてください。
スクリーンショット添付に失敗する
- スクリーンショットは最大 1MB まで
- html2canvas ライブラリの互換性により、一部ブラウザでは問題が出ることがあります