🚀 Automatyczne wysyłanie subskrybentów newslettera z InstaWP do Mailchimp

Dla Gato GraphQL używamy InstaWP, aby umożliwić odwiedzającym testowanie komercyjnych rozszerzeń wtyczki na własnym sandboxowym serwisie, przed podjęciem decyzji o zakupie.

Dwa dni temu uaktualniłem subskrypcję InstaWP do planu Personal, aby wydłużyć żywotność sandboxowych serwisów z 4 godzin do 7 dni i móc przechwytywać adresy e-mail osób zapisujących się do newslettera podczas testowania Gato GraphQL:

Nowy plan daje mi dostęp do zakładki "Advanced Options", gdzie mogę podać webhook, który będzie odbierał dane z nowo utworzonego sandboxowego serwisu:

Chciałbym automatycznie przechwytywać adresy e-mail odwiedzających, którzy zaznaczyli pole wyboru "Subscribe to mailing list", i wysyłać je bezpośrednio do mojej listy Mailchimp, bez żadnej ręcznej interwencji.

Dokumentacja webhooka zawiera przykład przechwytywania danych nowego sandboxowego serwisu, oparty na platformie Make do tworzenia webhooka, który wyodrębnia pola z payloadu i wysyła je do Google Sheet:

Jednak ten przepływ pracy nie w pełni odpowiada moim potrzebom, ponieważ nie chcę uzależniać się od kolejnego dostawcy usług i musieć wprowadzać tam swoich danych uwierzytelniających Mailchimp. Chcę czegoś prostszego.

​

Używając InstaWP + Gato GraphQL do przekazywania danych webhooka

Rozwiązanie pojawiło się wprost przed moimi oczami: mogę bezpośrednio użyć InstaWP do hostowania dedykowanego serwisu i zainstalować wtyczkę Gato GraphQL z pakietem "Power Extensions".

Ta kombinacja zapewnia mi instancję "API Gateway" po niskich kosztach. Mogę teraz używać tej instancji do odbierania payloadu webhooka, wyodrębniania danych i wysyłania ich do Mailchimp, kodując tę logikę w query GraphQL.

Używanie GraphQL może nie być oczywistą opcją na pierwszy rzut oka, ponieważ serwer GraphQL normalnie udostępnia jeden endpoint do odbierania query, rozwiązywania jej i zwracania odpowiedzi. Choć jest to możliwe, używanie tego jedynego endpointu jako adresu URL webhooka, przekazując query GraphQL jako parametr, byłoby bardzo niezgrabne:

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" } } }) }Copy

Niezbyt eleganckie, prawda?

Gato GraphQL oferuje lepszy sposób radzenia sobie z tym: Persisted queries. Persisted query jest podobna do endpointu REST w tym sensie, że jest dostępna pod własnym adresem URL, a jej wynik jest z góry określony (query GraphQL jest dostarczana z wyprzedzeniem i przechowywana w bazie danych):

Teraz adres URL webhooka będzie wyglądał tak:

https://my-api-gateway.instawp.xyz/graphql-query/process-instawp-sandbox-webhook/?operationName=MaybeCreateContactOnMailchimpCopy

A query GraphQL przechowywana jako Persisted query jest następująca:

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"
      }
    }
  })
}Copy

O wiele lepiej, prawda?

Teraz, gdy nowy sandboxowy serwis jest tworzony w InstaWP i użytkownik zapisuje się do newslettera, automatycznie otrzymuję ten adres e-mail dodany do mojej listy Mailchimp:

Jeśli chcesz dowiedzieć się, jak działa ta query GraphQL, sprawdź post na blogu 👨🏻‍🏫 Query GraphQL do automatycznego wysyłania subskrybentów newslettera z InstaWP do Mailchimp