🚀 InstaWPのニュースレター購読者をMailchimpへ自動送信する
Gato GraphQLでは、InstaWPを活用して、訪問者がプラグインの商用拡張機能を購入前に自分専用のサンドボックスサイトで試せるようにしています。
2日前、サンドボックスサイトの有効期間を4時間から7日間に延ばし、Gato GraphQLをテストする際にニュースレターへ登録したメールアドレスを取得できるよう、InstaWPのサブスクリプションをPersonalプランへアップグレードしました。
新プランでは「Advanced Options」タブにアクセスでき、新規作成されたサンドボックスサイトのデータを受け取るWebhookを設定できます。
「Subscribe to mailing list」チェックボックスにチェックを入れた訪問者のメールアドレスを自動的に取得し、手動の操作なしに直接Mailchimpのリストへ送信したいと考えています。
Webhookのドキュメントには、新しいサンドボックスサイトのデータを取得する例が記載されており、Makeプラットフォームを使ってWebhookを作成し、ペイロードのフィールドを抽出してGoogle Sheetへ送信する方法が示されています。
ただし、このワークフローは私のニーズを完全に満たしていません。別のサービスプロバイダーに依存したくないし、そこにMailchimpの認証情報を入力するのも避けたいからです。もっとシンプルな方法が欲しいのです。
InstaWP + Gato GraphQLを使ってWebhookデータを転送する
解決策はすぐに目の前に現れました。InstaWPを直接使って専用サイトをホストし、**「Power Extensions」**バンドルとともにGato GraphQLプラグインをインストールすればよいのです。
この組み合わせにより、低コストで「API Gateway」インスタンスが手に入ります。このインスタンスを使ってWebhookのペイロードを受け取り、データを抽出し、GraphQLクエリでコーディングしたロジックによってMailchimpへ送信できます。
GraphQLを使うことは最初は明らかな選択肢に見えないかもしれません。GraphQLサーバーは通常、クエリを受け取り、解決し、レスポンスを返す単一のエンドポイントを公開するからです。可能ではあるものの、GraphQLクエリをパラメーターとして渡しながら単一エンドポイントをWebhookのURLとして使うのは非常に扱いにくいでしょう。
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は、独自のURLでアクセスでき、出力が事前定義されている（GraphQLクエリがあらかじめ提供されてデータベースに保存されている）という点で、RESTエンドポイントに似ています。
これで、WebhookのURLは次のようになります。
https://my-api-gateway.instawp.xyz/graphql-query/process-instawp-sandbox-webhook/?operationName=MaybeCreateContactOnMailchimpそして、Persisted Queryとして保存されたGraphQLクエリはこちらです。
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クエリの仕組みについて詳しく知りたい方は、ブログ記事👨🏻🏫 InstaWPのニュースレター購読者をMailchimpへ自動送信するGraphQLクエリをご覧ください。