🚀 InstaWP'den Mailchimp'e bülten abonelerini otomatik olarak gönderme

Gato GraphQL için, ziyaretçilerin satın alma kararı vermeden önce eklentinin ticari uzantılarını kendi sandbox sitelerinde denemelerine olanak tanımak amacıyla InstaWP kullanıyoruz.

İki gün önce InstaWP aboneliğimi Personal planına yükselttim; böylece sandbox sitelerin ömrünü 4 saatten 7 güne çıkardım ve Gato GraphQL'i test ederken bültene abone olan e-postaları yakalayabilir hale geldim:

Yeni plan bana "Advanced Options" sekmesine erişim sağlıyor; burada yeni oluşturulan bir sandbox sitenin verilerini alacak bir webhook belirtebiliyorum:

"Subscribe to mailing list" onay kutusunu işaretleyen ziyaretçilerin e-postalarını otomatik olarak yakalamak ve herhangi bir manuel müdahale olmaksızın doğrudan Mailchimp listeme göndermek istiyorum.

Webhook belgeleri, payload alanlarını çıkarıp Google Sheet'e gönderen bir webhook oluşturmak için Make platformunu kullanan bir sandbox site veri yakalama örneği sunuyor:

Ancak bu iş akışı ihtiyaçlarımı tam olarak karşılamıyor; başka bir hizmet sağlayıcısına bağımlı olmak ve Mailchimp kimlik bilgilerimi oraya girmek istemiyorum. Daha basit bir şey istiyorum.

​

Webhook verilerini iletmek için InstaWP + Gato GraphQL kullanımı

Çözüm gözümün önünde belirdi: Doğrudan InstaWP'yi kullanarak ayrılmış bir site barındırabilir ve Gato GraphQL eklentisini "Power Extensions" paketiyle kurabilirdim.

Bu kombinasyon bana ucuz bir "API Gateway" örneği sağlıyor. Artık bu örneği webhook payload'ını almak, verileri çıkarmak ve bir GraphQL queries içinde bu mantığı kodlayarak Mailchimp'e göndermek için kullanabiliyorum.

GraphQL kullanmak ilk başta açık bir seçenek gibi görünmeyebilir; çünkü bir GraphQL sunucusu normalde queries'i almak, çözümlemek ve yanıtını döndürmek için tek bir endpoint sunar. Mümkün olsa da, tek endpoint'i webhook URL'si olarak kullanmak ve GraphQL queries'ini parametre olarak iletmek oldukça zahmetli olurdu:

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

Pek güzel değil, değil mi?

Gato GraphQL bununla başa çıkmanın daha iyi bir yolunu sunuyor: Persisted Queries. Persisted query, REST endpoint'e benzer şekilde kendi URL'si altında erişilebilir olan ve çıktısı önceden belirlenmiş bir yapıdır (GraphQL queries önceden sağlanır ve veritabanında saklanır):

Artık webhook URL'si şu şekilde görünecek:

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

Persisted query olarak saklanan GraphQL queries ise şu şekilde:

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

Çok daha iyi, değil mi?

Artık InstaWP'de yeni bir sandbox site oluşturulduğunda ve kullanıcı bültene kaydolduğunda, o e-posta Mailchimp listeme otomatik olarak ekleniyor:

Bu GraphQL queries'inin nasıl çalıştığını öğrenmek istiyorsanız, şu blog yazısına göz atın: 👨🏻‍🏫 InstaWP'den Mailchimp'e bülten abonelerini otomatik olarak göndermek için GraphQL queries