content-commerce

内容电商

概述

内容电商将编辑内容——博客文章、选购指南、造型画册——与直接购买产品联系起来，从而捕获购买意向强的自然流量，并缩短从发现到购买的路径。Shopify 和 WooCommerce 都内置了博客功能，可直接链接到产品；无头架构则需要集成 CMS。关键目标是让编辑团队无需工程支持，就能轻松在内容中嵌入产品，并跟踪哪些内容真正带来了收入。

何时使用此技能

• 博客带来了大量自然流量，却几乎没有贡献收入
• 编辑团队需要一种无需代码即可在文章中嵌入产品的方式
• 实施经过 SEO 优化的选购指南，使其在“最佳 [产品类别]”查询中获得排名
• 构建带有编辑文本和可购物产品网格的造型画册或系列页面
• 需要跟踪哪些内容带来的收入最多

核心说明

步骤 1：确定商家的平台和内容设置

平台	内容工具	可购物内容嵌入方式
Shopify	Shopify 博客（内置）	使用 Shogun 或 PageFly 页面构建器嵌入产品卡片；或使用 Shopify 原生博客并手动添加产品链接
WooCommerce	WordPress 原生博客	使用 WooCommerce 产品区块（Gutenberg）或 WooCommerce 短代码，在文章中嵌入产品
BigCommerce	BigCommerce 博客或 WordPress	WordPress：使用 WooCommerce 短代码或产品区块插件；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. 每张产品卡片都会显示图片、价格和“Add to Cart”按钮，并实时同步 Shopify 库存
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 短代码（经典编辑器）：

在文章文本中的任意位置插入产品：

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

---

BigCommerce

1. 对于 BigCommerce 内置的博客，只能手动添加产品链接——没有原生的产品嵌入区块
2. 推荐：在子域名（blog.yourstore.com）上运行 WordPress，并使用 BigCommerce for WordPress 插件
3. 这样即可使用 Gutenberg 产品区块（与上文的 WooCommerce 设置相同），同时主商店继续运行在 BigCommerce 上

---

自定义 / 无头架构

对于使用 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 归因参数

为内容中的每个产品链接添加 UTM 参数，以便在 Google Analytics 中追踪哪些文章带来了收入：

• 对于 Shopify/WooCommerce 原生嵌入：手动将 ?utm_source=content&utm_medium=blog&utm_campaign=ARTICLE-SLUG 添加到产品 URL，或通过主题设置添加
• 对于 Shogun/PageFly：每个按钮都有 URL 字段，请在其中添加 UTM 参数
• 对于无头架构：在产品嵌入组件中自动根据文章 slug 添加 UTM 参数

步骤 4：追踪内容带来的收入

在 Google Analytics 4 中：

1. 前往 报告 → 获客 → 流量获客
2. 按 Session source = content 筛选，查看归因于博客内容的所有订单
3. 如需了解更多详情：前往 探索 → 漏斗探索，并按 utm_medium = blog 筛选

在 Shopify Analytics 中：

1. 前往 Analytics → Reports → Sales by traffic source
2. 按来源筛选，查看带有 UTM 标记的内容流量

最佳实践

• 实时获取产品价格——切勿在 CMS 内容中硬编码价格；价格会变动，过时的价格会损害信任
• 在产品嵌入中显示“缺货”状态——外观异常的卡片比完全没有卡片更影响转化
• 将产品嵌入放在文章靠前的位置——数据表明，大多数读者不会滚动超过文章的 60%；请在前 400 个字内嵌入第一个产品推荐
• 将 UTM 的 utm_content 设为产品 slug——这样就能查看文章中的哪个具体产品促成了转化，而不仅是哪个文章促成了转化
• 为编辑团队提供产品搜索工具——在 Shopify 中，编辑在 Shogun/PageFly 中构建页面时可以按名称搜索产品；不要要求他们记住产品 ID

常见问题

问题	解决方案
文章中的产品价格已过时	始终在渲染时从 storefront API 获取价格；切勿将价格作为静态 CMS 内容嵌入
缺货产品仍嵌入在线文章中	在产品嵌入组件中添加库存检查；改为显示“到货通知”或相关产品
CMS 编辑无法找到要嵌入的产品	使用 Shogun/PageFly 的产品搜索小组件；对于无头架构，请构建一个通过 Storefront API 查询的产品选择器
内容归因重复计数——同一订单同时归因于内容和电子邮件	在 GA4 中使用最后一次非直接点击作为归因模型，或在路径探索报告中手动检查多触点路径
购买指南的 SEO 标题排名不佳	确保文章标题与精确的查询格式匹配（“适用于 [使用场景] 的最佳 [产品类型]（[年份]）”），并包含 product schema.org 标记

相关技能

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