🚀 Enviando automáticamente los suscriptores del newsletter de InstaWP a Mailchimp

Para Gato GraphQL, estamos usando InstaWP para permitir a los visitantes jugar con las extensiones comerciales del plugin en un sandbox propio, antes de decidir comprarlas.

Hace dos días actualicé la suscripción a InstaWP al plan Personal, para aumentar la duración de los sandbox de 4 horas a 7 días, y poder capturar los emails suscritos al newsletter al probar Gato GraphQL:

El nuevo plan me da acceso a la pestaña "Advanced Options", donde puedo proporcionar un webhook que recibirá los datos de un sandbox recién creado:

Me gustaría capturar automáticamente el email de los visitantes que marcaron la casilla "Subscribe to mailing list", y enviarlo directamente a mi lista de Mailchimp, sin ninguna intervención manual.

La documentación del webhook proporciona un ejemplo de captura de datos del nuevo sandbox, basado en usar la plataforma Make para crear un webhook que extrae los campos del payload y los envía a Google Sheet:

Sin embargo, este flujo no satisface completamente mis necesidades, ya que no quiero depender de otro proveedor de servicios más, y tener que introducir mis credenciales de Mailchimp allí. Quiero algo más sencillo.

​

Usando InstaWP + Gato GraphQL para reenviar datos de webhook

La solución me saltó a la vista: puedo usar directamente InstaWP para alojar un sitio reservado, e instalar el plugin Gato GraphQL con el bundle "Power Extensions".

Esta combinación me da una instancia de "API Gateway" a bajo coste. Ahora puedo usar esta instancia para recibir el payload del webhook, extraer los datos, y enviarlos a Mailchimp, programando esta lógica en una consulta GraphQL.

Usar GraphQL puede no ser una opción obvia al principio, porque un servidor GraphQL normalmente expone un único endpoint para recibir la consulta, resolverla, y devolver su respuesta. Aunque es posible, sería muy incómodo usar el único endpoint como URL del webhook, pasando la consulta GraphQL como parámetro:

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

No es bonito, ¿verdad?

Gato GraphQL ofrece una mejor forma de lidiar con esto: Persisted queries. Una persisted query es similar a un endpoint REST en que es accesible bajo su propia URL, y su salida está predefinida (la consulta GraphQL se proporciona por adelantado y se almacena en la base de datos):

Ahora, la URL del webhook tendrá este aspecto:

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

Y la consulta GraphQL almacenada como Persisted query es esta:

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

Mucho mejor, ¿verdad?

Ahora, al crear un nuevo sandbox en InstaWP, y cuando el usuario se suscribe al newsletter, automáticamente obtengo ese email añadido a mi lista de Mailchimp:

Si te interesa aprender cómo funciona esta consulta GraphQL, mira la entrada de blog 👨🏻‍🏫 Consulta GraphQL para enviar automáticamente los suscriptores del newsletter de InstaWP a Mailchimp