🚀 Invio automatico degli iscritti alla newsletter da InstaWP a Mailchimp

Per Gato GraphQL utilizziamo InstaWP per consentire ai visitatori di provare le estensioni commerciali del plugin in un sito sandbox tutto loro, prima di decidere se acquistarle.

Due giorni fa ho aggiornato l'abbonamento InstaWP al piano Personal, per aumentare la durata dei siti sandbox da 4 ore a 7 giorni e poter acquisire le e-mail degli iscritti alla newsletter durante la prova di Gato GraphQL:

Il nuovo piano mi dà accesso alla scheda « Advanced Options », dove posso fornire un webhook che riceverà i dati di un sito sandbox appena creato:

Voglio acquisire automaticamente l'e-mail dei visitatori che hanno selezionato la casella « Subscribe to mailing list » e inviarla direttamente alla mia lista Mailchimp, senza alcun intervento manuale.

La documentazione del webhook fornisce un esempio di acquisizione dei dati del nuovo sito sandbox, basato sull'utilizzo della piattaforma Make per creare un webhook che estrae i campi del payload e li invia a Google Sheet:

Tuttavia, questo flusso di lavoro non soddisfa pienamente le mie esigenze, perché non voglio dipendere da un ulteriore fornitore di servizi e dover inserire lì le mie credenziali Mailchimp. Voglio qualcosa di più semplice.

​

Usare InstaWP + Gato GraphQL per inoltrare i dati di un webhook

La soluzione mi è saltata subito agli occhi: posso usare direttamente InstaWP per ospitare un sito riservato e installare il plugin Gato GraphQL con il bundle "Power Extensions".

Questa combinazione mi offre un'istanza « API Gateway » a basso costo. Ora posso usare questa istanza per ricevere il payload del webhook, estrarre i dati e inviarli a Mailchimp, codificando questa logica in una query GraphQL.

Usare GraphQL potrebbe non sembrare un'opzione ovvia a prima vista, perché un server GraphQL espone normalmente un singolo endpoint per ricevere la query, risolverla e restituire la sua risposta. Sebbene sia possibile, sarebbe molto scomodo usare il singolo endpoint come URL del webhook, passando al contempo la query GraphQL come parametro:

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

Non molto elegante, vero?

Gato GraphQL offre un modo migliore per gestire tutto questo: le Persisted queries. Una persisted query è simile a un endpoint REST nel senso che è accessibile tramite il proprio URL e il suo output è predefinito (la query GraphQL viene fornita in anticipo e memorizzata nel database):

Ora l'URL del webhook avrà questo aspetto:

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

E la query GraphQL memorizzata come Persisted query è questa:

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

Molto meglio, vero?

Ora, quando viene creato un nuovo sito sandbox su InstaWP e l'utente si iscrive alla newsletter, ottengo automaticamente quell'e-mail aggiunta alla mia lista Mailchimp:

Se vuoi imparare come funziona questa query GraphQL, dai un'occhiata all'articolo del blog 👨🏻‍🏫 Query GraphQL per inviare automaticamente gli iscritti alla newsletter da InstaWP a Mailchimp