🚀 Tự động gửi người đăng ký newsletter từ InstaWP đến Mailchimp

Đối với Gato GraphQL, chúng tôi đang sử dụng InstaWP để cho phép khách truy cập dùng thử các tiện ích mở rộng thương mại của plugin trong một site sandbox của riêng họ, trước khi quyết định mua.

Hai ngày trước, tôi đã nâng cấp gói đăng ký InstaWP lên gói Personal, nhằm tăng thời gian tồn tại của các site sandbox từ 4 giờ lên 7 ngày, và có thể thu thập email của những người đăng ký newsletter khi dùng thử Gato GraphQL:

Gói mới cho phép tôi truy cập tab "Advanced Options", nơi tôi có thể cung cấp một webhook để nhận dữ liệu từ một site sandbox mới được tạo:

Tôi muốn tự động thu thập email từ những khách truy cập đã tích vào ô "Subscribe to mailing list", và gửi thẳng đến danh sách Mailchimp của mình, không cần bất kỳ sự can thiệp thủ công nào.

Tài liệu về webhook cung cấp một ví dụ về việc thu thập dữ liệu của site sandbox mới, dựa trên việc sử dụng nền tảng Make để tạo một webhook trích xuất các trường payload và gửi chúng đến Google Sheet:

Tuy nhiên, quy trình này không đáp ứng đầy đủ nhu cầu của tôi, vì tôi không muốn phụ thuộc vào thêm một nhà cung cấp dịch vụ nữa, và phải nhập thông tin đăng nhập Mailchimp của mình ở đó. Tôi muốn điều gì đó đơn giản hơn.

​

Sử dụng InstaWP + Gato GraphQL để chuyển tiếp dữ liệu webhook

Giải pháp hiện ra ngay trước mắt tôi: tôi có thể trực tiếp sử dụng InstaWP để lưu trữ một site dành riêng, và cài đặt plugin Gato GraphQL với bundle "Power Extensions".

Sự kết hợp này cho tôi một phiên bản "API Gateway" với chi phí thấp. Tôi có thể sử dụng phiên bản này để nhận payload webhook, trích xuất dữ liệu, và gửi đến Mailchimp, bằng cách viết logic này trong một GraphQL query.

Sử dụng GraphQL có thể không phải là lựa chọn hiển nhiên lúc đầu, vì một server GraphQL thông thường chỉ cung cấp một endpoint duy nhất để nhận query, xử lý và trả về kết quả. Dù có thể làm được, nhưng sẽ rất bất tiện khi dùng endpoint duy nhất đó làm URL webhook, trong khi phải truyền GraphQL query qua tham số:

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

Trông không đẹp lắm, phải không?

Gato GraphQL cung cấp một cách tốt hơn để xử lý vấn đề này: Persisted Queries. Một persisted query tương tự như một REST endpoint ở chỗ nó có thể truy cập thông qua URL riêng, và đầu ra của nó được định nghĩa sẵn (GraphQL query được cung cấp trước và lưu trong cơ sở dữ liệu):

Bây giờ, URL webhook sẽ trông như thế này:

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

Và GraphQL query được lưu dưới dạng Persisted query là:

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

Tốt hơn nhiều, phải không?

Bây giờ, khi một site sandbox mới được tạo trên InstaWP và người dùng đăng ký newsletter, tôi sẽ tự động nhận được email đó được thêm vào danh sách Mailchimp của mình:

Nếu bạn muốn tìm hiểu cách GraphQL query này hoạt động, hãy xem bài viết blog 👨🏻‍🏫 GraphQL query để tự động gửi người đăng ký newsletter từ InstaWP đến Mailchimp