๐จ๐ปโ๐ซ InstaWP์ ๋ด์ค๋ ํฐ ๊ตฌ๋ ์๋ฅผ Mailchimp๋ก ์๋ ์ ์กํ๋ GraphQL ์ฟผ๋ฆฌ
(์ด ์ฟผ๋ฆฌ์ ๋ฐฐ๊ฒฝ์ ๋ํด์๋ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ ๐ InstaWP์ ๋ด์ค๋ ํฐ ๊ตฌ๋ ์๋ฅผ Mailchimp๋ก ์๋ ์ ์กํ๊ธฐ ๋ฅผ ์ฝ์ด ๋ณด์ธ์.)
์ด GraphQL ์ฟผ๋ฆฌ๋ InstaWP์์ ์ ์๋๋ฐ์ค ์ฌ์ดํธ๋ฅผ ์์ฑํ ๋ ใSubscribe to mailing listใ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ ํํ ๋ฐฉ๋ฌธ์์ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ์บก์ฒํ์ฌ Mailchimp ๋ชฉ๋ก์ ๊ตฌ๋ ๋ฑ๋กํฉ๋๋ค.
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"
}
}
})
}๋๋, WordPress ๋ด์ค๋ ํฐ ํ๋ฌ๊ทธ์ธ๏ผ์: Noptin ๋ฑ๏ผ์ ๊ตฌ๋ ์๋ฅผ ๋ฑ๋กํ ์๋ ์์ต๋๋ค.
์ด GraphQL ์ฟผ๋ฆฌ๊ฐ ์ด๋ป๊ฒ ์๋ํ๋์ง ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
GraphQL ์ฟผ๋ฆฌ๋ฅผ ๋ ๋ฆฝ์ ์ธ ๋จ์๋ก ๋ถ๋ฆฌํ๊ธฐ
GraphQL ๋ฌธ์์๋ ์ฌ๋ฌ ์คํผ๋ ์ด์
๏ผ์ฟผ๋ฆฌ์ ๋ฎคํ
์ด์
๏ผ์ ํฌํจํ ์ ์์ง๋ง, ์คํ๋๋ ๊ฒ์ ๊ทธ ์ค ํ๋๋ฟ์
๋๋ค. GraphQL ์๋ํฌ์ธํธ์ ?operationName=... ํ๋ผ๋ฏธํฐ๋ก ์ด๋ ๊ฒ์ ์คํํ ์ง ์ง์ ํ๋ฉฐ, ์ง์ ํ์ง ์์ผ๋ฉด ๋ง์ง๋ง ์คํผ๋ ์ด์
์ด ์คํ๋ฉ๋๋ค.
์ ๋ฌธ์์๋ 2๊ฐ์ query ์คํผ๋ ์ด์
์ด ์๋ค๋ ์ ์ ์ฃผ๋ชฉํ์ธ์.
HasSubscribedToNewsletterMaybeCreateContactOnMailchimp
Webhook URL์๋ ?operationName=MaybeCreateContactOnMailchimp ๊ฐ ํฌํจ๋์ด ์์ผ๋ฏ๋ก, ํด๋น ์คํผ๋ ์ด์
์ด ์คํ๋ฉ๋๋ค.
Multiple Query Execution ํ์ฅ ๊ธฐ๋ฅ ๋๋ถ์, MaybeCreateContactOnMailchimp ๋ @depends ๋๋ ํฐ๋ธ์ ์ง์ ๋ ๋๋ก ๋จผ์ HasSubscribedToNewsletter ๋ฅผ ์คํํฉ๋๋ค.
query MaybeCreateContactOnMailchimp
@depends(on: "HasSubscribedToNewsletter")
# ...
{
#
}๋ํ, MaybeCreateContactOnMailchimp ๋ ์กฐ๊ฑด๋ถ๋ก ์คํ๋ฉ๋๋ค. ๋ณ์ $subscribedToNewsletter ์ ๊ฐ์ด true ์ธ ๊ฒฝ์ฐ์๋ง ์คํ๋ฉ๋๋ค.
query MaybeCreateContactOnMailchimp
@depends(on: "HasSubscribedToNewsletter")
@include(if: $subscribedToNewsletter)
{
#
}$subscribedToNewsletter ๋ ๋์ ๋ณ์ ๋ก, HasSubscribedToNewsletter ์คํผ๋ ์ด์
๋ด์์ export๋ฉ๋๋ค.
query HasSubscribedToNewsletter {
# ...
subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
@export(as: "subscribedToNewsletter")
}๋ฐ๋ผ์, MaybeCreateContactOnMailchimp ์คํผ๋ ์ด์
์ ์ฌ์ฉ์๊ฐ ใSubscribe to mailing listใ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ ํํ ๊ฒฝ์ฐ์๋ง ์คํ๋ฉ๋๋ค.
์ฌ์ฉ์๊ฐ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ ํํ๋์ง ํ์ธํ๊ธฐ
InstaWP์ Webhook ๋ฌธ์ ์๋ ํ์ด๋ก๋ ๋ฐ์ดํฐ์ ๋ค์ ํ๋๊ฐ ํฌํจ๋๋ค๊ณ ๋ช ์๋์ด ์์ต๋๋ค๏ผ๋ค๋ฅธ ํ๋๋ ์์ต๋๋ค๏ผ.
marketing_optin: ์ฌ์ฉ์๊ฐ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ ํํ๋์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ ๋๋คemail: ๋ฐฉ๋ฌธ์์ ์ด๋ฉ์ผ ์ฃผ์
๋ฌธ์์๋ ์ฒดํฌ๋ฐ์ค๊ฐ ์ ํ๋์ง ์์ ๊ฒฝ์ฐ marketing_optin ํ๋์ ๊ฐ์ด NA ๊ฐ ๋๋ค๊ณ ๋ง ์ค๋ช
๋์ด ์์ผ๋ฏ๋ก, ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฒ๋ฆฌํด์ผ ํฉ๋๋ค.
์ฌ์ฉ์๊ฐ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ ํํ๋์ง ํ์ธํ๋ ๋ก์ง์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
marketing_optinํ๋๊ฐ ์กด์ฌํ๋์ง ํ์ธํ๊ณ ,- ๊ทธ ๊ฐ์ด
NA๊ฐ ์๋์ง ํ์ธํฉ๋๋ค
์ด ์ฒ๋ฆฌ๋ HasSubscribedToNewsletter ์คํผ๋ ์ด์
์์ ์ด๋ฃจ์ด์ง๋๋ค. ๊ฐ ์ค์ด ๋ฌด์์ ํ๋์ง ์ฃผ์์ผ๋ก ์ค๋ช
ํ ํํ๋ก ํ์ํฉ๋๋ค.
query HasSubscribedToNewsletter {
# Check if field `marketing_optin` is present
hasSubscriberOptIn: _httpRequestHasParam(name: "marketing_optin")
# Get the value of field `marketing_optin`
subscriberOptIn: _httpRequestStringParam(name: "marketing_optin")
# Check if the value of the field is not "NA"
isNotSubscriberOptInNAValue: _notEquals(value1: $__subscriberOptIn, value2: "NA")
# Perform an AND operation: field present && value != "NA"
subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
# Export the result under dynamic variable $subscribedToNewsletter
@export(as: "subscribedToNewsletter")
}์ด ์ฟผ๋ฆฌ์๋ ๋ช ๊ฐ์ง ํฅ๋ฏธ๋ก์ด ์ ์ด ์์ต๋๋ค.
๊ธ๋ก๋ฒ ํ๋
_ ๋ก ์์ํ๋ ํ๋๋ฅผ ๋ฐ๊ฒฌํ์
จ๋์? ๊ตฌ์ฒด์ ์ผ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
_httpRequestHasParam_httpRequestStringParam_notEquals_and
์ด๊ฒ๋ค์ ๊ธ๋ก๋ฒ ํ๋ ๋ก, GraphQL ์คํค๋ง์ ๋ชจ๋ ํ์
์์ ์ฌ์ฉ ๊ฐ๋ฅํ ํ๋์
๋๋ค. ๊ธ๋ก๋ฒ ํ๋๋ ๋ฐ์ดํฐ๊ฐ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ, ๊ด๋ก์ ์ผ๋ก _ ๋ก ์์ํฉ๋๋ค.
Field to Input
$__ ๋ก ์์ํ๋ ๋ณ์๋ฅผ ๋ฐ๊ฒฌํ์
จ๋์? ๊ตฌ์ฒด์ ์ผ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
$__subscriberOptIn$__hasSubscriberOptIn$__isNotSubscriberOptInNAValue
์ด๊ฒ๋ค์ ๋์ ๋ณ์๋ก, ๋์ผํ ์คํผ๋ ์ด์
๋ด์์ ๊ทธ ์ด์ ์ ์ ์๋ ํ๋์ ๊ฐ์ ๋ณด์ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ณ์ $__subscriberOptIn ์๋ ๊ทธ ์์ ์ ์ธ๋ ํ๋ subscriberOptIn ์ ๊ฐ์ด ์ ์ฅ๋ฉ๋๋ค.
์ด ๊ธฐ๋ฅ์ Field to Input ํ์ฅ ๊ธฐ๋ฅ์์ ์ ๊ณตํ๋ฉฐ, ํ ํ๋์ ์ถ๋ ฅ์ ๋ค๋ฅธ ํ๋์ ์ ๋ ฅ์ผ๋ก ์ฌ์ฉํ ์ ์๊ฒ ํด ์ค๋๋ค. ์ด๋ฅผ ํตํด GraphQL ์ฟผ๋ฆฌ ๋ด์ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์์ต๋๋ค.
์ด ์ฟผ๋ฆฌ์์๋, ํ๋ isNotSubscriberOptInNAValue ๊ฐ ์ด์ ์ ์ฟผ๋ฆฌํ ํ๋ subscriberOptIn ์ ๊ฐ์ด "NA" ์ ๊ฐ์ง ์์์ง ํ์ธํ๊ณ , subscribedToNewsletter ๊ฐ ํ๋ hasSubscriberOptIn ๊ณผ isNotSubscriberOptInNAValue ์ ๊ฐ์ ์ด์ฉํ AND ์ฐ์ฐ์ ์ํํฉ๋๋ค.
Mailchimp์ ์ฐ๊ฒฐํ๊ธฐ
MaybeCreateContactOnMailchimp ์คํผ๋ ์ด์
์๋ ํ์ด๋ก๋ ๋ฐ์ดํฐ๋ฅผ ์ถ์ถํ๊ณ Mailchimp API๋ฅผ ํธ์ถํ์ฌ ์ด๋ฉ์ผ ์ฃผ์๋ฅผ ๋ด์ค๋ ํฐ ๋ชฉ๋ก์ ๋ฑ๋กํ๋ ๋ก์ง์ด ํฌํจ๋์ด ์์ต๋๋ค.
๊ฐ ์ค์ด ๋ฌด์์ ํ๋์ง ์ฃผ์์ผ๋ก ์ค๋ช ํ ํํ๋ก ์คํผ๋ ์ด์ ์ ํ์ํฉ๋๋ค.
query MaybeCreateContactOnMailchimp
@depends(on: "HasSubscribedToNewsletter")
@include(if: $subscribedToNewsletter)
{
# Extract form field `email` from the body of the request
subscriberEmail: _httpRequestStringParam(name: "email")
# Obtain Mailchimp credentials, defined in wp-config.php
mailchimpUsername: _env(name: "MAILCHIMP_API_CREDENTIALS_USERNAME")
# Do not print the credentials in the response
@remove
mailchimpPassword: _env(name: "MAILCHIMP_API_CREDENTIALS_PASSWORD")
@remove
# Connect to Mailchimp to add a new member to the list
mailchimpListMembersJSONObject: _sendJSONObjectItemHTTPRequest(input: {
url: "https://us7.api.mailchimp.com/3.0/lists/{listCode}/members",
method: POST,
options: {
# Provide credentials to connect to the API
auth: {
username: $__mailchimpUsername,
password: $__mailchimpPassword
},
# Provide form data
json: {
email_address: $__subscriberEmail,
status: "subscribed"
}
}
})
}์ด ์ฟผ๋ฆฌ์์ ์ฌ์ฉ๋ ๊ธฐ๋ฅ๋ค์ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ํ๊ฒฝ ๋ณ์
Mailchimp API์ ์ฐ๊ฒฐํ ๋๋ ์ธ์ฆ ์ ๋ณด๋ฅผ ์ ๊ณตํด์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ธ์ฆ ์ ๋ณด๋ฅผ GraphQL ์ฟผ๋ฆฌ์ ์ง์ ์ ๋ ฅํ๋ ๊ฒ์ ํผํด์ผ ํฉ๋๋ค. ์ด๋๊ฐ์ ์ ์ถ๋ ๊ฐ๋ฅ์ฑ์ด ์๊ธฐ ๋๋ฌธ์ ๋๋ค๏ผ์: ๋ก๊ทธ์ ์ถ๋ ฅ๋ ์ ์์๏ผ.
๊ทธ๋์ ๊ธ๋ก๋ฒ ํ๋ _env๏ผPHP Constants and Environment via Schema ํ์ฅ ๊ธฐ๋ฅ ์ ๊ณต๏ผ๋ฅผ ์ฌ์ฉํ์ฌ ํ๊ฒฝ ๋ณ์ ๋๋ PHP ์์๋ฅผ ์ฝ๊ณ , @remove ๋๋ ํฐ๋ธ๏ผField Response Removal ํ์ฅ ๊ธฐ๋ฅ ์ ๊ณต๏ผ๋ฅผ ์ฌ์ฉํ์ฌ ์๋ต์ ์ธ์ฆ ์ ๋ณด๊ฐ ์ถ๋ ฅ๋์ง ์๋๋ก ํฉ๋๋ค.
์ด์ ์ธ์ฆ ์ ๋ณด๋ฅผ wp-config.php ์ ์ ์ธํ ์ ์์ต๋๋ค.
define( 'MAILCHIMP_API_CREDENTIALS_USERNAME', '{ username }' );
define( 'MAILCHIMP_API_CREDENTIALS_PASSWORD', '{ password }' );Mailchimp์ HTTP ์์ฒญ ์ ์กํ๊ธฐ
๋ก์ง์ ๋ง์ง๋ง ๊ตฌ์ฑ ์์๋ ํ๋ _sendJSONObjectItemHTTPRequest ๋ก, ํน์ ์๋น์ค์ HTTP ์์ฒญ์ ์ ์กํฉ๋๋ค.
Mailchimp API์ ์ฐ๊ฒฐํ๊ธฐ ์ํด, ํ๋ mailchimpListMembersJSONObject ๋ Mailchimp ๋ชฉ๋ก์ ๋ฉค๋ฒ๋ฅผ ๊ตฌ๋
๋ฑ๋กํ๋ ๋ฌธ์์ ๋ช
์๋ Mailchimp REST API ์๋ํฌ์ธํธ๊ฐ ์๊ตฌํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
POST์์ฒญ ์ ์ก- ์๋ํฌ์ธํธ๋
https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members - ์์ฒญ ๋ณธ๋ฌธ์
email_address์statusํ๋๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค
์์์ API์ ์ฐ๋ํ๋ Webhook ๋ง๋ค๊ธฐ
์ด ๊ฒ์๋ฌผ์ GraphQL ์ฟผ๋ฆฌ๋ InstaWP์์ Mailchimp๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํฉ๋๋ค.
ํ์ํ ์ด๋ค ์กฐํฉ์๋ ๋์ผํ ์์ด๋์ด๋ฅผ ์ ์ฉํ ์ ์์ต๋๋ค. ์์ค ์๋น์ค๏ผ์ด๋ค ๊ฒ์ด๋ ๏ผ์์ ๋ฐ์ดํฐ๋ฅผ ์ถ์ถํ๊ณ , ๊ฐ๊ณตํ ํ, ๋์ ์๋น์ค๏ผ์ด๋ค ๊ฒ์ด๋ ๏ผ๋ก ์ ์กํ์ธ์.
์ฆ๊ฒ๊ฒ ํ์ฉํด ๋ณด์ธ์!