🚀 InstaWP 뉴스레터 구독자를 Mailchimp로 자동 전송하기

Gato GraphQL에서는 InstaWP를 활용하여 방문자들이 구매를 결정하기 전에 자신만의 샌드박스 사이트에서 플러그인의 상용 확장 기능을 체험할 수 있도록 하고 있습니다.

이틀 전, 샌드박스 사이트의 유효 기간을 4시간에서 7일로 늘리고, Gato GraphQL을 체험할 때 뉴스레터에 등록한 이메일 주소를 수집할 수 있도록 InstaWP 구독을 Personal 플랜으로 업그레이드했습니다.

새 플랜에서는 「Advanced Options」 탭에 접근할 수 있으며, 새로 생성된 샌드박스 사이트의 데이터를 수신할 웹훅을 설정할 수 있습니다.

「Subscribe to mailing list」 체크박스를 선택한 방문자의 이메일 주소를 자동으로 수집하여, 수동 작업 없이 바로 Mailchimp 목록으로 전송하고 싶었습니다.

웹훅 문서에는 새 샌드박스 사이트 데이터를 수집하는 예시가 나와 있으며, Make 플랫폼을 사용해 웹훅을 만들고 페이로드 필드를 추출하여 Google Sheet로 전송하는 방법이 설명되어 있습니다.

Make + InstaWP

그러나 이 워크플로는 제 요구를 완전히 충족시키지 못했습니다. 또 다른 서비스 제공업체에 의존하고 싶지 않고, 그곳에 Mailchimp 인증 정보를 입력하는 것도 피하고 싶었기 때문입니다. 더 간단한 방법이 필요했습니다.

InstaWP + Gato GraphQL을 사용하여 웹훅 데이터 전달하기

해결책은 바로 눈앞에 있었습니다. InstaWP를 직접 사용하여 전용 사이트를 호스팅하고, 「Power Extensions」 번들과 함께 Gato GraphQL 플러그인을 설치하면 됩니다.

이 조합으로 저렴하게 「API Gateway」 인스턴스를 확보할 수 있습니다. 이 인스턴스를 사용하여 웹훅 페이로드를 수신하고, 데이터를 추출하며, GraphQL 쿼리로 코딩된 로직을 통해 Mailchimp로 전송할 수 있습니다.

GraphQL을 사용하는 것이 처음에는 명확한 선택지로 보이지 않을 수 있습니다. GraphQL 서버는 일반적으로 쿼리를 수신하고, 처리하며, 응답을 반환하는 단일 엔드포인트를 노출하기 때문입니다. 가능하기는 하지만, GraphQL 쿼리를 파라미터로 전달하면서 단일 엔드포인트를 웹훅 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 엔드포인트와 유사합니다.

Persisted query 편집기

이제 웹훅 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 쿼리를 확인해 보세요.

🚀 InstaWP 뉴스레터 구독자를 Mailchimp로 자동 전송하기

​InstaWP + Gato GraphQL을 사용하여 웹훅 데이터 전달하기

뉴스레터 구독하기

InstaWP + Gato GraphQL을 사용하여 웹훅 데이터 전달하기