Mailchimp 是一个广泛使用的营销自动化平台,主要用于电子邮件营销。它帮助企业和个人管理他们的电子邮件列表,创建邮件活动,以及自动化邮件发送流程。Mailchimp 提供了多种工具来跟踪电子邮件活动的效果,如打开率、点击率等。
源码:https://github.com/Jessie-jzn/Jessie-Blog.dev
网站:https://www.jessieontheroad.com/
Mailchimp 提供一个免费的计划,适合刚开始进行电子邮件营销的个人和小型企业。免费计划包含以下内容:
Mailchimp 提供了一个 API,可以让开发者在他们的应用程序或网站中集成 Mailchimp 的功能。通过 Mailchimp API,可以:
即使使用免费的 Mailchimp 计划,仍然可以访问 Mailchimp 的 API,不过 API 调用会受到一定的限制。以下是一些免费的 API 功能:
尽管 Mailchimp 的 API 是免费的,但它的使用也会受到一些限制,特别是在免费计划中。常见的限制包括:
通过 Mailchimp API 添加新订阅者:
curl -X POST 'https://.api.mailchimp.com/3.0/lists//members/' \\
--user "anystring:" \\
-H 'Content-Type: application/json' \\
-d '{
"email_address": "[email protected]",
"status": "subscribed"
}'
是的数据中心标识符,通常为的 API Key 的后缀部分(如 us10)。
是受众列表的 ID。通过 Mailchimp API,可以将这些功能集成到自己的应用程序中,增强电子邮件营销的自动化和效率。
lib/mailchimp.ts
// lib/mailchimp.ts
interface SubscribeToMailchimpApiParams {
email: string;
first_name?: string;
last_name?: string;
}
interface SubscribeToNewsletterResponse {
success: boolean;
message: string;
}
/**
* 订阅邮件 - 服务端接口
* @param {SubscribeToMailchimpApiParams} params
* @returns {Promise}
*/
export async function subscribeToMailchimpApi({
email,
first_name = "",
last_name = "",
}: SubscribeToMailchimpApiParams): Promise {
const API_KEY = process.env.MAILCHIMP_API_KEY;
const AUDIENCE_ID = process.env.MAILCHIMP_AUDIENCE_ID;
const SERVER_PREFIX = process.env.MAILCHIMP_SERVER_PREFIX;
const url = `https://${SERVER_PREFIX}.api.mailchimp.com/3.0/lists/${AUDIENCE_ID}/members`;
if (!email || !AUDIENCE_ID || !API_KEY) {
console.error("Missing required fields: email, listId, or apiKey.");
return undefined;
}
const data = {
email_address: email,
status: "subscribed",
merge_fields: {
FNAME: first_name,
LNAME: last_name,
},
};
try {
const response = await fetch(url, {
method: "POST",
headers: {
Authorization: `apikey ${API_KEY}`,
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(`Mailchimp API error: ${response.statusText}`);
}
return response;
} catch (error) {
console.error("Error subscribing to Mailchimp:", error);
return undefined;
}
}
/**
* 客户端接口
* @param {string} email
* @param {string} [firstName]
* @param {string} [lastName]
* @returns {Promise}
*/
export async function subscribeToNewsletter(
email: string,
firstName: string = "",
lastName: string = ""
): Promise {
try {
const response = await fetch("/api/subscribe", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
first_name: firstName,
last_name: lastName,
}),
});
if (!response.ok) {
throw new Error(`Subscription failed: ${response.statusText}`);
}
const data = await response.json();
return { success: data.status, message: data.message };
} catch (error) {
console.error("Error subscribing to newsletter:", error);
return {
success: false,
message: "Subscription failed. Please try again.",
};
}
}
在 pages/api/subscribe.js
创建一个 API 路由,用于处理订阅请求。
import type { NextApiRequest, NextApiResponse } from "next";
import { subscribeToMailchimpApi } from "@/lib/mailchimp";
interface ApiResponse {
status: "success" | "error";
message: string;
error?: string;
}
/**
* 接受邮件订阅
* @param {NextApiRequest} req
* @param {NextApiResponse} res
*/
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
if (req.method === "POST") {
const { email, firstName = "", lastName = "" } = req.body;
if (!email) {
return res
.status(400)
.json({ status: "error", message: "Email is required." });
}
try {
console.log("Request received:", { email, firstName, lastName });
const response = await subscribeToMailchimpApi({
email,
first_name: firstName,
last_name: lastName,
});
if (!response) {
console.error("No response from Mailchimp API");
throw new Error("Mailchimp API returned undefined response.");
}
// 解析 response body 并获取详细的错误信息
const responseData = await response.json();
if (!response.ok) {
console.error("Mailchimp API error response:", responseData); // 打印详细的错误信息
res.status(400).json({
status: "error",
message: "Subscription failed!",
error: responseData.detail || "Unknown error",
});
return;
}
res
.status(200)
.json({ status: "success", message: "Subscription successful!" });
} catch (error) {
console.error("Error in handler:", error);
res.status(500).json({
status: "error",
message: "Subscription failed!",
error: (error as Error).message,
});
}
} else {
res.status(405).json({ status: "error", message: "Method not allowed" });
}
}
创建一个 React 组件,用于输入用户的 email 并提交表单。
"use client";
import React, { useEffect, useRef, useState } from "react";
import Link from "next/link";
import SiteConfig from "../site.config";
import { subscribeToNewsletter } from "@/lib/mailchimp";
import SocialContactIcon from "./SocialContactIcon";
import { useTranslation } from "next-i18next";
const Footer: React.FC = () => {
const { t } = useTranslation("common");
const formRef = useRef(null);
const emailRef = useRef(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [message, setMessage] = useState(null);
const handleSubscribe = async (event: any) => {
event.preventDefault(); // 阻止页面刷新
if (emailRef.current) {
const email = emailRef.current.value;
if (email) {
try {
const response = await subscribeToNewsletter(email);
console.log("Subscription succeeded:", response);
// 在此处添加成功订阅后的操作
if (response.success) {
setMessage(t("subscriptionSuccess")); // 设置成功消息
emailRef.current.value = ""; // 清空输入框
} else {
setMessage(response.message);
}
} catch (error) {
console.error("Subscription failed:", error);
// 在此处添加订阅失败后的操作
setMessage(t("subscriptionFailed")); // 设置失败消息
} finally {
setIsSubmitting(false); // 重新启用按钮
}
} else {
setMessage(t("emailRequired")); // 设置提示消息
}
}
};
useEffect(() => {
const form = formRef.current;
form?.addEventListener("submit", handleSubscribe);
return () => {
form?.removeEventListener("submit", handleSubscribe);
};
}, []);
return (
{message && (
{message}
)}
);
};
export default Footer;
最后,将项目部署到 Vercel 或其他平台,确保环境变量中设置了 MAILCHIMP_API_KEY
和 MAILCHIMP_AUDIENCE_ID
, Next.js 网站就会具备一个基于 Mailchimp 的订阅功能
Mailchimp 是一个强大的工具,可以帮助管理电子邮件营销,并且它提供了免费的计划和 API,适合刚起步的小企业和个人用户。虽然有一些限制,但对于初学者来说,Mailchimp 的免费计划提供了足够的功能来建立并管理邮件订阅列表。