🚀 Envoi automatique des abonnés à la newsletter InstaWP vers Mailchimp

Pour Gato GraphQL, nous utilisons InstaWP pour permettre aux visiteurs d'explorer les extensions commerciales du plugin dans leur propre site sandbox, avant de décider de les acheter.

Il y a deux jours, j'ai mis à niveau l'abonnement InstaWP vers le plan Personnel, afin d'augmenter la durée de vie des sites sandbox de 4 heures à 7 jours, et de pouvoir capturer les e-mails des abonnés à la newsletter lors du test de Gato GraphQL :

Le nouveau plan me donne accès à l'onglet « Advanced Options », où je peux fournir un webhook qui recevra les données d'un site sandbox nouvellement créé :

Je souhaite capturer automatiquement l'e-mail des visiteurs qui ont coché la case « Subscribe to mailing list », et l'envoyer directement à ma liste Mailchimp, sans aucune intervention manuelle.

La documentation du webhook fournit un exemple de capture des données du nouveau site sandbox, basé sur l'utilisation de la plateforme Make pour créer un webhook qui extrait les champs du payload et les envoie vers Google Sheet :

Cependant, ce flux de travail ne satisfait pas entièrement mes besoins, car je ne veux pas dépendre d'un autre fournisseur de services et devoir y saisir mes identifiants Mailchimp. Je veux quelque chose de plus simple.

​

Utiliser InstaWP + Gato GraphQL pour transmettre des données de webhook

La solution m'a sauté aux yeux : je peux utiliser directement InstaWP pour héberger un site réservé, et installer le plugin Gato GraphQL avec le bundle "Power Extensions".

Cette combinaison me offre une instance « API Gateway » à faible coût. Je peux maintenant utiliser cette instance pour recevoir le payload du webhook, extraire les données, et les envoyer à Mailchimp, en codant cette logique dans une requête GraphQL.

Utiliser GraphQL peut ne pas sembler une option évidente au premier abord, car un serveur GraphQL expose normalement un seul endpoint pour recevoir la requête, la résoudre et retourner sa réponse. Bien que possible, il serait très maladroit d'utiliser le seul endpoint comme URL du webhook, tout en passant la requête GraphQL comme paramètre :

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

Pas très élégant, n'est-ce pas ?

Gato GraphQL offre une meilleure façon de gérer cela : les Persisted queries. Une persisted query est similaire à un endpoint REST en ce sens qu'elle est accessible sous sa propre URL, et que son résultat est prédéfini (la requête GraphQL est fournie à l'avance et stockée dans la base de données) :

Désormais, l'URL du webhook ressemblera à ceci :

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

Et la requête GraphQL stockée comme Persisted query est celle-ci :

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

Beaucoup mieux, n'est-ce pas ?

Désormais, lors de la création d'un nouveau site sandbox sur InstaWP, et quand l'utilisateur s'abonne à la newsletter, j'obtiens automatiquement cet e-mail ajouté à ma liste Mailchimp :

Si vous souhaitez apprendre comment fonctionne cette requête GraphQL, consultez l'article de blog 👨🏻‍🏫 Requête GraphQL pour envoyer automatiquement les abonnés à la newsletter InstaWP vers Mailchimp