博客

🚀 将 InstaWP 的新闻通讯订阅者自动发送到 Mailchimp

Leonardo Losoviz
作者:Leonardo Losoviz ·

Gato GraphQL 使用 InstaWP,让访客在决定购买前能在自己的沙箱站点中试用插件的商业扩展功能。

两天前,我将 InstaWP 订阅升级到了 Personal 计划,以便将沙箱站点的有效期从 4 小时延长至 7 天,并能在试用 Gato GraphQL 时获取订阅新闻通讯的邮箱地址:

使用 InstaWP 试驾 Gato GraphQL
使用 InstaWP 试驾 Gato GraphQL

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

InstaWP 模板的高级选项
InstaWP 模板的高级选项

我希望自动获取勾选了"Subscribe to mailing list"复选框的访客邮箱,并直接发送到我的 Mailchimp 列表,无需任何人工干预。

Webhook 文档提供了一个获取新沙箱站点数据的示例,基于使用 Make 平台创建 Webhook,提取 payload 字段并发送到 Google Sheet:

Make + InstaWP

然而,这个工作流并不能完全满足我的需求,因为我不想依赖另一个服务提供商,也不想在那里输入我的 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 预先提供并存储在数据库中):

Persisted 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 列表中:

邮箱地址自动添加到 Mailchimp 列表
邮箱地址自动添加到 Mailchimp 列表

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


订阅我们的新闻通讯

及时了解 Gato GraphQL 的所有更新。