根据用户下拉选择动态分配Mailchimp标签的实现教程

前言

在数字营销中，根据用户的兴趣或行为进行细分是提高营销效果的关键。mailchimp作为流行的邮件营销平台，其标签（tags）功能为此提供了便利。本教程将指导您如何构建一个系统，允许用户通过网页上的下拉菜单选择其兴趣，并根据此选择自动为其mailchimp订阅者分配相应的标签，例如“b2b”或“b2c”。

1. 前端表单设计与下拉菜单实现 (EJS)

要捕获用户的选择并将其发送到服务器，最可靠的方法是使用标准的HTML <form> 元素和 <select> 下拉菜单。初始的实现可能使用了按钮来模拟下拉菜单，但这不利于直接通过表单提交获取值。

关键点：

• 使用 <form> 元素： 将所有需要提交的数据（包括下拉菜单）包裹在一个 <form> 标签内，并指定 action 和 method 属性。
• 使用 <select> 元素： 这是标准的下拉菜单控件。
• name 属性： 为 <select> 元素设置一个 name 属性（例如 name=”dropDown”），这是后端通过 req.body 访问其值的关键标识。
• value 属性： 为每个 <option> 元素设置一个 value 属性。这个 value 将是当用户选择该选项时，实际发送到服务器的值。例如，选择“Business to Business”时，我们希望服务器接收到“B2B”。

以下是修改后的 EJS 模板代码示例：

<form action="/" method="post">
<!-- 其他用户输入字段，例如名字、姓氏、邮箱等 -->
<div class="mb-3">
<label for="firstName" class="form-label">名字</label>
<input type="text" class="form-control" id="firstName" name="firstName" required>
</div>
<div class="mb-3">
<label for="lastName" class="form-label">姓氏</label>
<input type="text" class="form-control" id="lastName" name="lastName" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="dropdown me-1">
<label for="dropDown" class="form-label">选择您的兴趣</label>
<select name="dropDown" id="dropDown" class="form-select">
<option value="">请选择一个选项</option>
<option value="B2B">Business to Business</option>
<option value="B2C">Business to Consumer</option>
</select>
</div>
<button type="submit" class="btn btn-primary mt-3">订阅</button>
</form>

注意事项：

• option 标签中的 value 属性是发送到服务器的实际值，而标签之间的文本是用户在界面上看到的。
• 添加一个默认的“请选择”选项，其 value 可以为空或一个提示字符串，以确保用户有意进行选择。

2. 后端数据处理与标签提取 (Node.js/Express)

当用户提交表单后，后端 Express 服务器会接收到一个 POST 请求。我们需要从 req.body 对象中提取用户输入的所有数据，包括下拉菜单的选择。

在您的 app.post(‘/’) 路由处理函数中，您可以通过之前为 <select> 元素设置的 name 属性来访问其值。

app.post('/', (req, res) => {
// 提取其他表单字段
var firstName = req.body.firstName;
var lastName = req.body.lastName;
var email = req.body.email;
// 提取下拉菜单的选择值
let tag = req.body.dropDown; // 'dropDown' 对应前端 <select name="dropDown">
// ... 后续处理逻辑
});

此时，tag 变量将包含用户选择的“B2B”或“B2C”字符串。

3. 集成Mailchimp API请求体

Mailchimp API允许您在添加或更新订阅者时，通过 tags 数组为其分配标签。我们将把从前端获取到的 tag 变量整合到 Mailchimp API 请求的 data 对象中。

app.post('/', (req, res) => {
var firstName = req.body.firstName;
var lastName = req.body.lastName;
var email = req.body.email;
let tag = req.body.dropDown; // 获取用户选择的标签
// 构建发送到 Mailchimp API 的数据对象
var data = {
status: "active", // 订阅状态，通常设置为“active”
members: [
{
email_address: email,
status: "subscribed", // 订阅状态
merge_fields: {
FNAME: firstName,
LNAME: lastName,
},
// 将用户选择的标签添加到 tags 数组中
tags: [tag],
}
],
};
// 接下来，您将使用 Mailchimp API 客户端库或 fetch/axios 发送此数据
// 例如 (伪代码):
// mailchimp.lists.batchListMembers("YOUR_LIST_ID", data)
//   .then(response => {
//     console.log("Subscription successful:", response);
//     res.redirect("/success");
//   })
//   .catch(error => {
//     console.error("Error subscribing:", error);
//     res.redirect("/failure");
//   });
});

要点：

• tags 属性是一个数组，即使只有一个标签，也应将其包裹在方括号 [] 中。
• 确保 tag 变量的值与您在 Mailchimp 中预设的标签名称一致（大小写敏感）。如果标签在Mailchimp中不存在，它通常会被自动创建。

总结

通过上述步骤，我们成功地实现了一个根据用户下拉选择动态分配Mailchimp标签的系统。核心在于：

1. 前端使用标准 <form> 和 <select> 元素，并确保 <select> 具有 name 属性和 <option> 具有 value 属性。
2. 后端通过 req.body 轻松获取 下拉菜单的选择值。
3. 将获取到的标签值直接整合到 Mailchimp API 请求的 tags 数组中。

这种方法不仅确保了数据的准确传输，也为后续的邮件营销策略提供了灵活的用户细分能力，使您能够根据用户的具体兴趣发送更具针对性的内容。