🚀 Envio automático dos inscritos na newsletter do InstaWP para o Mailchimp

Para o Gato GraphQL, utilizamos o InstaWP para permitir que os visitantes experimentem as extensões comerciais do plugin em um site sandbox próprio, antes de decidir comprá-las.

Há dois dias atualizei a assinatura do InstaWP para o plano Personal, a fim de aumentar a vida útil dos sites sandbox de 4 horas para 7 dias e conseguir capturar os e-mails dos inscritos na newsletter ao testar o Gato GraphQL:

O novo plano me dá acesso à aba "Advanced Options", onde posso fornecer um webhook que receberá os dados de um site sandbox recém-criado:

Opções avançadas para os templates do InstaWP

Quero capturar automaticamente o e-mail dos visitantes que marcaram a caixa "Subscribe to mailing list" e enviá-lo diretamente para minha lista no Mailchimp, sem nenhuma intervenção manual.

A documentação do webhook fornece um exemplo de captura dos dados do novo site sandbox, com base no uso da plataforma Make para criar um webhook que extrai os campos do payload e os envia para o Google Sheet:

Make + InstaWP

Porém, esse fluxo de trabalho não atende completamente às minhas necessidades, pois não quero depender de mais um provedor de serviços e ter que inserir minhas credenciais do Mailchimp nele. Quero algo mais simples.

Usando InstaWP + Gato GraphQL para encaminhar dados de webhook

A solução surgiu bem diante dos meus olhos: posso usar diretamente o InstaWP para hospedar um site reservado e instalar o plugin Gato GraphQL com o bundle "Power Extensions".

Essa combinação me oferece uma instância de "API Gateway" a baixo custo. Agora posso usar essa instância para receber o payload do webhook, extrair os dados e enviá-los ao Mailchimp, codificando essa lógica em uma query GraphQL.

Usar GraphQL pode não parecer uma opção óbvia à primeira vista, porque um servidor GraphQL normalmente expõe um único endpoint para receber a query, resolvê-la e retornar sua resposta. Embora seja possível, seria muito estranho usar o endpoint único como URL do webhook, passando a query GraphQL como um 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" } } }) }

Não muito elegante, certo?

O Gato GraphQL oferece uma forma melhor de lidar com isso: as Persisted queries. Uma persisted query é semelhante a um endpoint REST no sentido de que é acessível por sua própria URL e sua saída é predefinida (a query GraphQL é fornecida com antecedência e armazenada no banco de dados):

Editor de persisted queries

Agora, a URL do webhook terá esta aparência:

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

E a query GraphQL armazenada como Persisted query é 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"
      }
    }
  })
}

Muito melhor, certo?

Agora, quando um novo site sandbox é criado no InstaWP e o usuário se inscreve na newsletter, automaticamente recebo esse e-mail adicionado à minha lista no Mailchimp:

Se você quiser aprender como essa query GraphQL funciona, confira o post do blog 👨🏻‍🏫 Query GraphQL para enviar automaticamente os inscritos na newsletter do InstaWP para o Mailchimp

🚀 Envio automático dos inscritos na newsletter do InstaWP para o Mailchimp

​Usando InstaWP + Gato GraphQL para encaminhar dados de webhook

Assine nossa newsletter

Usando InstaWP + Gato GraphQL para encaminhar dados de webhook