social-commerce

ソーシャルコマース

概要

ソーシャルコマースでは、商品カタログを Instagram、TikTok、Facebook と連携させることで、顧客は各プラットフォームを離れることなく商品を見つけて購入できます。Shopify、WooCommerce、BigCommerce にはいずれも、カタログを自動で同期する公式連携機能があり、カスタムコードは不要です。重要なのは、カタログを正しく設定し、投稿での商品タグ付けを有効にして、カタログの状態を監視することです。

このスキルを使う場面

• 既存ストアに Instagram Shopping または TikTok Shop を追加するとき
• 初めて商品カタログを Meta Commerce Manager に同期するとき
• Instagram の投稿で商品タグを付けると「product not found」エラーが表示されるとき
• ソーシャルメディアの商品リストに表示される価格や在庫状況が、ストアより遅れて更新されるとき
• プラットフォームの標準連携機能を使わずに、カスタムのヘッドレスストアフロントを構築するとき

基本的な手順

ステップ 1：ソーシャルコマースのチャネルを選ぶ

プラットフォーム	設定方法	アプリ内チェックアウト	最適な商品
Instagram Shopping	Meta Commerce Manager	はい（米国のみ）	ファッション、美容、ライフスタイル
Facebook Shop	Meta Commerce Manager	はい（米国のみ）	すべてのカテゴリー
TikTok Shop	TikTok Seller Center	はい	話題になりやすい商品、衝動買いされやすい商品
Pinterest Shopping	Pinterest Ads Manager	いいえ（ストアへのリンク）	ホーム、ファッション、食品

Shopify ユーザー： Facebook & Instagram チャネルの連携機能を 1 つ使うだけで、Instagram Shopping と Facebook Shopping の両方を同時に有効にできます。TikTok には別途連携が必要です。

ステップ 2：プラットフォームを Instagram と Facebook Shopping に接続する

---

Shopify

1. Shopify Admin → Sales Channels → + → Facebook & Instagram に移動します
2. チャネルをインストールし、Meta Business Manager アカウントに接続します
3. Commerce → Catalog で、Shopify が商品カタログを Meta Commerce Manager に自動で同期します。すべての商品、バリエーション、価格、在庫の更新が自動で同期されます
4. Meta Commerce Manager → Catalog → Items で、商品が表示され、承認されていることを確認します
5. Instagram → Settings → Business → Shopping で、Meta カタログを Instagram プロフィールに接続します。これにより投稿での商品タグ付けが有効になります
6. Instagram Shop の審査承認を待ちます（通常 1～5 営業日）
7. 承認されたら、Instagram → Create Post → Tag Products に移動し、写真やリールに商品タグを追加します

TikTok Shop の場合：

1. Shopify Admin → Sales Channels → + → TikTok に移動します
2. TikTok for Shopify チャネルをインストールします
3. TikTok Seller Central アカウントに接続します
4. Shopify が商品カタログを TikTok Shop に自動で同期します

---

WooCommerce

1. WordPress プラグインディレクトリから Facebook for WooCommerce（無料の Meta 公式プラグイン）をインストールします
2. WooCommerce → Facebook → Get Started に移動し、Meta Business Manager に接続します
3. プラグインが WooCommerce の商品カタログを Meta Commerce Manager に自動で同期します
4. Instagram の設定でショッピング機能を有効にし、プラグインが作成した Meta カタログをリンクします
5. TikTok の場合は、TikTok for WooCommerce プラグインをインストールし、TikTok Seller Central アカウントに接続します

---

BigCommerce

1. BigCommerce Admin → Channel Manager → Add a Channel に移動します
2. Facebook & Instagram を選択し、Meta Business Manager アカウントに接続します
3. BigCommerce が商品フィードを自動で作成し、Meta Commerce Manager に同期します
4. TikTok の場合は、Channel Manager → TikTok に移動し、TikTok Seller Central アカウントに接続します
5. Channel Manager → Facebook & Instagram → Products でカタログの同期状況を確認します

---

カスタム／ヘッドレス

Meta 互換の XML フィードを生成し、Meta Commerce Manager に登録します：

import { XMLBuilder } from 'fast-xml-parser';

export async function generateMetaCatalogFeed(req: Request, res: Response) {
  const products = await db.products.findAll({
    where: { status: 'active', availableForSale: true },
    include: ['variants', 'images'],
  });

  const items = products.flatMap((p) =>
    p.variants.map((v) => ({
      id: v.sku,                    // Use SKU as the catalog item ID — must be stable
      title: p.name,
      description: p.description.slice(0, 9999),
      availability: v.inventory > 0 ? 'in stock' : 'out of stock',
      condition: 'new',
      price: `${(v.priceInCents / 100).toFixed(2)} USD`,
      link: `${process.env.STORE_URL}/products/${p.slug}?variant=${v.id}`,
      image_link: p.images[0]?.url,
      brand: p.brand ?? process.env.STORE_NAME,
      google_product_category: p.googleProductCategory,
      item_group_id: p.id,          // Required: groups variants together in Meta
      color: v.color,
      size: v.size,
    }))
  );

  const builder = new XMLBuilder({ arrayNodeName: 'item', ignoreAttributes: false });
  const xml = builder.build({ rss: { channel: { item: items } } });

  res.setHeader('Content-Type', 'application/xml');
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.send(xml);
}

Meta Commerce Manager → Catalog → Data Sources → Add Data Feed でフィード URL を登録し、更新スケジュールを毎時に設定します。

毎時のクロールを待たずに価格と在庫をリアルタイムで更新するには、Meta の Catalog Batch API を使用します：

// Push individual product updates immediately when price or inventory changes
async function pushProductUpdateToMeta(variantSku: string, inventory: number, priceInCents: number) {
  await fetch(`https://graph.facebook.com/v18.0/${process.env.META_CATALOG_ID}/items_batch`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      access_token: process.env.META_ACCESS_TOKEN,
      item_type: 'PRODUCT_ITEM',
      requests: [{
        method: 'UPDATE',
        retailer_id: variantSku,
        data: {
          availability: inventory > 0 ? 'in stock' : 'out of stock',
          price: `${(priceInCents / 100).toFixed(2)} USD`,
        },
      }],
    }),
  });
}

ステップ 3：Instagram の投稿で商品タグ付けを有効にする

Instagram Shop でカタログが承認された後：

1. 通常どおり Instagram の投稿またはリールを作成します
2. シェア画面で 商品にタグ付け をタップします
3. 画像内に表示されている商品をタップします
4. 商品名を検索し、カタログから選択します
5. 画像投稿では最大 5 商品、動画では 1 商品にタグ付けできます

ストーリーズの場合： スタンプアイコンをタップ → 商品 → カタログを検索します

リールの場合： 動画投稿と同様に、商品リンクのスタンプを追加します

ステップ 4：TikTok Shop の商品タグ付けを設定する

TikTok Seller Central が承認され、カタログが同期された後：

1. TikTok アプリで動画を作成します
2. アップロード中に 商品 をタップ → 同期済みカタログから商品を選択します
3. TikTok が動画にショッピングバッグのアイコンを追加します。視聴者がこれをタップすると、商品を確認してアプリ内で購入できます
4. ライブショッピングの場合：TikTok Live に移動 → カートアイコンをタップ → ライブ配信に商品を追加します

ステップ 5：カタログの状態を監視する

カタログエラーがあると、商品にタグを付けたり、ショップに表示したりできません。毎週確認してください：

Meta Commerce Manager：

1. Commerce Manager → Catalog → Diagnostics に移動します
2. カテゴリ別にエラーを確認します：
   • 必須フィールドの欠落（通常はブランドまたは google_product_category）
   • ポリシー違反（画像にテキストが重ねて表示されている、商品が制限対象の表現を使用している）
   • 価格の不一致（フィードの価格とランディングページの価格が異なる）
3. Shopify／WooCommerce のネイティブ連携を使用している場合：プラットフォームの管理画面で商品データを修正します。変更は自動的に同期されます

TikTok Seller Center：

1. Products → All Products に移動し、「Under Review」または「Rejected」で絞り込みます
2. 指摘された問題を修正します（通常は画像の品質または禁止商品カテゴリです）

ステップ 6：ソーシャルコマースのパフォーマンスを測定する

指標	確認場所
Instagram Shopping からの売上	Meta Commerce Manager → Analytics → Sales
TikTok Shop からの売上	TikTok Seller Center → Analytics
商品タグのクリック率	Meta Business Suite → Content → Posts
カタログ商品の却下率	Commerce Manager → Catalog → Diagnostics

ベストプラクティス

• カタログ商品の ID には SKU を使用する — SKU はシステム間で安定しており、倉庫のデータとも一致します。データベース ID を使用すると、データ移行時に不一致が発生します
• バリエーション商品には必ず item_group_id を含める — Meta と TikTok はこれを使用して色やサイズの選択肢を 1 つの商品表示にまとめ、重複表示を防ぎます
• 商品画像にテキストを重ねて表示しない — Meta のカタログポリシーでは、宣伝文、透かし、コラージュを重ねた画像は却下されます
• 価格変更にはリアルタイムのバッチ更新を有効にする — 頻繁にプロモーションを実施する場合、1 時間ごとのフィードクロールでは価格の不一致が生じる時間帯が発生します。Batch API を使用して変更をすぐに反映してください
• ストアを連携する前に TikTok Seller Central の承認を完了する — TikTok では別途セラー審査が必要です。カタログを同期しただけでは TikTok Shop を利用できません

よくある問題

問題	解決策
Instagram Shop で商品が「審査中」のままになる	商品画像にテキストが重ねられておらず、商品がはっきりと写っていることを確認します。Meta の Commerce Policies で禁止カテゴリを確認します
Meta で価格の不一致エラーが発生する	フィード内の価格はランディングページの価格と完全に一致している必要があります。セールを実施する場合は、両方を同時に更新します
TikTok のカタログ商品が TikTok Shop に表示されない	TikTok では Seller Center アカウントの別途承認が必要です。カタログの同期だけでは不十分なため、別途 TikTok Shop を申請してください
Instagram の投稿に商品タグが表示されない	タグ付けを利用するには Instagram Shop の承認が必要です。Instagram → Settings → Business → Shopping でステータスを確認します
デプロイ後にフィード URL が 403 を返す	CDN の許可リストに Meta クローラーの IP 範囲を追加するか、フィード URL が認証なしで一般公開されていることを確認します

Related Skills

• @meta-ads-integration
• @google-shopping-feed
• @tiktok-ads-integration
• @influencer-tracking
• @ugc-campaign-management