live-chat-commerce

ライブチャットコマース

概要

eコマースのライブチャットは、基本的なサポートにとどまりません。エージェントは顧客の商品探しやカートへの商品追加、割引コードの適用を支援でき、購入をためらう気持ちを直接軽減できます。Shopify Inbox（無料）、Tidio、Gorgias Chatは、カートの表示、商品カードの共有、注文状況へのボット応答といったコマースに特化した機能を標準で提供しています。カスタムカートの操作、独自のボットロジック、ホワイトラベルのエクスペリエンスなど、コマース固有の要件がこれらのツールの提供範囲を超える場合にのみ、カスタムチャットシステムを構築してください。

このスキルを使用する場面

• 購入前の質問を減らし、コンバージョンを高めるために、ストアフロントへライブチャットを追加するとき
• チャットセッション中に、エージェントが顧客の現在のカートの内容を確認する必要があるとき
• 注文状況への自動応答を実装し、エージェントが複雑な問題だけに対応できるようにするとき
• チャットからのコンバージョン率と、ライブチャットに起因する売上を測定するとき
• サードパーティ製チャットウィジェットで、標準対応していない、より高度なコマース操作が必要なとき

主な手順

ステップ 1：プラットフォームを特定し、適切なチャットツールを選ぶ

プラットフォーム	推奨ツール	理由
Shopify	Shopify Inbox（無料）	Shopify 標準のツールです。顧客のカート、最近の注文を表示でき、エージェントは価格付きの商品リンクを送信できます。
Shopify	Tidio	Inbox より高度な AI ボット、連携機能、分析機能を備え、商品カードの共有にも対応しています。
Shopify	Gorgias Chat	サポートチケット管理に Gorgias をすでに利用しているチームに最適です。受信トレイを一元化できます。
WooCommerce	Tidio または LiveChat	どちらも WooCommerce プラグインを備えており、エージェントに注文履歴とカートの内容を表示できます。
BigCommerce	Tidio または LiveChat	BigCommerce App Marketplace から利用できます。
カスタム／ヘッドレス	WebSocket サーバーを構築	上記のいずれも、十分なコマース API アクセスを提供しない場合に必要です。

---

ステップ 2：プラットフォーム別の設定

---

Shopify

オプション A：Shopify Inbox（無料、最初におすすめ）

1. Admin → Inbox → Turn on Shopify Inbox に移動します。
2. Shopify Inbox によって、ストアフロントにチャットウィジェットが自動的にインストールされます。
3. エージェントは inbox.shopify.com または Shopify モバイルアプリから会話にアクセスできます。

各会話でエージェントに表示される内容：

• ログインしている場合、顧客の名前とメールアドレス
• 商品画像と価格が表示された、現在のカートの内容
• 最近の注文履歴とフルフィルメント状況

コマース機能：

• エージェントはチャットインターフェースから商品を検索し、リンクを直接共有できます。
• 顧客には、画像、価格、「Add to Cart」ボタンが表示された商品カードが表示されます。
• エージェントは顧客のカートに割引コードを適用できます。

自動応答の設定：

1. Inbox → Manage → Instant answers に移動します。
2. 配送、返品、サイズなど、よくある質問への回答を追加します。
3. AI による要約と返信候補を有効にします（新しいバージョンの Inbox で利用できます）。

注文状況ボットの設定：

1. Inbox → Manage → Automated messages に移動します。
2. 「order status」、「where is my order」、「tracking」などのキーワードを含む会話に対する自動応答を作成します。
3. 登録済みの顧客には /account/orders へのリンクを含めます。

対応可能時間の設定：

1. Inbox → Manage → Away messages に移動します。
2. 営業時間を設定し、その時間外に表示する離席メッセージを設定します。

---

WooCommerce

WooCommerce 向け Tidio（推奨）：

1. WordPress のプラグインディレクトリから Tidio Live Chat をインストールします
2. 有効化した後、WooCommerce → Tidio で設定します
3. Tidio により、エージェントに次の情報が自動的に表示されます：
   • 現在のカートの内容
   • 注文履歴
   • 顧客生涯価値

Tidio のコマース機能：

• エージェントはチャットインターフェースから商品を表示して共有できます
• エージェントが送信する商品レコメンドカードには、画像、価格、カートに追加するためのリンクが含まれます
• 注文状況を確認する自動ボットフロー（Tidio は WooCommerce の注文と連携します）

注文状況ボットの設定：

1. Tidio で Automation → Create Automation に移動します
2. トリガー：訪問者が「order」または「tracking」を含むメッセージを送信
3. アクション：注文番号を尋ねるフォームを表示 → Tidio の WooCommerce 連携を通じて照会 → 状況を返信

WooCommerce 向け LiveChat：

1. WordPress.org から LiveChat をインストールします
2. LiveChat の WooCommerce 連携により、エージェントのダッシュボードの「Customer Details」に注文データが表示されます
3. エージェントはカート放棄をリアルタイムで確認し、先回りして顧客にアプローチできます

---

BigCommerce

App Marketplace から Tidio を利用：

1. Apps → Search "Tidio" に移動してインストールします
2. 設定方法は上記の WooCommerce の設定と同じです
3. Tidio は BigCommerce の注文に自動的に接続します

BigCommerce 向け LiveChat：

1. BigCommerce App Marketplace からインストールします
2. エージェントは会話ごとに注文履歴とカートの内容を確認できます

---

カスタム／ヘッドレス

コマースのチャットアクションをカスタマイズする必要があるヘッドレスストアフロントの場合：

// WebSocket server for real-time chat
import { WebSocketServer, WebSocket } from 'ws';

interface ChatClient {
  ws: WebSocket;
  type: 'customer' | 'agent';
  sessionId: string;
  customerId?: string;
  conversationId?: string;
}

const clients = new Map<string, ChatClient>();
const wss = new WebSocketServer({ noServer: true });

wss.on('connection', async (ws, req, context: { type: 'customer' | 'agent'; sessionId: string }) => {
  const socketId = crypto.randomUUID();
  clients.set(socketId, { ws, ...context });

  ws.on('message', data => handleMessage(socketId, JSON.parse(data.toString())));
  ws.on('close', () => clients.delete(socketId));

  // Send recent history on connect
  if (context.conversationId) {
    const history = await db.chatMessages.findMany({ where: { conversationId: context.conversationId }, take: 50, orderBy: { createdAt: 'asc' } });
    ws.send(JSON.stringify({ type: 'history', messages: history }));
  }
});

// Expose cart state to agents — fetch on each message to stay current
export async function getConversationContext(conversationId: string) {
  const conversation = await db.chatConversations.findUnique({ where: { id: conversationId }, include: { customer: true } });
  const [cart, recentOrders] = await Promise.all([
    db.carts.findFirst({ where: { customerId: conversation.customerId, status: 'active' }, include: { items: { include: { product: true } } } }),
    db.orders.findMany({ where: { customerId: conversation.customerId }, orderBy: { createdAt: 'desc' }, take: 3 }),
  ]);

  return {
    customer: { name: conversation.customer?.firstName, segment: conversation.customer?.segment, lifetimeValue: conversation.customer?.totalSpentCents / 100 },
    cart: { items: cart?.items ?? [], totalValue: cart?.items.reduce((sum, i) => sum + i.priceInCents * i.quantity, 0) / 100 ?? 0 },
    recentOrders,
  };
}

// Auto-respond to order status queries
async function handleOrderStatusQuery(conversationId: string, message: string, customerId?: string): Promise<boolean> {
  const orderNumberMatch = message.match(/#?(\d{5,})/);
  if (!orderNumberMatch && !/order|track/i.test(message)) return false;

  const order = orderNumberMatch
    ? await db.orders.findFirst({ where: { orderNumber: orderNumberMatch[1], customerId } })
    : customerId ? await db.orders.findFirst({ where: { customerId }, orderBy: { createdAt: 'desc' } }) : null;

  if (!order) return false;

  const statusMsg = `Your order #${order.orderNumber} is **${order.status}**.${order.shipments[0]?.trackingUrl ? ` [Track package](${order.shipments[0].trackingUrl})` : ''}`;
  await db.chatMessages.create({ data: { conversationId, senderType: 'bot', type: 'text', payload: { body: statusMsg } } });
  broadcastToConversation(conversationId, { type: 'bot_message', body: statusMsg });
  return true;
}

---

ステップ 3：積極的なチャットのトリガーを設定する

積極的なチャットのトリガーは、訪問者が離脱する前の重要なタイミングでアプローチし、購入意欲の高いページでのコンバージョンを高めます。

Shopify Inbox： Inbox → Manage → Proactive chat に移動し、ページ滞在時間やカート金額に基づいてトリガーを設定します。

Tidio： Automation → Triggers に移動し、次のようなルールを作成します：

• 「訪問者がチェックアウトページに 3 分間滞在している」→「注文の完了についてお困りですか？」を送信
• 「カート金額が $150 を超えている」→「送料無料の対象です。ご不明な点があればお知らせください」を送信
• 「離脱意図を検知」→訪問者が離れる前にチャットメッセージを送信

積極的なトリガーの目安：

• 購入意欲の高いページを対象にします：チェックアウト、高額商品を含む商品ページ
• すべてのページでトリガーしないでください。煩わしく感じられます
• ページを表示してすぐではなく、購入意欲があると判断できる 45 秒以上の滞在後にトリガーします

---

ステップ 4：チャットの効果を測定する

チャットの ROI を評価するため、毎月次の指標を追跡します：

指標	測定方法
チャット経由のコンバージョン率	過去 24 時間以内にチャットが行われた注文数 / 会話の総数
平均応答時間	Tidio、Gorgias、または Inbox のダッシュボードで確認
チャットに起因する売上	UTM パラメーターまたはプラットフォームの注文タグを使用し、source: live_chat タグを注文に付与
CSAT スコア	チャットツールの設定でチャット後の満足度アンケートを有効化

ベストプラクティス

• カスタム開発を始める前に Shopify Inbox または Tidio を導入します — これらのツールは、エンジニアリング作業なしでライブチャットのニーズの 95% に対応します
• 入力中インジケーターを表示します — ほとんどのプラットフォームでは自動的に表示され、待ち時間が長く感じられるのを大幅に軽減します
• エージェント 1 人あたりの同時進行できる会話数に上限を設定します — 質の高い応答を保つには、同時チャットは 3～4 件が上限です。Gorgias と Tidio ではこの上限を設定できます
• チャットの会話が記録されることを顧客に伝えます — EU の顧客については、同意を得たうえで、GDPR に従ってチャット記録をエクスポートまたは削除できるようにします
• すべてのメッセージをデータベースに永続化します — WebSocket が切断されても会話履歴が失われないようにし、再接続時に DB から状態を再構築します（カスタム構築の場合）

よくある問題

問題	解決策
ページ遷移時にチャットウィジェットが動作しなくなる	フローティング型で状態が維持されるウィジェットを使用します。シングルページアプリのルーティングではチャットを再初期化しないようにします。Tidio と Gorgias はこの処理に対応しています
エージェントに古いカートデータが表示される	会話開始時に一度だけではなく、顧客からメッセージが届くたびにカートのコンテキストを再取得します。会話中にカートの内容が変わるためです
すべてのページでプロアクティブチャットのトリガーが実行される	購買意欲の高いページを 2～3 ページに絞り、セッションごとの上限を設定します（1 セッションにつき最大 1 回）
機密性の高い注文データを含むチャットの文字起こしがメールで送信される	文字起こしメールに含まれる内容を確認します。メールの送信前に、支払い情報、カード番号の一部、社内メモを削除します

関連スキル

• @customer-support-integration
• @personalization-engine
• @customer-segmentation