meta-ads-integration

Meta Ads Integration

概要

Meta（Facebook／Instagram）は、EC における有料ソーシャルチャネルの中で圧倒的な存在ですが、信頼性の高いアトリビューションには、ブラウザー上で動作する Meta Pixel とサーバーサイドの Conversions API（CAPI）を組み合わせる必要があります。iOS 14 以降、ブラウザーのシグナルだけではコンバージョンが 30～60％過少に計上されます。CAPI は購入イベントをサーバーから直接送信し、シグナルの精度を回復します。Shopify、WooCommerce、BigCommerce では、公式インテグレーションが Pixel と CAPI の両方を自動的に処理するため、カスタムコードは不要です。カスタムコードが必要なのは、Custom／Headless セクションのみです。

このスキルを使用するタイミング

• 新しい EC ストアで Meta 広告を設定するとき
• iOS 14 のリリース後、Ads Manager のコンバージョンデータが過少に計上されているように見えるとき
• Dynamic Product Ads（DPA）を開始し、カタログフィードの同期が必要なとき
• ROAS が低下し、Meta のアルゴリズムが依存するシグナルの品質を回復する必要があるとき
• 商品の閲覧やカートへの追加イベントに基づくリターゲティングオーディエンスを追加するとき

基本手順

Step 1: インテグレーション方法を選択する

プラットフォーム	推奨方法	CAPI のサポート	カタログ同期
Shopify	ネイティブの Meta Sales Channel	はい（組み込み）	はい（自動）
WooCommerce	Facebook for WooCommerce プラグイン	はい（組み込み）	はい（自動）
BigCommerce	Channel Manager の Meta チャネル	はい（組み込み）	はい（自動）
Custom / Headless	Meta Pixel + facebook-nodejs-business-sdk	CAPI を手動で実装	フィードを手動で生成

主要な 3 つのプラットフォームには、Pixel と CAPI の両方を一度の設定で導入できる公式の Meta インテグレーションがあります。Pixel コードを手動で貼り付けるのではなく、これらを使用してください。

Step 2: プラットフォームを Meta に接続する

---

Shopify

1. Shopify Admin → Sales Channels → + → Facebook & Instagram に移動します
2. Facebook & Instagram のセールスチャネルをインストールします
3. Meta Business Manager アカウントを接続し、Facebook ページと Ad Account を選択します
4. Data Sharing で Maximum を選択します。これにより、ブラウザーの Pixel に加えてサーバーサイドの CAPI が有効になります
5. Shopify によって以下が自動的に行われます：
   • すべてのページに Meta Pixel をインストールします
   • ViewContent、AddToCart、InitiateCheckout、Purchase イベントを送信します
   • 同じイベントを Shopify のサーバーから CAPI 経由でも送信します（重複排除は自動で処理されます）
   • Dynamic Product Ads 用に商品カタログを Meta Commerce Manager に同期します
6. Facebook & Instagram → Overview に移動し、ピクセルの接続状況を確認します
7. Meta Events Manager → Data Sources → [Your Pixel] で、Event Match Quality（EMQ）スコアを確認します。7+/10 を目指してください

---

WooCommerce

1. WordPress のプラグインディレクトリから Facebook for WooCommerce（無料の公式 Meta プラグイン）をインストールします
2. WooCommerce → Facebook → Get Started に移動し、Meta Business Manager アカウントを接続します
3. Facebook Connection → Data Sharing Level で Maximum を選択します
4. プラグインによってすべてのページに Meta Pixel がインストールされ、標準イベントが自動的に送信されます
5. Maximum データ共有の設定で CAPI が自動的に有効になります
6. WooCommerce → Facebook → Product Sync に移動し、Meta Commerce Manager への商品カタログの初回同期を開始します
7. Meta Commerce Manager → Catalog → Data Sources でカタログの同期状況を確認します

---

BigCommerce

1. BigCommerce Admin → Channel Manager → Add a Channel に移動します
2. Facebook & Instagram を選択します
3. Meta Business Manager アカウントを接続します
4. 設定中に Enhanced Conversions（CAPI）を有効にします
5. BigCommerce によって商品カタログが自動的に同期され、Dynamic Product Ads 用に Meta Commerce Manager に登録されます
6. Channel Manager → Facebook & Instagram → Products で商品同期の状況を確認します

---

カスタム／ヘッドレス

ヘッドレスストアでは、ブラウザ用ピクセルとサーバー側のCAPIを両方手動でインストールする必要があります。

ブラウザ側のピクセル（すべてのページの<head>に追加します）：

// Replace YOUR_PIXEL_ID with your Pixel ID from Meta Events Manager
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');

// Product page
fbq('track', 'ViewContent', {
  content_ids: [product.sku],
  content_type: 'product',
  value: product.price,
  currency: 'USD',
});

// Purchase — pass eventID for deduplication with CAPI
const purchaseEventId = `purchase-${orderId}`;
fbq('track', 'Purchase', {
  content_ids: order.lineItems.map(i => i.sku),
  value: order.subtotal,
  currency: order.currencyCode,
  order_id: order.id,
}, { eventID: purchaseEventId });

サーバー側のCAPI（注文のWebhookから送信します）：

import { FacebookAdsApi, ServerEvent, UserData, CustomData, EventRequest } from 'facebook-nodejs-business-sdk';

FacebookAdsApi.init(process.env.META_CAPI_ACCESS_TOKEN!);

async function trackPurchaseCapi(order: Order, req: Request) {
  const eventId = `purchase-${order.id}`; // MUST match the eventID passed to fbq()

  const userData = new UserData()
    .setEmail(order.customerEmail)    // SDK hashes PII automatically (SHA-256)
    .setPhone(order.customerPhone)
    .setFirstName(order.customerFirstName)
    .setLastName(order.customerLastName)
    .setZip(order.shippingAddress?.zip)
    .setCountry(order.shippingAddress?.countryCode)
    .setClientIpAddress(req.ip)
    .setClientUserAgent(req.headers['user-agent'] as string)
    .setFbp(req.cookies['_fbp'])   // _fbp cookie = browser identity signal
    .setFbc(req.cookies['_fbc']);  // _fbc cookie = click identity signal

  const customData = new CustomData()
    .setValue(order.subtotal)
    .setCurrency(order.currencyCode)
    .setContentIds(order.lineItems.map(i => i.sku))
    .setContentType('product')
    .setNumItems(order.lineItems.length)
    .setOrderId(order.id);

  const event = new ServerEvent()
    .setEventName('Purchase')
    .setEventId(eventId)
    .setEventTime(Math.floor(Date.now() / 1000))
    .setUserData(userData)
    .setCustomData(customData)
    .setActionSource('website');

  await new EventRequest(process.env.META_CAPI_ACCESS_TOKEN!, process.env.META_PIXEL_ID!)
    .setEvents([event])
    .execute();
}

ダイナミック商品広告用の商品カタログフィード： CSVフィードを生成し、固定URLで配信します。Meta Commerce Manager → Catalog → Data Sources → Add Data Feedで登録します。

// Generate CSV with required columns: id, title, description, availability, condition, price, link, image_link, brand
// Schedule regeneration every 4 hours — serve at a stable /feeds/meta-catalog.csv endpoint

ステップ3：Eコマース向けキャンペーン構成

Meta Ads Managerで3階層のキャンペーン構成を作成します。

キャンペーン1：新規顧客開拓

• 目的：売上 → 購入
• 予算：Metaの総予算の60％
• オーディエンス：ブロード（米国、18～65歳、興味・関心ターゲティングなし）— Advantage+ターゲティングを使用
• 広告：クリエイティブ3～5種類（静止画像、動画、カルーセル、UGC）
• **Advantage+ Shopping Campaigns（ASC）**を使用します。Metaの自動化フォーマットは、Eコマースでは手動のキャンペーン構成を一貫して上回ります。

キャンペーン2：リターゲティング

• 予算：Metaの総予算の30％
• 広告セット1：商品を閲覧したが、カートに追加しなかったユーザー（過去7日間）
  • オーディエンス：ウェブサイトのカスタムオーディエンス → ViewContentイベント、過去7日間
  • 広告：閲覧した商品を表示するダイナミック商品広告（DPA）のカルーセル
• 広告セット2：カートに追加したが、購入しなかったユーザー（過去3日間）
  • オーディエンス：ウェブサイトのカスタムオーディエンス → AddToCart、過去3日間。過去3日間のPurchasesを除外
  • 広告：DPA＋緊急性を促すメッセージ

キャンペーン3：顧客維持／LTV

• 予算：Metaの総予算の10％
• 広告セット：顧客リストのオーディエンス（Shopifyから顧客データをエクスポートしてアップロード）
  • 過去30日間に購入した顧客を除外
  • 広告：新着商品、クロスセル商品
• 広告セット：上位購入者の1％類似オーディエンス（新規顧客開拓に効果的）

ステップ4：ダイナミック商品広告を設定する

ShopifyとWooCommerceでは、公式連携機能によって商品カタログが自動同期されます。設定を確認します。

1. **Meta Commerce Manager → Catalogs → [Your Catalog]**に移動します
2. Data Sourcesを確認し、プラットフォームのフィードが同期され、24時間以内に更新されていることを確認します
3. Itemsを確認し、商品の価格、在庫状況、画像が正しく表示されていることを確認します
4. Ads Manager → Create Ad Setで、キャンペーンの目的としてCatalog Salesを選択し、カタログを指定します
5. Dynamic formats and creativesを選択します。Metaがユーザーごとに最適な広告フォーマットを自動で選択します

ステップ5：イベントのマッチクオリティを確認する

Meta Events Manager → Data Sources → [Your Pixel] → Overviewで確認します。

シグナル	改善方法
EMQが6未満	より多くのユーザーデータ（メールアドレス、電話番号、fbp/fbc Cookie）を送信します
CAPIが発火しない	プラットフォーム連携でデータ共有がMaximumに設定されていることを確認します
コンバージョンが重複する	重複排除を確認します。PixelとCAPIの間でeventIDが一致している必要があります
ViewContentが発火しない	プラットフォーム連携が有効で、商品ページにピクセルが設置されていることを確認します

ベストプラクティス

• 新規顧客開拓にはAdvantage+ Shopping Campaigns（ASC）を使用します — Metaの自動化キャンペーンタイプは、Eコマースでは手動の構成を一貫して上回ります。手動キャンペーンではなく、まずはこちらから始めましょう
• Shopify／WooCommerceではデータ共有をMaximumに設定します — この設定だけでCAPIが有効になり、デフォルト設定よりもアトリビューションの精度が大幅に向上します
• CAPIで_fbpと_fbcのCookieを渡します — これらはiOS 14以降のアトリビューションで最も強力な識別シグナルです。すべてのCAPIイベントに含めます
• 重複排除キーとしてorder_idを使用します — 同じ購入に対してPixelとCAPIの両方が発火したとき、コンバージョンが重複してカウントされるのを防ぎます
• 新規顧客開拓キャンペーンでは最近の購入者を除外します — 低温度層向けキャンペーンに過去30日間の購入者除外を追加し、予算を守ります
• 4～6週間ごとにクリエイティブを更新します — Metaキャンペーンではクリエイティブ疲れがすぐに発生するため、広告セットごとに3～5種類のバリエーションを入れ替えます

よくある問題

問題	解決策
Ads Manager で購入コンバージョンが重複する	同じイベントに対する Pixel と CAPI の呼び出しで、eventID が同一であることを確認してください。Shopify のネイティブ連携では、これが自動的に処理されます
iOS 14 以降、コンバージョンが過少に報告される	Shopify の Facebook チャネル設定でデータ共有を「最大」に設定するか、WooCommerce の Facebook プラグインで CAPI を有効にしてください
ダイナミック商品広告に誤った価格が表示される	Shopify／WooCommerce のカタログ同期は最大 24 時間ごとに行われます。価格変更を迅速に反映する必要がある場合は、手動で同期を実行してください
ネイティブ連携を使用しているのに EMQ スコアが低い	Meta Events Manager に移動し、ブラウザーイベントとサーバーイベントの両方が表示されていることを確認してください。また、連携が完全に承認されていることを確認してください
iOS 14 以降のキャンペーンリーチが低い	Meta Business Manager → Brand Safety → Domains に移動して、ドメインを認証してください。Aggregated Event Measurement を有効にしてください
広告アカウントが無効になる	API 経由で未加工（ハッシュ化されていない）の PII を送信しないでください。すべてのデータを自動的にハッシュ化する公式 SDK を使用してください

関連スキル

• @google-ads-ecommerce
• @tiktok-ads-integration
• @google-shopping-feed
• @email-marketing-automation
• @marketing-attribution-dashboard