video-commerce-integration

视频电商集成

概述

视频电商通过在视频播放器和直播中嵌入商品链接、交互式热点和一键结账，将被动的视频内容转化为直接的购买体验。与静态图片商品详情页相比，站内可购物视频可将商品页面的转化率提高多达 40%。由 TikTok 和 Instagram LIVE 推广的直播购物活动，能营造紧迫感和互动性，这是任何静态页面都无法复制的。专用视频电商平台（Tolstoy、Videowise、Firework）可处理嵌入、热点编辑和分析；对大多数商店而言，无需定制开发。

适用场景

• 希望为现有站内视频内容添加可购物商品热点时
• 筹划新品发布或限时促销的直播购物活动时
• TikTok Shop 或 Instagram Shopping LIVE 的限制太多，需要原生站内体验时
• UGC 视频内容需要在商品页面上支持购物时
• 衡量视频内容对购买转化率的贡献时

核心说明

步骤 1：选择合适的视频电商平台

平台	最适合	Shopify	WooCommerce	BigCommerce	价格
Tolstoy	可购物视频故事和信息流，原生支持 Shopify	App Store	通过 JS 嵌入	通过 JS 嵌入	免费套餐；$19+/mo
Videowise	配备 LCP 优化的高性能可购物视频	App Store	—	—	$99+/mo
Firework	企业级直播购物 + 可购物短视频	通过 JS	通过 JS	通过 JS	定制价格
YouTube Shopping	将 YouTube 视频关联至商品目录	Google & YouTube channel	通过 Google Listings & Ads 插件	通过 Channel Manager	免费
TikTok Shop	原生 TikTok LIVE 购物 + 视频商品标签	TikTok channel	TikTok 插件	通过 TikTok channel	免费（按佣金计费）

建议： 如果目标是使用可购物视频故事和商品页面嵌入，且使用 Shopify，请选择 Tolstoy——无需编写代码，并可自动与 Shopify 商品目录集成。如果已有包含商品评测或教程内容的 YouTube 频道，请选择 YouTube Shopping。对于企业级直播购物体验，请使用 Firework。

步骤 2：在商店中设置可购物视频

---

使用 Tolstoy 的 Shopify

1. 从 Shopify App Store 安装 Tolstoy
2. 前往 Tolstoy → Videos → Upload，上传商品视频或从 TikTok/Instagram 导入
3. 在视频编辑器中，点击 Tag Products → 搜索 Shopify 商品目录 → 点击视频中商品出现的位置，以设置热点时间戳
4. 前往 Tolstoy → Widgets → Floating Button，在商品页面添加可购物视频气泡（显示在角落，自动播放）
5. 前往 Tolstoy → Widgets → Video Carousel，在商品描述上方添加可购物视频的水平滚动轮播
6. 在 Shopify Theme Editor 中：在应用分区列表中搜索“T​​olstoy”，并将小组件拖至所需位置
7. 前往 Tolstoy → Analytics，跟踪每个视频的播放率、加入购物车率和归因收入

---

使用 YouTube Shopping 的 Shopify

1. 前往 Shopify Admin → Sales Channels → + → Google & YouTube
2. 连接 Google Merchant Center 和 YouTube 频道
3. 在 YouTube Shopping 下，启用视频商品标记
4. 在 YouTube Studio 中，前往 Shopping 并关联 Merchant Center 账号
5. 编辑任意 YouTube 视频 → 点击 Products → 搜索商品目录 → 标记商品
6. 已标记的商品会显示在 YouTube 视频下方的商品栏中，并在播放期间以可点击的叠加层形式显示

---

WooCommerce

1. 对于可购物视频轮播：从 WordPress 插件目录安装 VideoSuite 或 WP Video Popup，然后使用短代码在产品页面中嵌入视频
2. 对于 YouTube Shopping 集成：安装 Google Listings & Ads 插件（Google 官方插件）→ 连接 Google Merchant Center → 在 YouTube Studio 中启用产品标记（流程同上）
3. 对于原生直播购物：使用 TikTok for WooCommerce 插件并举办 TikTok LIVE 活动（设置请参阅 @tiktok-shop-integration）
4. 若要获得无需自定义代码的完整可购物视频体验：通过 JavaScript 嵌入使用 Firework —— 通过 wp_enqueue_script() 将嵌入脚本添加到 WooCommerce 主题的 functions.php 中

---

BigCommerce

1. 对于 YouTube Shopping：前往 BigCommerce Admin → Channel Manager → Google & Meta 并连接 Google Merchant Center；然后在 YouTube Studio 中启用 YouTube Shopping
2. 对于可购物视频小组件：通过 BigCommerce → Storefront → Script Manager 添加 Tolstoy 或 Firework JavaScript 代码片段（Scripts 部分 → Create Script → All pages 或指定页面）
3. 在 Tolstoy 或 Firework 控制面板中配置产品标记——这两个平台都通过在 BigCommerce → Advanced Settings → API Accounts 中生成的 API 凭据连接到你的 BigCommerce 商品目录

---

自定义 / Headless

对于无头商店，可通过自定义播放器组件和产品热点叠加层构建可购物视频：

interface VideoHotspot {
  id:              string;
  productId:       string;
  timestamp:       number;     // seconds into video when hotspot appears
  displayDuration: number;     // how long it stays visible (seconds)
  position:        { x: number; y: number };  // % from top-left (0–100)
}

interface ShoppableVideo {
  id:           string;
  videoUrl:     string;        // HLS (.m3u8) or MP4 URL from CDN
  thumbnailUrl: string;
  hotspots:     VideoHotspot[];
  type:         'recorded' | 'live';
}

// React shoppable video player with time-based hotspot detection
import { useRef, useState, useEffect } from 'react';

function ShoppableVideoPlayer({ video }: { video: ShoppableVideo }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [activeHotspot, setActiveHotspot] = useState<VideoHotspot | null>(null);
  const [hotspotProduct, setHotspotProduct] = useState<Product | null>(null);

  useEffect(() => {
    const el = videoRef.current;
    if (!el) return;

    const onTimeUpdate = () => {
      const t = el.currentTime;
      const active = video.hotspots.find(h =>
        t >= h.timestamp && t <= h.timestamp + h.displayDuration
      ) ?? null;

      if (active?.id !== activeHotspot?.id) {
        setActiveHotspot(active);
        if (active) {
          fetch(`/api/products/${active.productId}`)
            .then(r => r.json())
            .then(setHotspotProduct);
        } else {
          setHotspotProduct(null);
        }
      }
    };

    el.addEventListener('timeupdate', onTimeUpdate);
    return () => el.removeEventListener('timeupdate', onTimeUpdate);
  }, [video.hotspots, activeHotspot]);

  return (
    <div style={{ position: 'relative' }}>
      <video ref={videoRef} src={video.videoUrl} poster={video.thumbnailUrl}
             controls playsInline style={{ width: '100%' }} />
      {activeHotspot && hotspotProduct && (
        <div style={{
          position: 'absolute',
          left: `${activeHotspot.position.x}%`,
          top: `${activeHotspot.position.y}%`,
          transform: 'translate(-50%, -100%)',
          background: 'white',
          padding: '12px',
          borderRadius: '8px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          zIndex: 10,
          minWidth: '200px',
        }}>
          <p style={{ fontWeight: 600 }}>{hotspotProduct.name}</p>
          <p style={{ color: '#666' }}>${hotspotProduct.price.toFixed(2)}</p>
          <button onClick={() => addToCart(hotspotProduct.id)}>Add to cart</button>
        </div>
      )}
    </div>
  );
}

对于 LIVE 购物，使用 Mux 创建 HLS 流，并通过 WebSockets 将当前主推产品推送给所有观众：

async function createLiveShoppingEvent(title: string, productIds: string[]) {
  const stream = await muxClient.Video.LiveStreams.create({
    playback_policy: 'public',
    new_asset_settings: { playback_policy: 'public' },
  });

  return db.liveShoppingEvents.create({
    title,
    streamKey:        stream.stream_key,   // configure in OBS/Restream
    playbackUrl:      `https://stream.mux.com/${stream.playback_ids[0].id}.m3u8`,
    featuredProducts: productIds,
    status:           'scheduled',
  });
}

// Broadcast the currently featured product to all live viewers
async function featureProductInLive(eventId: string, productId: string) {
  const product = await db.products.findById(productId);
  await wsServer.broadcast(`live:${eventId}`, {
    type:    'feature-product',
    product: { id: product.id, name: product.name, price: product.price,
               imageUrl: product.images[0]?.url },
  });
}

第 3 步：举办直播购物活动（平台原生）

对于已在使用 TikTok Shop 或 Instagram Shopping 的商店，原生 LIVE 是阻力最小的方式：

TikTok LIVE Shopping：

1. 确认计划展示的所有产品在 TikTok Seller Center 中均为 Active 状态（审核需要 24–48 小时）
2. 打开 TikTok 应用 → 点按 + → Go LIVE → 点按购物车图标 → 选择要展示的产品
3. 直播期间，可实时置顶和取消置顶产品——观众点按置顶产品卡片即可购买，无需离开应用
4. 完整的 TikTok Shop 设置请参阅 @tiktok-shop-integration

Instagram Live Shopping：

1. 通过 Facebook & Instagram 渠道连接 Meta 商品目录（请参阅 @social-commerce）
2. 打开 Instagram → 创建 LIVE → 点按购物袋图标 → 从商品目录中添加产品
3. 直播期间为产品添加标记；观众会看到可点按的链接

使用 Firework 在站内直播：

1. 注册 Firework，并在你的店面安装嵌入脚本
2. 前往 Firework → Live Events → Schedule 并创建新的直播活动
3. 在 Firework → Catalog → Import 中连接商品目录（支持 Shopify、WooCommerce 和自定义 Feed）
4. 活动期间，主持人通过 Firework 制作人员控制面板控制产品聚焦展示——观众会在你的网站上实时看到主推产品卡片

第 4 步：衡量视频商务表现

指标	查看位置
视频播放率	Tolstoy Analytics / Firework Dashboard
热点点击率	Tolstoy Analytics → Interactions
来自视频的加入购物车次数	Tolstoy / Firework → Conversions
归因于视频的收入	Tolstoy → Revenue（使用 UTM 归因）
LIVE 购物订单	TikTok Seller Center → Analytics / Firework → Live Reports

最佳实践

• 在产品出现在屏幕上 1–2 秒后触发热点——过早出现的热点显得突兀；延迟出现则更及时、更贴合情境
• 保持热点卡片精简——覆盖超过视频画面 20% 的卡片会缩短观看时长；使用简约的 200×120px 卡片，显示产品名称、价格和加入购物车按钮
• 在视频加载时预加载所有热点的产品数据——避免播放过程中出现 API 延迟；在视频播放器初始化时，通过一次批量请求获取所有热点产品
• 所有视频均使用 HLS 传输——自适应码率流媒体可确保在各种网络条件下流畅播放；上传 MP4 源文件，并通过 Mux 或 Cloudflare Stream 转码为 HLS
• 在固定时段举办 LIVE 活动——在主要时区的周二或周四晚上 7 点举办活动，有助于培养回头观众；临时举办的直播活动出席率较低
• 将直播购物活动控制在 60 分钟以内——30–45 分钟后，观众注意力会明显下降；提前规划产品阵容和演示顺序

常见问题

问题	解决方案
热点位置在移动设备上发生偏移	使用基于百分比的位置（从左上角起算），而非像素坐标——百分比会随视频元素缩放
直播延迟导致产品展示不同步	在 OBS 中使用低延迟 RTMP 设置（5s 延迟），或启用 WHIP，将延迟降至亚秒级
视频无法在 iOS Safari 上加载	确保视频使用 H.264 编码和 AAC 音频；iOS 并不全面支持 VP9
Tolstoy 视频拖慢页面加载速度	Tolstoy 默认采用延迟加载——请确保使用 Tolstoy Shopify 应用区块，而非绕过其性能优化的自定义嵌入方式
LIVE 购物产品未显示	活动开始前，产品必须处于 Active 状态；TikTok 的审核需要 24–48 小时——请在活动前一天激活产品

相关技能

• @tiktok-shop-integration
• @tiktok-ads-integration
• @ugc-campaign-management
• @product-launch-campaigns
• @social-commerce