🚀 Newsletter-Abonnenten automatisch von InstaWP zu Mailchimp senden

Für Gato GraphQL nutzen wir InstaWP, damit Besucher die kommerziellen Erweiterungen des Plugins in einer eigenen Sandbox-Website ausprobieren können, bevor sie sich zum Kauf entscheiden.

Vor zwei Tagen habe ich das InstaWP-Abonnement auf den Personal-Plan umgestellt, um die Lebensdauer der Sandbox-Sites von 4 Stunden auf 7 Tage zu verlängern und die E-Mails der Newsletter-Abonnenten beim Testen von Gato GraphQL erfassen zu können:

Der neue Plan gibt mir Zugang zum Tab « Advanced Options », wo ich einen Webhook angeben kann, der die Daten einer neu erstellten Sandbox-Site empfängt:

Ich möchte automatisch die E-Mail der Besucher erfassen, die die Checkbox « Subscribe to mailing list » angehakt haben, und sie direkt zu meiner Mailchimp-Liste senden, ohne manuellen Eingriff.

Die Dokumentation zum Webhook enthält ein Beispiel zur Erfassung der Daten einer neuen Sandbox-Site, das auf der Make-Plattform basiert, um einen Webhook zu erstellen, der die Payload-Felder extrahiert und an Google Sheet sendet:

Dieser Workflow erfüllt jedoch meine Anforderungen nicht vollständig, da ich nicht von einem weiteren Dienstanbieter abhängig sein und dort meine Mailchimp-Zugangsdaten eingeben möchte. Ich will etwas Einfacheres.

​

InstaWP + Gato GraphQL zum Weiterleiten von Webhook-Daten nutzen

Die Lösung lag direkt vor meinen Augen: Ich kann InstaWP direkt verwenden, um eine reservierte Site zu hosten, und das Gato GraphQL-Plugin mit dem "Power Extensions"-Bundle installieren.

Diese Kombination bietet mir eine günstige « API Gateway »-Instanz. Ich kann diese Instanz nun verwenden, um den Webhook-Payload zu empfangen, die Daten zu extrahieren und sie an Mailchimp weiterzusenden – diese Logik kodiere ich in einer GraphQL-Query.

GraphQL zu verwenden mag auf den ersten Blick keine offensichtliche Option sein, da ein GraphQL-Server normalerweise einen einzigen Endpoint bereitstellt, um die Query zu empfangen, aufzulösen und die Antwort zurückzugeben. Obwohl es möglich wäre, wäre es sehr umständlich, den einzelnen Endpoint als Webhook-URL zu verwenden und dabei die GraphQL-Query als Parameter zu übergeben:

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

Nicht gerade schön, oder?

Gato GraphQL bietet einen besseren Weg, damit umzugehen: Persisted queries. Eine Persisted query ähnelt einem REST-Endpoint insofern, als sie unter ihrer eigenen URL erreichbar ist und ihre Ausgabe vordefiniert ist (die GraphQL-Query wird im Voraus bereitgestellt und in der Datenbank gespeichert):

Die Webhook-URL sieht nun so aus:

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

Und die als Persisted query gespeicherte GraphQL-Query ist diese:

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

Viel besser, oder?

Wenn nun auf InstaWP eine neue Sandbox-Site erstellt wird und sich der Nutzer für den Newsletter anmeldet, wird diese E-Mail automatisch zu meiner Mailchimp-Liste hinzugefügt:

Wenn du wissen möchtest, wie diese GraphQL-Query funktioniert, schau dir den Blogbeitrag an: 👨🏻‍🏫 GraphQL-Query zum automatischen Senden der Newsletter-Abonnenten von InstaWP zu Mailchimp