Logo
Blog

👨🏻‍🏫 GraphQL-Query zum automatischen Senden der Newsletter-Abonnenten von InstaWP zu Mailchimp

Leonardo Losoviz
Von Leonardo Losoviz ·

(Lies den Blogbeitrag 🚀 Newsletter-Abonnenten automatisch von InstaWP zu Mailchimp senden, um den Kontext zu dieser Query zu verstehen.)

Diese GraphQL-Query erfasst die E-Mail-Adresse der Besucher, die das Kontrollkästchen „Subscribe to mailing list" in InstaWP angehakt haben (beim Erstellen einer neuen Sandbox-Site), und trägt diese E-Mail-Adresse in eine Mailchimp-Liste ein:

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"
      }
    }
  })
}

Alternativ kannst du die Abonnenten auch in deinem WordPress-Newsletter-Plugin registrieren (z. B. Noptin oder ein anderes).

Schauen wir uns an, wie diese GraphQL-Query ihre Magie entfaltet.

Die GraphQL-Query in unabhängige Einheiten aufteilen

Ein GraphQL-Dokument kann mehrere Operationen (queries und Mutationen) enthalten, aber nur eine davon wird ausgeführt. Welche das ist, geben wir über den Parameter ?operationName=... am GraphQL-Endpoint an; andernfalls wird die letzte Operation ausgeführt.

Beachte, dass im obigen Dokument 2 query-Operationen vorhanden sind:

  1. HasSubscribedToNewsletter
  2. MaybeCreateContactOnMailchimp

Die Webhook-URL enthält ?operationName=MaybeCreateContactOnMailchimp, das ist also die Operation, die ausgeführt wird.

Dank der Erweiterung Multiple Query Execution wird MaybeCreateContactOnMailchimp zunächst HasSubscribedToNewsletter ausführen, wie durch die Direktive @depends angegeben:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   # ...
{
  #
}

Außerdem wird MaybeCreateContactOnMailchimp nur bedingt ausgeführt, nämlich nur wenn der Wert der Variable $subscribedToNewsletter true ist:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   @include(if: $subscribedToNewsletter)
{
  #
}

$subscribedToNewsletter ist eine dynamische Variable, die innerhalb der Operation HasSubscribedToNewsletter exportiert wird:

query HasSubscribedToNewsletter {
  # ...
  subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
    @export(as: "subscribedToNewsletter")
}

Die Operation MaybeCreateContactOnMailchimp wird daher nur ausgeführt, wenn der Benutzer das Kontrollkästchen „Subscribe to mailing list" angehakt hat.

Prüfen, ob der Benutzer das Kontrollkästchen angehakt hat

Die Dokumentation zum Webhook von InstaWP gibt an, dass die Payload-Daten folgende Felder enthalten (unter anderem):

  • marketing_optin: Gibt an, ob der Benutzer das Kontrollkästchen angehakt hat
  • email: E-Mail-Adresse des Besuchers

Die Dokumentation erklärt nur, dass das Feld marketing_optin den Wert NA hat, wenn das Kontrollkästchen nicht angehakt ist – damit müssen wir also arbeiten.

Um herauszufinden, ob der Benutzer das Kontrollkästchen angehakt hat, lautet die Logik:

  • Prüfen, ob das Feld marketing_optin vorhanden ist, und
  • Prüfen, dass sein Wert nicht NA ist

Dies wird in der Operation HasSubscribedToNewsletter berechnet. Hier ist sie mit Kommentaren, die erklären, was jede Zeile der Query macht:

query HasSubscribedToNewsletter {
 
  # Check if field `marketing_optin` is present
  hasSubscriberOptIn: _httpRequestHasParam(name: "marketing_optin")
 
  # Get the value of field `marketing_optin`
  subscriberOptIn: _httpRequestStringParam(name: "marketing_optin")
 
  # Check if the value of the field is not "NA"
  isNotSubscriberOptInNAValue: _notEquals(value1: $__subscriberOptIn, value2: "NA")
 
  # Perform an AND operation: field present && value != "NA"
  subscribedToNewsletter: _and(values: [$__hasSubscriberOptIn, $__isNotSubscriberOptInNAValue])
    
    # Export the result under dynamic variable $subscribedToNewsletter
    @export(as: "subscribedToNewsletter")
}

In dieser Query gibt es einige interessante Dinge.

Globale Felder

Hast du die Felder bemerkt, die mit _ beginnen? Nämlich:

  • _httpRequestHasParam
  • _httpRequestStringParam
  • _notEquals
  • _and

Das sind globale Felder, also Felder, die unter allen Typen im GraphQL-Schema verfügbar sind. Globale Felder bieten Funktionalität statt Daten und beginnen per Konvention mit _.

Field to Input

Hast du die Variablen bemerkt, die mit $__ beginnen? Nämlich:

  • $__subscriberOptIn
  • $__hasSubscriberOptIn
  • $__isNotSubscriberOptInNAValue

Das sind dynamische Variablen, die den Wert eines Feldes enthalten, das vor ihnen innerhalb derselben Operation definiert wurde. Zum Beispiel enthält die Variable $__subscriberOptIn den Wert des darüber deklarierten Feldes subscriberOptIn.

Dies ist eine Funktion der Erweiterung Field to Input, die es erlaubt, die Ausgabe eines Feldes als Eingabe in ein anderes Feld zu verwenden. So können wir Funktionalität innerhalb der GraphQL-Query erstellen.

In der Query prüft das Feld isNotSubscriberOptInNAValue, ob der Wert des zuvor abgefragten Feldes subscriberOptIn nicht gleich "NA" ist, und subscribedToNewsletter berechnet eine AND-Operation mit den Werten der Felder hasSubscriberOptIn und isNotSubscriberOptInNAValue.

Verbindung zu Mailchimp herstellen

Die Operation MaybeCreateContactOnMailchimp enthält die Logik zum Extrahieren der Payload-Daten und zum Aufrufen der Mailchimp-API, um die E-Mail-Adresse in die Newsletter-Liste einzutragen.

Hier ist die Operation mit Kommentaren, die erklären, was jede Zeile macht:

query MaybeCreateContactOnMailchimp
   @depends(on: "HasSubscribedToNewsletter")
   @include(if: $subscribedToNewsletter)
{
  # Extract form field `email` from the body of the request
  subscriberEmail: _httpRequestStringParam(name: "email")
  
  # Obtain Mailchimp credentials, defined in wp-config.php
  mailchimpUsername: _env(name: "MAILCHIMP_API_CREDENTIALS_USERNAME")
    # Do not print the credentials in the response
    @remove
  mailchimpPassword: _env(name: "MAILCHIMP_API_CREDENTIALS_PASSWORD")
    @remove
  
  # Connect to Mailchimp to add a new member to the list
  mailchimpListMembersJSONObject: _sendJSONObjectItemHTTPRequest(input: {
    url: "https://us7.api.mailchimp.com/3.0/lists/{listCode}/members",
    method: POST,
    options: {
      # Provide credentials to connect to the API
      auth: {
        username: $__mailchimpUsername,
        password: $__mailchimpPassword
      },
      # Provide form data
      json: {
        email_address: $__subscriberEmail,
        status: "subscribed"
      }
    }
  })
}

Schauen wir uns die in dieser Query verwendeten Funktionen an.

Umgebungsvariablen

Wir müssen unsere Anmeldedaten angeben, wenn wir uns mit der Mailchimp-API verbinden. Wir möchten sie jedoch nicht direkt in die GraphQL-Query eingeben, da sie irgendwo durchsickern könnten (z. B. könnten sie in einem Log ausgegeben werden).

Deshalb verwenden wir das globale Feld _env (bereitgestellt durch die Erweiterung PHP Constants and Environment via Schema), um eine Umgebungsvariable oder PHP-Konstante zu lesen, zusammen mit der Direktive @remove (bereitgestellt durch die Erweiterung Field Response Removal), um die Anmeldedaten nicht in der Antwort auszugeben.

Jetzt können wir unsere Anmeldedaten in wp-config.php deklarieren:

define( 'MAILCHIMP_API_CREDENTIALS_USERNAME', '{ username }' );
define( 'MAILCHIMP_API_CREDENTIALS_PASSWORD', '{ password }' );

Die HTTP-Anfrage an Mailchimp senden

Das letzte Element der Logik ist das Feld _sendJSONObjectItemHTTPRequest, das eine HTTP-Anfrage an einen Dienst sendet.

Da wir uns mit der Mailchimp-API verbinden möchten, stellt das Feld mailchimpListMembersJSONObject die Daten bereit, die der REST-API-Endpoint von Mailchimp benötigt, wie in der Dokumentation zum Hinzufügen eines Mitglieds zu einer Mailchimp-Liste angegeben:

  • Eine POST-Anfrage senden
  • Der Endpoint lautet https://{subdomain}.api.mailchimp.com/3.0/lists/{listCode}/members
  • Der Body muss die Felder email_address und status enthalten

Einen Webhook zur Interaktion mit einer beliebigen API erstellen

Die GraphQL-Query in diesem Beitrag leitet Daten von InstaWP zu Mailchimp weiter.

Du kannst dieselbe Idee für jede beliebige Kombination anwenden, die du benötigst: Daten aus einem Quelldienst (welcher auch immer das ist) extrahieren, anpassen und an einen Zieldienst (welcher auch immer das ist) senden.

Viel Spaß!

Zurück zu allen Beiträgen

Abonniere unseren Newsletter

Bleib über alle Updates zu Gato GraphQL auf dem Laufenden.