content-commerce

コンテンツコマース

概要

コンテンツコマースは、ブログ記事、購入ガイド、ルックブックなどの編集コンテンツと、商品の直接購入を結び付けます。購入意欲の高い自然検索トラフィックを獲得し、商品発見から購入までの道のりを短縮します。Shopify と WooCommerce には、商品へ直接リンクできるブログ機能が組み込まれています。ヘッドレス構成では、CMS との連携が必要です。重要なのは、編集チームがエンジニアの助けを借りずに簡単に商品を埋め込めるようにすることと、どのコンテンツが実際に売上につながっているかを追跡することです。

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

• ブログが大きな自然検索トラフィックを生み出している一方で、売上への貢献が少ない場合
• 編集チームが、記事内に商品を埋め込むノーコードの方法を必要としている場合
• 「おすすめの［商品カテゴリ］」の検索クエリで上位表示される、SEO に最適化した購入ガイドを作成する場合
• 編集テキストと購入可能な商品グリッドを組み合わせたルックブックやコレクションページを作成する場合
• どのコンテンツが最も売上につながっているかを追跡する必要がある場合

基本手順

ステップ 1：マーチャントのプラットフォームとコンテンツ構成を確認する

プラットフォーム	コンテンツツール	商品を購入可能な状態で埋め込む方法
Shopify	Shopify ブログ（組み込み）	Shogun または PageFly のページビルダーを使って商品カードを埋め込みます。または Shopify 標準のブログで商品リンクを手動で設定します
WooCommerce	WordPress 標準のブログ	WooCommerce の商品ブロック（Gutenberg）または WooCommerce Shortcodes を使って、記事内に商品を埋め込みます
BigCommerce	BigCommerce ブログまたは WordPress	WordPress：WooCommerce Shortcodes または商品ブロックプラグインを使用します。BigCommerce ブログ：手動での商品リンクのみ
ヘッドレス／カスタム CMS	Contentful、Sanity、Prismic	CMS のカスタムコンテンツタイプシステムと Storefront API を使って商品埋め込みコンポーネントを構築します

ステップ 2：購入可能なコンテンツを設定する

---

Shopify

オプション A：Shopify ブログで標準の商品リンクを使用（無料、シンプル）

1. Shopify Admin → Online Store → Blog Posts に移動します
2. 任意のブログ記事でテキストを選択し、リンクアイコンをクリックして商品ページにリンクします（例：/products/product-handle）
3. 購入ボタン付きの商品画像を埋め込むには、テーマのセクションまたはブロックを使用します：
   • Online Store → Themes → Customize に移動します
   • ブログ記事テンプレートで「Product」または「Featured Product」セクションを追加し、記事ごとに設定します
4. 制限事項：記事内に商品カードを埋め込むことはできません。商品は記事本文の上または下に、独立したセクションとして表示されます

オプション B：Shogun または PageFly（購入ガイドにおすすめ）

1. Shopify App Store から Shogun または PageFly をインストールします
2. 購入ガイドまたはルックブック用の新しいランディングページを作成します
3. Product Card 要素をドラッグ＆ドロップして、編集コンテンツに直接配置します
4. 各商品カードには、Shopify の在庫情報をリアルタイムで反映した画像、価格、「Add to Cart」ボタンが表示されます
5. ページを公開し、ブログまたはナビゲーションからリンクします

オプション C：Instant（以前の名称は EcomSend）—ブログ記事内への商品埋め込み用

1. Instant ページビルダーアプリをインストールします
2. ブログ記事エディターを使って、記事内に商品カードを埋め込みます

---

WooCommerce

Gutenberg の商品ブロックを使用する（WooCommerce に標準搭載）：

1. Gutenberg エディターで任意の WordPress 投稿を開きます
2. • ブロックボタンをクリックし、「Products」を検索します
3. Products (Beta) ブロックまたは Hand-picked Products ブロックを挿入します
4. 商品名で検索して選択します。価格と「Add to Cart」が表示された商品グリッドが、記事内に表示されます
5. 記事内に単一の商品カードを配置するには、Single Product ブロックを使用します

WooCommerce Shortcodes を使用する（クラシックエディター）：

記事本文の任意の場所に商品を挿入します：

[product id="123"]
[products ids="123,456,789" columns="3"]
[product_page id="123"]

---

BigCommerce

1. BigCommerce 標準のブログでは、商品リンクを手動で追加する方法に限られており、ネイティブの商品埋め込みブロックはありません
2. おすすめ：WordPress をサブドメイン（blog.yourstore.com）で運用し、BigCommerce for WordPress プラグインを使用します
3. これにより、メインストアを BigCommerce で運営しながら、Gutenberg の商品ブロック（上記の WooCommerce の設定と同じ）を利用できます

---

カスタム／ヘッドレス

Contentful、Sanity、Prismic を使ったヘッドレス構成では、商品埋め込み用のコンテンツタイプを作成します。

商品埋め込み用の Sanity スキーマ：

// schemas/productEmbed.ts
export const productEmbedType = {
  name: 'productEmbed',
  title: 'Product Embed',
  type: 'object',
  fields: [
    {
      name: 'productId',
      title: 'Product ID',
      type: 'string',
      description: 'Shopify/BigCommerce product ID or handle',
    },
    {
      name: 'displayStyle',
      title: 'Display Style',
      type: 'string',
      options: { list: ['card', 'inline', 'full'] },
      initialValue: 'card',
    },
    {
      name: 'ctaText',
      title: 'CTA Text',
      type: 'string',
      initialValue: 'Shop Now',
    },
  ],
};

Storefront API から最新の価格と在庫数を取得する React コンポーネント：

export function ProductEmbed({ productId, displayStyle, ctaText, articleSlug }: ProductEmbedProps) {
  const [product, setProduct] = useState<Product | null>(null);

  useEffect(() => {
    fetch(`/api/products/${productId}?fields=name,price,images,slug,inStock`)
      .then(r => r.json())
      .then(setProduct);
  }, [productId]);

  if (!product) return <div className="product-embed-skeleton" />;

  return (
    <div className={`product-embed product-embed--${displayStyle}`}>
      <img src={product.images[0]?.url} alt={product.name} />
      <div className="product-embed__info">
        <h3>{product.name}</h3>
        <p>${(product.priceInCents / 100).toFixed(2)}</p>
        {!product.inStock && <span>Out of stock</span>}
      </div>
      <a href={`/products/${product.slug}?utm_source=content&utm_campaign=${articleSlug}`}>
        {ctaText}
      </a>
    </div>
  );
}

ステップ 3：すべてのコンテンツリンクに UTM パラメーターを追加する

Google Analytics で売上につながった記事を追跡できるよう、コンテンツ内のすべての商品リンクに UTM パラメーターを追加します。

• Shopify／WooCommerce のネイティブ埋め込みの場合：商品 URL に ?utm_source=content&utm_medium=blog&utm_campaign=ARTICLE-SLUG を手動で追加するか、テーマ設定で追加します
• Shogun／PageFly の場合：各ボタンには URL フィールドがあるので、そこに UTM パラメーターを含めます
• ヘッドレスの場合：記事のスラッグを使用して、商品埋め込みコンポーネントに UTM パラメーターを自動で組み込みます

ステップ 4：コンテンツ経由の売上を追跡する

Google Analytics 4 では：

1. レポート → 集客 → トラフィック獲得 に移動します
2. Session source = content でフィルタリングすると、ブログコンテンツに紐づくすべての注文を確認できます
3. さらに詳しく確認するには、探索 → ファネルデータ探索 に移動し、utm_medium = blog でフィルタリングします

Shopify Analytics では：

1. 分析 → レポート → トラフィックソース別の売上 に移動します
2. ソースでフィルタリングすると、UTM タグ付きのコンテンツ経由のトラフィックを確認できます

ベストプラクティス

• 商品価格は最新の情報を取得します — CMS コンテンツに価格をハードコードしないでください。価格は変わるため、古い価格は信頼を損ないます
• 商品埋め込みには 「在庫切れ」の状態を表示します — カードの表示が崩れると、カードがない場合よりもコンバージョンに悪影響があります
• 記事の上部に商品を埋め込みます — データによると、読者の大半は記事の 60% を超えてスクロールしません。最初の商品おすすめは、記事の最初の 400 語以内に埋め込みます
• UTM の utm_content に商品スラッグを設定します — これにより、どの記事かだけでなく、記事内のどの商品がコンバージョンにつながったかを確認できます
• 編集チームに商品検索ツールを提供します — Shopify では、編集者が Shogun／PageFly でページを作成する際に商品名で検索できます。商品 ID を把握するよう求めないでください

よくある問題

問題	解決策
記事内の商品価格が古くなっている	描画時に必ずストアフロント API から価格を取得します。価格を静的な CMS コンテンツとして埋め込まないでください
在庫切れの商品が公開中の記事に埋め込まれたままになっている	商品埋め込みコンポーネントに在庫確認を追加し、「入荷通知を受け取る」か関連商品を表示します
CMS の編集者が埋め込む商品を見つけられない	Shogun／PageFly の商品検索ウィジェットを使用します。ヘッドレスの場合は、Storefront API に問い合わせる商品ピッカーを作成します
コンテンツのアトリビューションが二重計上される — 同じ注文がコンテンツとメールの両方に紐づく	GA4 でラスト非ダイレクトクリックをアトリビューションモデルとして使用するか、経路データ探索レポートでマルチタッチ経路を手動で確認します
購入ガイドの SEO タイトルが上位表示されない	記事タイトルが検索クエリの正確な形式（「[Product Type] を [Use Case] で使うためのおすすめ [Year]」）に一致し、product schema.org マークアップを含んでいることを確認します

関連スキル

• @social-commerce
• @influencer-tracking
• @ecommerce-seo
• @email-marketing-automation
• @marketing-attribution-dashboard