🚀 ส่งผู้สมัครรับจดหมายข่าวจาก InstaWP ไปยัง Mailchimp โดยอัตโนมัติ

สำหรับ Gato GraphQL เราใช้ InstaWP เพื่อให้ผู้เยี่ยมชมสามารถทดลองใช้ส่วนขยายเชิงพาณิชย์ของปลั๊กอินในไซต์แซนด์บ็อกซ์ของตนเองก่อนตัดสินใจซื้อ

เมื่อสองวันก่อน ฉันได้อัปเกรดการสมัครสมาชิก InstaWP เป็นแผน Personal เพื่อขยายอายุการใช้งานของไซต์แซนด์บ็อกซ์จาก 4 ชั่วโมงเป็น 7 วัน และสามารถดักจับอีเมลที่สมัครรับจดหมายข่าวเมื่อทดสอบ Gato GraphQL:

แผนใหม่นี้ให้ฉันเข้าถึงแท็บ "Advanced Options" ซึ่งฉันสามารถระบุ Webhook ที่จะรับข้อมูลจากไซต์แซนด์บ็อกซ์ที่เพิ่งสร้างขึ้น:

ฉันต้องการดักจับอีเมลจากผู้เยี่ยมชมที่ติ๊กช่องกาเครื่องหมาย "Subscribe to mailing list" และส่งตรงไปยังรายการ Mailchimp ของฉันโดยอัตโนมัติ โดยไม่ต้องมีการแทรกแซงด้วยตนเอง

เอกสารประกอบสำหรับ Webhook ให้ตัวอย่างการดักจับข้อมูลไซต์แซนด์บ็อกซ์ใหม่ โดยอาศัยแพลตฟอร์ม Make ในการสร้าง Webhook ที่ดึงฟิลด์ payload และส่งไปยัง Google Sheet:

Make + InstaWP

อย่างไรก็ตาม เวิร์กโฟลว์นี้ไม่ตอบสนองความต้องการของฉันได้อย่างครบถ้วน เพราะฉันไม่ต้องการพึ่งพาผู้ให้บริการอีกรายหนึ่ง และต้องป้อนข้อมูลประจำตัว Mailchimp ไว้ที่นั่น ฉันต้องการบางสิ่งที่เรียบง่ายกว่านี้

ใช้ InstaWP + Gato GraphQL เพื่อส่งต่อข้อมูล Webhook

วิธีแก้ปัญหาปรากฏขึ้นต่อหน้าฉันทันที: ฉันสามารถใช้ InstaWP โดยตรงเพื่อโฮสต์ไซต์สำรอง และติดตั้งปลั๊กอิน Gato GraphQL พร้อมกับชุด "Power Extensions"

การผสมผสานนี้ทำให้ฉันได้ instance "API Gateway" ในราคาประหยัด ฉันสามารถใช้ instance นี้รับ payload ของ Webhook ดึงข้อมูล และส่งไปยัง Mailchimp โดยเข้ารหัสลอจิกนี้ใน GraphQL query

การใช้ GraphQL อาจไม่ใช่ตัวเลือกที่ชัดเจนในตอนแรก เพราะเซิร์ฟเวอร์ GraphQL โดยปกติจะเปิดเผย endpoint เดียวเพื่อรับ query แก้ไข และส่งคืนการตอบสนอง แม้จะเป็นไปได้ แต่การใช้ endpoint เดียวเป็น URL ของ Webhook ขณะส่ง GraphQL query ผ่าน param จะเป็นเรื่องที่ยุ่งยากมาก:

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

ดูไม่สวยงามใช่ไหม?

Gato GraphQL มีวิธีที่ดีกว่าในการจัดการกับเรื่องนี้: Persisted Queries Persisted query คล้ายกับ REST endpoint ตรงที่สามารถเข้าถึงได้ภายใต้ URL ของตัวเอง และผลลัพธ์ถูกกำหนดไว้ล่วงหน้า (GraphQL query ถูกระบุไว้ล่วงหน้าและจัดเก็บในฐานข้อมูล):

Persisted query editor

ตอนนี้ URL ของ Webhook จะมีลักษณะดังนี้:

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

และ GraphQL query ที่จัดเก็บเป็น Persisted 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/{listCode}/members",
    method: POST,
    options: {
      auth: {
        username: $__mailchimpUsername,
        password: $__mailchimpPassword
      },
      json: {
        email_address: $__subscriberEmail,
        status: "subscribed"
      }
    }
  })
}

ดีขึ้นมากใช่ไหม?

ตอนนี้เมื่อมีการสร้างไซต์แซนด์บ็อกซ์ใหม่บน InstaWP และผู้ใช้สมัครรับจดหมายข่าว ฉันจะได้รับอีเมลนั้นเพิ่มเข้ามาในรายการ Mailchimp ของฉันโดยอัตโนมัติ:

หากคุณสนใจเรียนรู้วิธีการทำงานของ GraphQL query นี้ โปรดอ่านบทความบล็อก 👨🏻‍🏫 GraphQL query เพื่อส่งผู้สมัครรับจดหมายข่าวจาก InstaWP ไปยัง Mailchimp โดยอัตโนมัติ

🚀 ส่งผู้สมัครรับจดหมายข่าวจาก InstaWP ไปยัง Mailchimp โดยอัตโนมัติ

​ใช้ InstaWP + Gato GraphQL เพื่อส่งต่อข้อมูล Webhook

สมัครรับจดหมายข่าวของเรา

ใช้ InstaWP + Gato GraphQL เพื่อส่งต่อข้อมูล Webhook