🚀 Mengirim pelanggan newsletter InstaWP ke Mailchimp secara otomatis

Untuk Gato GraphQL, kami menggunakan InstaWP agar pengunjung dapat mencoba ekstensi komersial plugin dalam sandbox mereka sendiri, sebelum memutuskan untuk membelinya.

Dua hari lalu saya meningkatkan langganan InstaWP ke paket Personal, untuk memperpanjang masa hidup sandbox dari 4 jam menjadi 7 hari, dan dapat menangkap email yang berlangganan newsletter saat mencoba Gato GraphQL:

Paket baru ini memberi saya akses ke tab "Advanced Options", di mana saya dapat menyediakan webhook yang akan menerima data dari sandbox yang baru dibuat:

Saya ingin secara otomatis menangkap email dari pengunjung yang mencentang kotak "Subscribe to mailing list", dan mengirimkannya langsung ke daftar Mailchimp saya, tanpa intervensi manual apa pun.

Dokumentasi webhook memberikan contoh penangkapan data sandbox baru, berdasarkan penggunaan platform Make untuk membuat webhook yang mengekstrak kolom payload dan mengirimkannya ke Google Sheet:

Make + InstaWP

Namun, alur kerja ini tidak sepenuhnya memenuhi kebutuhan saya, karena saya tidak ingin bergantung pada penyedia layanan lain lagi, dan harus memasukkan kredensial Mailchimp saya di sana. Saya menginginkan sesuatu yang lebih sederhana.

Menggunakan InstaWP + Gato GraphQL untuk meneruskan data webhook

Solusinya langsung terlihat oleh saya: saya dapat langsung menggunakan InstaWP untuk meng-host sebuah situs yang dicadangkan, dan menginstal plugin Gato GraphQL dengan bundle "Power Extensions".

Kombinasi ini memberi saya instansi "API Gateway" dengan biaya murah. Saya kini dapat menggunakan instansi ini untuk menerima payload webhook, mengekstrak data, dan mengirimkannya ke Mailchimp, dengan mengkodekan logika ini dalam sebuah GraphQL query.

Menggunakan GraphQL mungkin bukan pilihan yang jelas pada awalnya, karena server GraphQL biasanya mengekspos satu endpoint tunggal untuk menerima query, menyelesaikannya, dan mengembalikan responsnya. Meskipun mungkin dilakukan, akan sangat canggung menggunakan endpoint tunggal tersebut sebagai URL webhook, sambil meneruskan GraphQL query sebagai parameter:

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

Tidak bagus, bukan?

Gato GraphQL menawarkan cara yang lebih baik untuk menangani ini: Persisted Queries. Sebuah persisted query mirip dengan endpoint REST karena dapat diakses melalui URL-nya sendiri, dan outputnya telah ditentukan sebelumnya (GraphQL query disediakan lebih awal dan disimpan dalam database):

Editor persisted query

Kini, URL webhook akan terlihat seperti ini:

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

Dan GraphQL query yang disimpan sebagai Persisted query adalah ini:

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

Jauh lebih baik, bukan?

Kini, saat membuat sandbox baru di InstaWP, dan pengguna mendaftar ke newsletter, saya secara otomatis mendapatkan email tersebut ditambahkan ke daftar Mailchimp saya:

Jika Anda tertarik untuk mempelajari cara kerja GraphQL query ini, lihat postingan blog 👨🏻‍🏫 GraphQL query untuk mengirim pelanggan newsletter InstaWP ke Mailchimp secara otomatis

🚀 Mengirim pelanggan newsletter InstaWP ke Mailchimp secara otomatis

​Menggunakan InstaWP + Gato GraphQL untuk meneruskan data webhook

Berlangganan newsletter kami

Menggunakan InstaWP + Gato GraphQL untuk meneruskan data webhook