Logo
Blog

👨🏻‍🏫 InstaWP'den Mailchimp'e bülten abonelerini otomatik olarak gönderen GraphQL query

Leonardo Losoviz
Yazan: Leonardo Losoviz ·

(Bu query'nin bağlamını görmek için 🚀 InstaWP'den Mailchimp'e bülten abonelerini otomatik olarak gönderme blog yazısını okuyun.)

Bu GraphQL query, InstaWP'de "Subscribe to mailing list" onay kutusunu işaretleyen ziyaretçilerin (yeni bir sandbox sitesi oluştururken) e-postasını yakalar ve bu e-postayı bir Mailchimp listesine kaydeder:

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

Alternatif olarak, aboneleri WordPress bülten eklentinize de kaydedebilirsiniz (ör: Noptin veya başka bir eklenti).

Bu GraphQL query'nin nasıl çalıştığına bakalım.

GraphQL query'yi bağımsız birimlere bölmek

Bir GraphQL belgesi birden fazla işlem (queries ve mutations) içerebilir; ancak bunlardan yalnızca biri çalıştırılır. Hangisinin çalıştırılacağını GraphQL uç noktasındaki ?operationName=... parametresiyle belirtiriz; aksi takdirde son işlem çalıştırılır.

Yukarıdaki belgede 2 adet query işlemi bulunduğuna dikkat edin:

  1. HasSubscribedToNewsletter
  2. MaybeCreateContactOnMailchimp

Webhook URL'si ?operationName=MaybeCreateContactOnMailchimp içerir, dolayısıyla çalıştırılacak işlem budur.

Multiple Query Execution uzantısı sayesinde, MaybeCreateContactOnMailchimp, @depends yönergesiyle belirtildiği üzere önce HasSubscribedToNewsletter işlemini çalıştırır:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   # ...
{
  #
}

Bunun yanı sıra, MaybeCreateContactOnMailchimp yalnızca $subscribedToNewsletter değişkeninin değeri true olduğunda koşullu olarak çalıştırılır:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   @include(if: $subscribedToNewsletter)
{
  #
}

$subscribedToNewsletter, HasSubscribedToNewsletter işlemi içinde dışa aktarılan bir dinamik değişkendir:

query HasSubscribedToNewsletter {
  # ...
  subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
    @export(as: "subscribedToNewsletter")
}

Dolayısıyla, MaybeCreateContactOnMailchimp işlemi yalnızca kullanıcı "Subscribe to mailing list" onay kutusunu işaretlediğinde çalıştırılır.

Kullanıcının onay kutusunu işaretleyip işaretlemediğini hesaplamak

InstaWP'nin webhook belgesi, yük verisinin (diğerlerinin yanı sıra) şu alanları içerdiğini belirtir:

  • marketing_optin: Kullanıcının onay kutusunu işaretleyip işaretlemediğini gösterir
  • email: Ziyaretçinin e-postası

Belgede yalnızca marketing_optin alanının onay kutusu işaretlenmediğinde NA değerini aldığı açıklanmaktadır; dolayısıyla bununla çalışmamız gerekecektir.

Kullanıcının onay kutusunu işaretleyip işaretlemediğini anlamak için mantık şöyledir:

  • marketing_optin alanının mevcut olup olmadığını kontrol edin ve
  • Değerinin NA olmadığını kontrol edin

Bu işlem HasSubscribedToNewsletter işleminde hesaplanır. Aşağıda query'nin her satırının ne yaptığını açıklayan yorumlarla birlikte verilmiştir:

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

Bu query'de dikkat çeken birkaç ilginç nokta var.

Global Alanlar

_ ile başlayan alanlara dikkat ettiniz mi? Yani:

  • _httpRequestHasParam
  • _httpRequestStringParam
  • _notEquals
  • _and

Bunlar global alanlardır; GraphQL şemasındaki tüm türlerin altında kullanılabilen alanlardır. Global alanlar veri yerine işlevsellik sunar ve kural olarak _ ile başlar.

Field to Input

$__ ile başlayan değişkenlere dikkat ettiniz mi? Yani:

  • $__subscriberOptIn
  • $__hasSubscriberOptIn
  • $__isNotSubscriberOptInNAValue

Bunlar, aynı işlem içinde kendilerinden önce tanımlanan bir alanın değerini içeren dinamik değişkenlerdir. Örneğin $__subscriberOptIn değişkeni, onun üstünde tanımlanan subscriberOptIn alanının değerini içerir.

Bu özellik, bir alanın çıktısını başka bir alana girdi olarak kullanmaya olanak tanıyan Field to Input uzantısı tarafından sağlanır. GraphQL query içinde işlevsellik bu şekilde oluşturulur.

Query'de isNotSubscriberOptInNAValue alanı, daha önce sorgulanan subscriberOptIn alanının değerinin "NA" olmadığını kontrol eder; subscribedToNewsletter ise hasSubscriberOptIn ve isNotSubscriberOptInNAValue alanlarının değerlerini kapsayan bir AND işlemi hesaplar.

Mailchimp'e bağlanmak

MaybeCreateContactOnMailchimp işlemi, yük verisini çıkarmak ve e-postayı bülten listesine kaydetmek için Mailchimp API'sini çağırma mantığını içerir.

Aşağıda her satırın ne yaptığını açıklayan yorumlarla birlikte işlem verilmiştir:

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

Bu query'de kullanılan özellikleri inceleyelim.

Ortam Değişkenleri

Mailchimp API'sine bağlanırken kimlik bilgilerimizi sağlamamız gerekir. Ancak bunları doğrudan GraphQL query'ye girmek istemeyiz; zira bir yerlerde sızabilirler (ör: bazı günlüklerde yazdırılabilirler).

Bu nedenle, bir ortam değişkeni veya PHP sabiti okumak için _env global alanını (PHP Constants and Environment via Schema uzantısı tarafından sağlanır) ve kimlik bilgilerinin yanıtta yazdırılmasını engellemek için @remove yönergesini (Field Response Removal uzantısı tarafından sağlanır) birlikte kullanırız.

Artık kimlik bilgilerimizi wp-config.php dosyasında tanımlayabiliriz:

define( 'MAILCHIMP_API_CREDENTIALS_USERNAME', '{ username }' );
define( 'MAILCHIMP_API_CREDENTIALS_PASSWORD', '{ password }' );

Mailchimp'e HTTP isteği göndermek

Mantığın son parçası, bir servise HTTP isteği gönderen _sendJSONObjectItemHTTPRequest alanıdır.

Mailchimp API'sine bağlanmak istediğimizden, mailchimpListMembersJSONObject alanı, bir üyeyi Mailchimp listesine abone etmek için belgelerinde belirtildiği üzere Mailchimp'in REST API uç noktasının gerektirdiği verileri sağlar:

  • Bir POST isteği gönderin
  • Uç nokta: https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members
  • Gövde, email_address ve status alanlarını içermelidir

Herhangi bir API ile etkileşim için webhook oluşturmak

Bu yazıdaki GraphQL query, verileri InstaWP'den Mailchimp'e iletir.

İhtiyaç duyduğunuz her kombinasyon için aynı fikri uygulayabilirsiniz: verileri bir kaynak servisten (hangisi olursa olsun) çıkarın, uyarlayın ve bir hedef servise (hangisi olursa olsun) gönderin.

İyi eğlenceler!

Tüm yazılara dön

Bültenimize abone olun

Gato GraphQL'deki tüm güncellemelerden haberdar olun.