email-service-integration

电子邮件服务集成

概述

交易邮件——订单确认、发货通知、密码重置和账户提醒——是关键的客户触点，必须即时且可靠地送达。本技能涵盖如何在各个平台上设置邮件投递，以及如何集成专用交易邮件服务（SendGrid、Amazon SES、Postmark），配置用于提高投递率的 SPF/DKIM/DMARC DNS 记录、可复用模板，以及退信/投诉处理。

适用场景

• 为新的电商商店设置交易邮件时
• 邮件因缺少 SPF、DKIM 或 DMARC 记录而进入垃圾邮件时
• 从平台内置邮件迁移到专用交易邮件服务时
• 构建符合品牌形象的自定义邮件模板时
• 跟踪交易邮件的投递情况、打开率和退信时

核心说明

步骤 1：确定你的平台和推荐方案

平台	默认邮件	推荐升级方案
Shopify	Shopify Email（内置，品牌化模板，每月最多 10K 封免费）	在 Settings → Notifications 中自定义模板；如需高发送量或高级流程，可使用 Klaviyo 或 Omnisend
WooCommerce	WordPress 通过你的托管服务器发送邮件（投递率较差）	安装 FluentSMTP（免费），通过 SendGrid/SES/Postmark 转发邮件；使用 WooCommerce Email Customizer（$49）制作品牌化模板
BigCommerce	BigCommerce 内置交易邮件（基础模板）	在 Marketing → Transactional Emails 中自定义模板；如需高级模板，可使用 Klaviyo BigCommerce integration
Custom / Headless	无——需要自行构建	直接集成 SendGrid、Postmark 或 Amazon SES；使用 React Email 构建模板；参见下方的实现方式

步骤 2：平台专属邮件设置

---

Shopify

自定义内置交易邮件：

1. 在 Shopify 管理后台中前往 Settings → Notifications
2. 点击任意通知类型（订单确认、发货通知等）以打开编辑器
3. 直接编辑 HTML/Liquid 模板——Shopify 提供用于订单数据的 Liquid 变量
4. 在 Online Store → Themes → Customize → Theme settings → Logo 中上传你的徽标——它会自动显示在通知邮件中
5. 在 Settings → General 中设置发件人邮箱——Shopify 会通过 SPF/DKIM 自动进行身份验证

设置 Shopify Email 营销流程：

1. 前往 Apps → Shopify Email（免费，所有套餐每月最多包含 10,000 封邮件）
2. 使用拖放式编辑器构建订单确认、发货和购买后流程
3. 如需高级自动化（弃购邮件序列、客户挽回流程），可升级到 Klaviyo（最多 500 个联系人免费），它提供预构建的 Shopify 集成

---

WooCommerce

使用 FluentSMTP 提高邮件送达率：

1. 安装 FluentSMTP（免费，wordpress.org）——用专用的 SMTP 或 API 服务商替代 WordPress 内置的 PHP 邮件功能
2. 前往 FluentSMTP → Settings → Add New Connection
3. 选择服务商：SendGrid（免费套餐：每天 100 封邮件）、Mailgun（免费套餐：每月 1,000 封邮件）或 Amazon SES（每 1,000 封邮件收费 $0.10）
4. 输入 API 密钥，并将 From Name 和 From Email 设置为与域名相匹配的值
5. 从 FluentSMTP 发送测试邮件，验证是否送达

为发送域名设置 SPF 和 DKIM：

大多数服务商都会提供需要添加的特定 DNS 记录。以 SendGrid 为例：

• 将 SendGrid 提供的两条 CNAME 记录添加到 DNS 中（通常在域名注册商或 Cloudflare 中设置）
• 在 SendGrid 中验证域名——DNS 传播最多需要 48 小时
• 验证后，Gmail 中的邮件会显示“via yourdomain.com”，而非“via sendgrid.net”

自定义 WooCommerce 邮件模板：

1. 安装 ThemeHigh 开发的 Email Customizer for WooCommerce（免费套餐；Pro 版起价 $49）
2. 前往 WooCommerce → Email Customizer，通过拖放将徽标、颜色和页脚添加到各类邮件中
3. 或安装 Kadence WooCommerce Email Designer（免费），使用实时预览编辑器

---

BigCommerce

自定义事务性邮件模板：

1. 在 BigCommerce 管理后台前往 Marketing → Transactional Emails
2. 点击任意邮件类型（订单确认、发货通知等），然后点击 Edit Template
3. 使用 BigCommerce 的模板变量编辑 HTML 模板（例如，%%ORDER_NUMBER%%、%%TOTAL_COST%%）
4. 在 Store Setup → Store Profile 中，设置发件人名称和回复地址

连接 Klaviyo 以创建高级自动化流程：

1. 从 BigCommerce App Marketplace 安装 Klaviyo 应用（免费安装）
2. Klaviyo 会自动同步 BigCommerce 的订单和客户数据
3. 使用 Klaviyo 预构建的 BigCommerce 工作流发送订单确认、发货和购物车弃置邮件

---

自定义 / 无头架构

先配置 DNS 以提高送达率——在任何邮件送达收件箱之前，必须设置 SPF、DKIM 和 DMARC：

; SPF — authorize SendGrid to send on behalf of your domain
mystore.com.  IN TXT  "v=spf1 include:sendgrid.net ~all"

; DKIM — SendGrid provides two CNAME records:
s1._domainkey.mystore.com  IN CNAME  s1.domainkey.u12345.wl.sendgrid.net.
s2._domainkey.mystore.com  IN CNAME  s2.domainkey.u12345.wl.sendgrid.net.

; DMARC — start with p=none to monitor, then escalate to p=quarantine
_dmarc.mystore.com  IN TXT  "v=DMARC1; p=none; rua=mailto:[email protected]"

发送前使用 mxtoolbox.com/SuperTool.aspx 验证。

SendGrid API 集成：

// lib/email/sendgrid.ts
import sgMail from '@sendgrid/mail';
sgMail.setApiKey(process.env.SENDGRID_API_KEY!);

export async function sendEmail(params: {
  to: string;
  subject: string;
  html: string;
  text: string;
}) {
  await sgMail.send({
    to: params.to,
    from: { email: '[email protected]', name: 'My Store' },
    subject: params.subject,
    html: params.html,
    text: params.text,
    trackingSettings: {
      clickTracking: { enable: false },  // Don't wrap links in transactional emails
      openTracking: { enable: true },
    },
  });
}

使用 React Email 构建模板（npm install @react-email/components）：

// emails/order-confirmation.tsx
import { Body, Container, Heading, Html, Img, Preview, Section, Text, Row, Column } from '@react-email/components';

export function OrderConfirmationEmail({ orderNumber, customerName, items, total, trackingUrl }) {
  return (
    <Html>
      <Preview>Your order #{orderNumber} is confirmed</Preview>
      <Body style={{ backgroundColor: '#f4f4f4', fontFamily: 'Arial, sans-serif' }}>
        <Container style={{ maxWidth: '600px', margin: '0 auto', backgroundColor: '#fff', padding: '20px' }}>
          <Heading>Order Confirmed</Heading>
          <Text>Hi {customerName}, your order #{orderNumber} has been received.</Text>
          {items.map((item, i) => (
            <Row key={i} style={{ borderBottom: '1px solid #eee', padding: '10px 0' }}>
              <Column style={{ width: '60px' }}>
                <Img src={item.imageUrl} width={50} height={50} alt={item.name} />
              </Column>
              <Column>
                <Text style={{ margin: 0, fontWeight: 'bold' }}>{item.name}</Text>
                <Text style={{ margin: 0, color: '#666' }}>Qty: {item.quantity}</Text>
              </Column>
              <Column style={{ textAlign: 'right' }}>
                <Text style={{ margin: 0 }}>{item.price}</Text>
              </Column>
            </Row>
          ))}
          <Section style={{ marginTop: '20px' }}>
            <Text style={{ fontWeight: 'bold', fontSize: '18px' }}>Total: {total}</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
}

渲染并发送：

import { render } from '@react-email/render';
import { OrderConfirmationEmail } from '../../emails/order-confirmation';
import { sendEmail } from './sendgrid';

export async function sendOrderConfirmation(order: Order) {
  const html = await render(OrderConfirmationEmail({ ...orderData }));
  const text = await render(OrderConfirmationEmail({ ...orderData }), { plainText: true });

  await sendEmail({
    to: order.customer.email,
    subject: `Your order #${order.number} is confirmed`,
    html,
    text,
  });
}

通过 webhook 处理退信和投诉：

// POST /api/webhooks/sendgrid
export async function POST(req: NextRequest) {
  const events = await req.json();
  for (const event of events) {
    if (event.event === 'bounce') {
      await db.emailSuppressions.upsert({ email: event.email, type: 'hard_bounce' });
    }
    if (event.event === 'spamreport') {
      await db.emailSuppressions.upsert({ email: event.email, type: 'spam_complaint' });
    }
  }
  return NextResponse.json({ received: true });
}

// Check suppression list before every send
export async function canSendEmail(email: string): Promise<boolean> {
  const suppression = await db.emailSuppressions.findByEmail(email.toLowerCase());
  return !suppression; // Never send to hard bounced or spam-complaint addresses
}

最佳实践

• 事务性邮件和营销邮件使用不同的发送域名——营销活动中的退信和垃圾邮件投诉不应影响事务性邮件域名的声誉
• 始终包含纯文本版本——缺少纯文本内容可能触发垃圾邮件过滤器；React Email 会使用 { plainText: true } 自动生成纯文本版本
• 立即抑制硬退信地址——向不存在的地址发送邮件会损害发件人声誉；每次发送前都应存储并检查抑制列表
• 切勿追踪事务性邮件中的点击——链接追踪会将 URL 包装在重定向中，在密码重置和订单确认邮件中可能显得可疑
• 在不同邮件客户端中测试渲染效果——Outlook、Gmail 和 Apple Mail 对 HTML 的渲染方式差异很大；部署模板前，使用 Litmus 或 Email on Acid 进行验证

常见问题

问题	解决方案
WooCommerce 邮件被归入垃圾邮件	安装 FluentSMTP，通过 SendGrid 或 SES 发送；WordPress 默认的 PHP 邮件没有 SPF/DKIM，几乎总会被标记为垃圾邮件
SES 沙盒阻止邮件投递	新 AWS 账户的 SES 默认处于沙盒模式；上线前通过 AWS Support 申请生产访问权限
重复发送订单确认邮件	实现幂等发送：emailId = hash(orderId + 'order-confirmation')，并在发送前进行检查
SPF/DKIM 配置正确，但邮件仍进入垃圾邮件	检查 DMARC 对齐情况；你的 From: 域名必须与 DKIM d= 标签中的域名一致
React Email 的 CSS 在 Outlook 中异常	所有样式都使用内联样式；Outlook 会忽略 <style> 块；@react-email/components 会为内置组件处理此问题

相关技能

• @gdpr-ecommerce
• @webhook-architecture
• @analytics-integration