Logo
Blog

👨🏻‍🏫 Query GraphQL untuk secara otomatis mengirim pelanggan newsletter dari InstaWP ke Mailchimp

Leonardo Losoviz
Oleh Leonardo Losoviz ·

(Baca posting blog 🚀 Mengirim pelanggan newsletter dari InstaWP ke Mailchimp secara otomatis untuk melihat konteks dari query ini.)

Query GraphQL ini menangkap email dari pengunjung yang mencentang kotak "Subscribe to mailing list" dari InstaWP (saat membuat sandbox baru), dan mendaftarkan email tersebut ke daftar 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"
      }
    }
  })
}

Sebagai alternatif, Anda juga dapat mendaftarkan pelanggan di plugin newsletter WordPress Anda (misalnya: Noptin atau lainnya).

Mari kita lihat bagaimana query GraphQL ini bekerja.

Memecah query GraphQL menjadi unit-unit independen

Sebuah dokumen GraphQL dapat berisi beberapa operasi (queries dan mutations), tetapi hanya satu yang akan dieksekusi. Kita menunjukkan operasi mana yang dieksekusi melalui parameter ?operationName=... pada endpoint GraphQL; jika tidak, operasi terakhir yang akan dieksekusi.

Perhatikan bahwa ada 2 operasi query dalam dokumen di atas:

  1. HasSubscribedToNewsletter
  2. MaybeCreateContactOnMailchimp

URL webhook mengandung ?operationName=MaybeCreateContactOnMailchimp, sehingga itulah operasi yang akan dieksekusi.

Berkat ekstensi Multiple Query Execution, MaybeCreateContactOnMailchimp akan terlebih dahulu mengeksekusi HasSubscribedToNewsletter, seperti yang ditunjukkan melalui direktif @depends:

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

Selain itu, MaybeCreateContactOnMailchimp akan dieksekusi secara kondisional, hanya jika nilai variabel $subscribedToNewsletter adalah true:

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

$subscribedToNewsletter adalah sebuah variabel dinamis, yang diekspor dalam operasi HasSubscribedToNewsletter:

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

Oleh karena itu, operasi MaybeCreateContactOnMailchimp hanya akan dieksekusi ketika pengguna telah mencentang kotak "Subscribe to mailing list".

Menghitung apakah pengguna mencentang kotak

Dokumentasi webhook InstaWP menunjukkan bahwa data payload mengandung field-field berikut (di antara lainnya):

  • marketing_optin: Menunjukkan apakah pengguna mencentang kotak
  • email: Email pengunjung

Dokumentasi hanya menjelaskan bahwa field marketing_optin bernilai NA ketika kotak tidak dicentang, sehingga kita harus bekerja dengan itu.

Untuk mengetahui apakah pengguna mencentang kotak, logikanya adalah:

  • Periksa apakah field marketing_optin hadir, dan
  • Periksa bahwa nilainya bukan NA

Ini dihitung dalam operasi HasSubscribedToNewsletter. Berikut adalah operasinya beserta komentar, yang menjelaskan apa yang dilakukan setiap baris dalam query:

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

Ada beberapa hal menarik dalam query ini.

Global Fields

Apakah Anda memperhatikan field-field yang dimulai dengan _? Yaitu:

  • _httpRequestHasParam
  • _httpRequestStringParam
  • _notEquals
  • _and

Ini adalah global fields, yaitu field yang tersedia di semua tipe dalam skema GraphQL. Global fields menawarkan fungsionalitas alih-alih data, dan sesuai konvensi dimulai dengan _.

Field to Input

Apakah Anda memperhatikan variabel-variabel yang dimulai dengan $__? Yaitu:

  • $__subscriberOptIn
  • $__hasSubscriberOptIn
  • $__isNotSubscriberOptInNAValue

Ini adalah variabel dinamis yang mengandung nilai field yang didefinisikan sebelumnya dalam operasi yang sama. Misalnya, variabel $__subscriberOptIn mengandung nilai field subscriberOptIn yang dideklarasikan di atasnya.

Ini adalah fitur yang disediakan oleh ekstensi Field to Input, yang memungkinkan penggunaan output sebuah field sebagai input ke field lain. Inilah cara kita dapat menciptakan fungsionalitas di dalam query GraphQL.

Dalam query, field isNotSubscriberOptInNAValue memeriksa bahwa nilai field subscriberOptIn yang di-query sebelumnya tidak sama dengan "NA", dan subscribedToNewsletter menghitung operasi AND yang melibatkan nilai field hasSubscriberOptIn dan isNotSubscriberOptInNAValue.

Terhubung ke Mailchimp

Operasi MaybeCreateContactOnMailchimp mengandung logika untuk mengekstrak data payload, dan memanggil API Mailchimp untuk mendaftarkan email ke daftar newsletter.

Berikut adalah operasinya beserta komentar, yang menjelaskan apa yang dilakukan setiap baris:

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

Mari kita jelajahi fitur-fitur yang digunakan dalam query ini.

Variabel Lingkungan

Kita perlu menyediakan kredensial saat terhubung ke API Mailchimp. Namun, kita tidak ingin langsung memasukkannya ke dalam query GraphQL, karena bisa bocor di suatu tempat (misalnya: bisa tercetak dalam suatu log).

Itulah mengapa kita menggunakan global field _env (disediakan oleh ekstensi PHP Constants and Environment via Schema) untuk membaca variabel lingkungan atau konstanta PHP, bersama dengan direktif @remove (disediakan oleh ekstensi Field Response Removal) untuk melewati pencetakan kredensial dalam respons.

Sekarang, kita dapat mendeklarasikan kredensial kita di wp-config.php:

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

Mengirim permintaan HTTP ke Mailchimp

Bagian terakhir dari logika adalah field _sendJSONObjectItemHTTPRequest, yang mengirim permintaan HTTP ke suatu layanan.

Karena kita ingin terhubung ke API Mailchimp, field mailchimpListMembersJSONObject menyediakan data yang dibutuhkan oleh endpoint REST API Mailchimp, seperti yang ditunjukkan dalam dokumentasi untuk mendaftarkan anggota ke daftar Mailchimp:

  • Kirim permintaan POST
  • Endpointnya adalah https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members
  • Body harus menyertakan field email_address dan status

Membuat webhook untuk berinteraksi dengan API apa pun

Query GraphQL dalam posting ini meneruskan data dari InstaWP ke Mailchimp.

Anda dapat menerapkan ide yang sama untuk kombinasi apa pun yang Anda butuhkan, mengekstrak data dari layanan sumber (apa pun itu), mengadaptasinya, dan mengirimkannya ke layanan tujuan (apa pun itu).

Selamat berkreasi!

Kembali ke semua artikel

Berlangganan newsletter kami

Tetap update dengan semua pembaruan Gato GraphQL.