user-generated-content

用户生成内容

概述

用户生成内容（UGC）——客户照片、问答和近期购买信号——能够为新访客提供真实证据，展示真实客户正在使用并喜爱该产品，从而提高产品页转化率。Judge.me 和 Yotpo 等评价应用开箱即提供 UGC 照片收集、产品问答和社交证明小组件。Okendo、Loox 和 Bazaarvoice 等专用 UGC 平台可从 Instagram 和 TikTok 等渠道更深入地获取内容。只有当你的审核逻辑、权利管理或数据库需求超出这些工具的支持范围时，才构建自定义 UGC 流程。

何时使用此技能

• 当产品页需要超越影棚拍摄的真实客户生活方式照片时
• 当需要构建问答版块，让客户互相解答问题时
• 当需要展示“过去 24 小时内有 X 人购买了此商品”之类的紧迫感信号时
• 当需要获取带有品牌话题标签的 Instagram UGC，用于产品页图库时
• 当第三方 UGC 平台对于当前规模来说过于昂贵时

核心说明

第 1 步：确定平台并选择合适的 UGC 工具

平台	推荐工具	原因
Shopify	Loox	专注于照片评价——购买后发送邮件请求用户上传照片，并在 PDP 上显示可视化图库
Shopify	Okendo	完整的 UGC 套件：照片和视频评价、问答、属性评分（尺码、质量）、Instagram UGC 获取
Shopify	Judge.me	免费套餐包含照片评价；是迁移到 Loox 或 Okendo 前的良好起点
WooCommerce	WooCommerce 内置评价 + WP Product Review	支持文字评价和星级评价；添加媒体上传插件以支持提交照片
WooCommerce	Yotpo for WooCommerce	完整的 UGC 功能，包括照片评价、问答和社交证明
BigCommerce	Okendo 或 Yotpo	两者均可在 BigCommerce App Marketplace 中使用
自定义 / 无头架构	使用 S3 + moderation 构建 UGC API	当 UGC 数据需要存储在自有数据库中，或与自定义推荐引擎集成时必需

---

第 2 步：针对平台进行设置

---

Shopify

选项 A：Loox（推荐用于以照片为主的 UGC）

1. 从 Shopify App Store 安装 Loox
2. 配置购买后照片请求：
   • 前往 Loox → Emails → Photo Request Email
   • 将发送延迟设为履约后 7 天
   • 为提交照片评价提供折扣奖励（例如，下次订单优惠 10%）——Loox 会在请求邮件中展示此优惠
3. 配置照片图库小组件：
   • 前往 Loox → Widgets → Product Widget
   • 在产品模板上启用照片轮播
   • 设置图库显示所需的最低照片数量（仅当每个产品有 3 张以上照片时才显示图库）
4. 审核：
   • 前往 Loox → Reviews → Pending，审核并批准提交的照片
   • 为已验证购买的照片评价启用 Auto-publish

选项 B：Okendo（包含问答和 Instagram 的完整 UGC）

1. 从 App Store 安装 Okendo
2. 配置评价表单以收集自定义属性：尺码、质量、价值——这些会作为筛选选项显示在评价小组件中
3. 在 Okendo → Features → Q&A 中设置问答：
   • 启用评价下方的客户间问答
   • 配置新问题提交时向团队发送邮件通知
   • 设置自动邮件通知，在工作人员回答后通知提问者
4. 在 Okendo → Channels → Instagram 中连接 Instagram：
   • 连接品牌 Instagram 账号
   • Okendo 会导入带有品牌话题标签的帖子，并允许你向发布者申请使用权
   • 仅在获得使用权后，才将内容发布到产品页

社交证明通知小组件（Loox 和 Okendo）： 这两款应用都内置“近期购买”弹出小组件。在 Loox → Widgets → Social Proof 或 Okendo → Widgets → Purchase Activity 中启用。将其配置为在产品页和系列页上显示，而不要在结账时显示。

---

WooCommerce

适用于 WooCommerce 的 Yotpo：

1. 从 WordPress 插件目录安装 Yotpo Reviews
2. Yotpo 负责照片评论请求、审核和图库展示
3. 在 Yotpo → Settings → Review Requests 中配置购后照片请求的时间
4. 在 Yotpo → Features → Q&A 下启用问答

WooCommerce 原生评论 + 照片上传：

1. 在 WooCommerce → Settings → Products → Reviews 中启用商品评论
2. 安装 WooCommerce Product Reviews Pro 扩展，以添加：
   • 评论表单中的照片上传字段
   • 已验证购买门槛
   • 对单条评论点赞／标记为有帮助
3. 如需单独设置问答，请从 WooThemes 或兼容插件安装 WooCommerce Product Q&A

获取 Instagram UGC： 使用 Tagembed 或 Smash Balloon Instagram Feed（WordPress 插件）在商品页面嵌入带标签的 Instagram 帖子。这些插件会按主题标签或提及内容拉取帖子，并让你挑选要在各商品页面展示的内容。

---

BigCommerce

适用于 BigCommerce 的 Okendo：

1. 前往 Apps → Search "Okendo" 并安装
2. 配置方式与 Shopify 版本相同——照片评论、问答和 Instagram 内容获取的工作方式一致
3. Okendo 会自动连接 BigCommerce 订单，以设置已验证购买门槛

适用于 BigCommerce 的 Yotpo：

1. 从 BigCommerce App Marketplace 安装
2. 包含照片评论、问答和 SMS 评论请求
3. Yotpo 的视觉 UGC 标签页会导入带有 Instagram 和 TikTok 标签的内容，供商品图库使用

---

自定义／无头架构

对于需要将 UGC 存入自有数据库的无头店面：

// lib/ugc.ts

// Generate a presigned S3 URL for direct browser-to-S3 photo uploads
// Never route file uploads through your API server
export async function getPhotoUploadUrl(req: Request, res: Response) {
  const { productId, fileName, contentType } = req.body;
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(contentType)) {
    return res.status(400).json({ error: 'Only JPEG, PNG, and WebP accepted' });
  }

  const key = `ugc/pending/${productId}/${req.session.customerId}/${Date.now()}-${fileName}`;
  const command = new PutObjectCommand({ Bucket: process.env.S3_BUCKET, Key: key, ContentType: contentType });
  const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 300 });

  await db.ugcPhotos.create({ data: { productId, customerId: req.session.customerId, s3Key: key, status: 'pending_upload' } });
  res.json({ uploadUrl, key });
}

// S3 ObjectCreated trigger: run content moderation then resize
export async function processUGCPhoto(s3Key: string) {
  const ugcRecord = await db.ugcPhotos.findFirst({ where: { s3Key } });
  if (!ugcRecord) return;

  // AWS Rekognition content moderation — auto-reject NSFW content
  const moderationResult = await rekognition.detectModerationLabels({
    Image: { S3Object: { Bucket: process.env.S3_BUCKET!, Name: s3Key } },
    MinConfidence: 75,
  });

  if ((moderationResult.ModerationLabels ?? []).length > 0) {
    await db.ugcPhotos.update({ where: { id: ugcRecord.id }, data: { status: 'rejected' } });
    return;
  }

  // Resize to thumbnail (200px), medium (600px), full (1200px) WebP variants
  const original = await s3.getObject({ Bucket: process.env.S3_BUCKET!, Key: s3Key });
  const buffer = Buffer.from(await original.Body!.transformToByteArray());

  for (const { suffix, width } of [{ suffix: 'thumbnail', width: 200 }, { suffix: 'medium', width: 600 }, { suffix: 'full', width: 1200 }]) {
    const resized = await sharp(buffer).resize(width).webp({ quality: 80 }).toBuffer();
    await s3.putObject({
      Bucket: process.env.S3_BUCKET!, Body: resized, ContentType: 'image/webp',
      Key: `ugc/approved/${ugcRecord.productId}/${ugcRecord.id}/${suffix}.webp`,
    });
  }

  // Auto-approve verified purchase photos; queue others for manual review
  const isVerifiedPurchase = await db.orderItems.findFirst({ where: { customerId: ugcRecord.customerId, productId: ugcRecord.productId } });
  await db.ugcPhotos.update({ where: { id: ugcRecord.id }, data: {
    status: isVerifiedPurchase ? 'approved' : 'pending_review',
    verifiedPurchase: !!isVerifiedPurchase,
  }});
}

// Product Q&A — submit and answer questions
export async function submitQuestion(req: Request, res: Response) {
  const { productId, question, authorName } = req.body;
  const q = await db.productQuestions.create({ data: { productId, question, authorName, authorEmail: req.session.customerEmail, status: 'pending' } });
  await notifyProductTeam({ questionId: q.id, productId, question });
  res.json({ questionId: q.id });
}

// Social proof feed: recent purchases cached for 5 minutes
export async function buildRecentPurchaseFeed() {
  const recentOrders = await db.orders.findMany({
    where: { createdAt: { gte: new Date(Date.now() - 86400000) }, status: 'completed' },
    include: { lineItems: { include: { product: true } }, customer: true },
    orderBy: { createdAt: 'desc' },
    take: 100,
  });

  const feed = recentOrders.flatMap(order =>
    order.lineItems.slice(0, 1).map(item => ({
      productId: item.productId,
      productName: item.product.name,
      buyerFirstName: order.customer.firstName,
      buyerLocation: order.customer.city ?? 'somewhere',
      purchasedAt: order.createdAt.toISOString(),
    }))
  );

  await redis.setex('social_proof_feed', 300, JSON.stringify(feed));
}

---

步骤 3：配置 Instagram UGC 的使用权管理

在店铺或付费广告中展示任何客户社交媒体内容之前：

1. 明确请求使用权——Okendo 和 Yotpo 内置了使用权请求流程，会向 Instagram 用户发送私信请求许可
2. 未经书面同意，绝不要在付费广告中使用 Instagram 内容——这会带来法律责任
3. 逐张照片跟踪使用权状态——仅展示已确认获得使用权的内容；Okendo 和 Yotpo 会自动跟踪
4. 自行获取内容（不使用专用应用）时，可在帖子下评论或发送私信请求使用权，并保留回复记录

---

步骤 4：设置问答审核

未获回答的问题比完全没有问答更损害信任：

在 Okendo 和 Yotpo 中：

• 配置每日电子邮件摘要，列出所有未获回答的问题并发送给团队
• 为员工回答设置 48 小时 SLA——超过 7 天仍未获回答的问题应升级处理

**最佳实践：**启用客户之间互相回答（其他买家可以作答）——这能减轻员工负担，而且客户通常比支持人员提供更真实的答案。

---

步骤 5：衡量 UGC 的影响

指标	基准	查看位置
UGC 照片提交率	已送达订单的 2–5%	Loox / Okendo 电子邮件分析
拥有 3 张以上客户照片的商品	跟踪前 50 个商品所占比例	应用控制面板
问答回答率	7 天内达到 90% 以上	Okendo / Yotpo 问答报告
社会认同组件点击率	商品页面访客的 1–3%	Loox/Okendo 中的组件分析

最佳实践

• 使用 Loox 或 Okendo，而不是从头定制 — 它们可以处理 S3 存储、内容审核、授权管理和 Instagram 导入；从头构建需要 2–4 周
• 为提交照片提供小额奖励 — 与不提供奖励相比，Loox 的照片换折扣功能可将提交率提高 3–5 倍
• 自动批准已验证购买者提交的照片 — 这类照片风险较低，消除人工审核瓶颈可大幅提升 UGC 数量
• 在 UGC 照片上显示已验证购买徽章 — 客户可以区分真实使用照片和摆拍照片；徽章能增强信任
• 展示前务必先进行 AI 内容审核 — 未经至少自动筛查，绝不要批准照片；AWS Rekognition 或 Google Vision SafeSearch 可自动识别不适宜内容
• 在付费广告中使用 UGC 前，务必获得明确授权 — 未经书面同意就将客户照片用于广告，会带来法律责任

常见问题

问题	解决方案
商品页面出现不适宜内容	在批准前启用内容审核；Loox 和 Okendo 会自动进行筛查
社会认同组件显示过时或虚假的紧迫感信息	使用 5 分钟缓存，并且只显示真实的购买信号 — 捏造数据会带来声誉和法律风险
问答版块中的问题数周无人回答	每天向产品团队发送摘要；超过 7 天没有员工回答的问题，比没有问答版块更损害信任
UGC 照片拖慢页面 LCP	Loox 和 Okendo 通过 CDN 提供图片并自动调整大小；自建时，务必将图片缩小为 200px 缩略图并使用延迟加载
未获得授权就将 Instagram 帖子用于付费广告	按帖子跟踪授权状态；Okendo 会自动处理此事 — 未确认同意前，绝不要将内容投放到广告中

相关技能

• @product-reviews-ratings
• @personalization-engine
• @customer-segmentation