🚀 将 InstaWP 的新闻通讯订阅者自动发送到 Mailchimp
Gato GraphQL 使用 InstaWP,让访客在决定购买前能在自己的沙箱站点中试用插件的商业扩展功能。
两天前,我将 InstaWP 订阅升级到了 Personal 计划,以便将沙箱站点的有效期从 4 小时延长至 7 天,并能在试用 Gato GraphQL 时获取订阅新闻通讯的邮箱地址:

新计划让我可以访问「Advanced Options」标签页,在那里可以配置一个 Webhook 来接收新创建的沙箱站点的数据:

我希望自动获取勾选了"Subscribe to mailing list"复选框的访客邮箱,并直接发送到我的 Mailchimp 列表,无需任何人工干预。
Webhook 文档提供了一个获取新沙箱站点数据的示例,基于使用 Make 平台创建 Webhook,提取 payload 字段并发送到 Google Sheet:

然而,这个工作流并不能完全满足我的需求,因为我不想依赖另一个服务提供商,也不想在那里输入我的 Mailchimp 凭据。我需要更简单的方案。
使用 InstaWP + Gato GraphQL 转发 Webhook 数据
解决方案就在眼前:我可以直接使用 InstaWP 托管一个专用站点,并安装带有 "Power Extensions" 套件的 Gato GraphQL 插件。
这种组合让我以低廉的成本获得了一个「API Gateway」实例。我现在可以用这个实例接收 Webhook payload,提取数据,并通过编写 GraphQL query 的逻辑将其发送到 Mailchimp。
起初,使用 GraphQL 可能并不是一个显而易见的选择,因为 GraphQL 服务器通常只暴露一个端点来接收 query、解析并返回响应。虽然技术上可行,但将单一端点用作 Webhook URL 并通过参数传递 GraphQL query 会非常笨拙:
https://my-api-gateway.instawp.xyz/graphql/?query=query HasSubscribedToNewsletter { hasSubscriberOptIn: _httpRequestHasParam(name: "marketing_optin") subscriberOptIn: _httpRequestStringParam(name: "marketing_optin") isNotSubscriberOptInNAValue: _notEquals(value1: $__subscriberOptIn, value2: "NA") subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue]) @export(as: "subscribedToNewsletter") } query MaybeCreateContactOnMailchimp @depends(on: "HasSubscribedToNewsletter") @include(if: $subscribedToNewsletter) { subscriberEmail: _httpRequestStringParam(name: "email") mailchimpUsername: _env(name: "MAILCHIMP_API_CREDENTIALS_USERNAME") @remove mailchimpPassword: _env(name: "MAILCHIMP_API_CREDENTIALS_PASSWORD") @remove mailchimpListMembersJSONObject: _sendJSONObjectItemHTTPRequest(input: { url: "https://us7.api.mailchimp.com/3.0/lists/bdfd6885fe/members", method: POST, options: { auth: { username: $__mailchimpUsername, password: $__mailchimpPassword }, json: { email_address: $__subscriberEmail, status: "subscribed" } } }) }不太好看,对吧?
Gato GraphQL 提供了一种更好的处理方式:Persisted Queries。Persisted Query 类似于 REST 端点,可通过自己的 URL 访问,且输出是预定义的(GraphQL query 预先提供并存储在数据库中):

现在,Webhook URL 如下所示:
https://my-api-gateway.instawp.xyz/graphql-query/process-instawp-sandbox-webhook/?operationName=MaybeCreateContactOnMailchimp存储为 Persisted Query 的 GraphQL query 如下:
query HasSubscribedToNewsletter {
hasSubscriberOptIn: _httpRequestHasParam(name: "marketing_optin")
subscriberOptIn: _httpRequestStringParam(name: "marketing_optin")
isNotSubscriberOptInNAValue: _notEquals(value1: $__subscriberOptIn, value2: "NA")
subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
@export(as: "subscribedToNewsletter")
}
query MaybeCreateContactOnMailchimp
@depends(on: "HasSubscribedToNewsletter")
@include(if: $subscribedToNewsletter)
{
subscriberEmail: _httpRequestStringParam(name: "email")
mailchimpUsername: _env(name: "MAILCHIMP_API_CREDENTIALS_USERNAME")
@remove
mailchimpPassword: _env(name: "MAILCHIMP_API_CREDENTIALS_PASSWORD")
@remove
mailchimpListMembersJSONObject: _sendJSONObjectItemHTTPRequest(input: {
url: "https://us7.api.mailchimp.com/3.0/lists/{listCode}/members",
method: POST,
options: {
auth: {
username: $__mailchimpUsername,
password: $__mailchimpPassword
},
json: {
email_address: $__subscriberEmail,
status: "subscribed"
}
}
})
}好多了,对吧?
现在,当在 InstaWP 上创建新的沙箱站点,用户订阅新闻通讯后,该邮箱地址会自动添加到我的 Mailchimp 列表中:

如果您想了解这个 GraphQL query 的工作原理,请查看博客文章👨🏻🏫 自动将 InstaWP 新闻通讯订阅者发送到 Mailchimp 的 GraphQL query