So verbinden Sie n8n mit Workflow Webhooks

Übersicht über Anwendungsfälle

Diese Konfiguration verbindet Ihren E-Mail-Workflow nach dem Kauf in n8n mit Workflow Webhooks, sodass Sie Kundendaten für ein monatliches SEO-Audit erfassen und an Shopify Flow weiterleiten können.

In diesem Beispiel erhält der Kunde eine E-Mail mit einem Umfrageformular (wir verwenden Google Forms; Google Forms fügt einen Eintrag in die Google-Tabelle ein), in dem folgende Angaben abgefragt werden:

Wie lautet die URL Ihres Shopify-Shops?
Was ist derzeit Ihre größte Herausforderung im Bereich SEO? Mit folgenden Antwortmöglichkeiten: slow traffic growth, poor product rankings, thin content, technical errors
Seit wann betreiben Sie Ihren Shop? Mit folgenden Optionen: less than 6 months, 6–12 months, 1–3 years, 3+ years
Wurde die E-Mail-Adresse für die Bestellung im Shop verwendet?

Wenn der Kunde das Formular absendet, übermittelt n8n die Antworten an Ihren Endpunkt Workflow Webhooks. Unter Shopify Flow können Sie den Kunden anschließend mit einem Tag versehen und eine Notiz hinzufügen, sodass Ihr SEO-Team den Kontext im Shopify-Adminbereich sofort erkennen kann.

Was dieser Workflow bewirkt

Nachdem der Kunde das Formular in Ihrem E-Mail-Workflow übermittelt hat, werden die Daten in die Tabelle eingetragen. Von dort aus sendet n8n die Daten an den Webhook Workflow Webhooks, und der Webhook leitet diese Daten an Shopify Flow weiter:

perl

{
  "name": "Saad",
  "email": "customer@example.com",
  "store_url": "mystore.myshopify.com",
  "seo_challenge": "poor product rankings",
  "store_age": "1-3 years"
}

Ihr Shopify Flow-Workflow sieht dann wie folgt aus:

fügt das Kunden-Tag seo-audit-pending hinzu
fügt eine Kundenanmerkung mit der URL des Shops und der SEO-Herausforderung hinzu

Dadurch kann Ihr Team den Kundendatensatz im Shopify-Adminbereich ganz einfach öffnen und erkennen, was vor Beginn des Audits zu beachten ist.

Videoanleitung

Hier können Sie sich das Video des gesamten Aufbaus ansehen; das Video enthält keinen Ton. Sie können die Wiedergabegeschwindigkeit des Videos je nach Bedarf erhöhen oder verringern.

Bevor Sie beginnen

Installieren und aktivieren Sie „Workflow Webhooks“ in Ihrem Shopify-Shop.
Halten Sie einen Shopify Flow-Workflow bereit oder erstellen Sie einen neuen unter Shopify Flow.
Erstellen Sie Ihr Erfassungsformular in dem Tool, das Ihren n8n-Workflow speist. Ich verwende Google Forms; sobald das Google-Formular abgeschickt wurde, wird ein Eintrag in den Google-Tabellen angelegt. Aus dem Google-Formular empfangene Daten in einer Tabellenkalkulation
Stellen Sie sicher, dass Sie die E-Mail-Adresse des Kunden genau so erfassen, wie sie in Shopify hinterlegt ist, damit Shopify Flow den richtigen Kunden identifizieren kann.

Stellen Sie die Verbindung her

Erstellen Sie den Webhook unter Workflow Webhooks.

Bild

Geben Sie den Namen ein, generieren Sie ein statisches Token (Sie können das statische Token sofort erstellen, indem Sie auf die Schaltfläche mit der Nummer 3 in der folgenden Abbildung klicken) und speichern Sie die Angaben.

Bild

Geben Sie in den erweiterten Einstellungen die Namen der Variablen an, die Sie empfangen möchten:

name
email
store_url
seo_challenge
store_age

Bild

In den Einstellungen haben wir vier Variablen, die wir den Bezeichnungen „name“, „email“, „store_url“ und „seo_challenge“ zugeordnet haben; außerdem haben wir die Option „Benutzerdefinierten Request-Body zulassen“ aktiviert, um weitere Informationen wie beispielsweise „store_age“ zu erhalten.

Wählen Sie im Google-Tabellen-Trigger das gewünschte Blatt aus, das Sie überwachen möchten, und erstellen Sie einen Test-Eintrag im Formular, um die Daten anzuzeigen.

Bild

Wählen Sie anschließend die Aktion „HTTP-Anfrage“ aus, um die Formulardaten an den Webhook zu senden, den Sie mithilfe der App Workflow Webhooks erstellt haben.

Bild

Sie können die Schritte befolgen, die am Ende des Webhooks unter Workflow Webhooks aufgeführt sind, einschließlich der zugeordneten Felder, des API-Tokens und der URL für den Webhook.

Bild

Ich habe die URL hinzugefügt, die POST-Methode ausgewählt und die Header in der n8n-Aktion „HTTP-Anfrage“ wie folgt hinzugefügt.

Bild

Anschließend habe ich die im Webhook erstellten Variablen den eigentlichen Fragen zugeordnet. In der Videodemonstration können Sie sehen, wie ich die Antwort per Drag & Drop in die Felder ziehe. Außerdem habe ich die Variable „store_age“ hinzugefügt, die sich unterhalb der scrollbaren Seite befand und daher nicht mehr auf den Screenshot passte.

Bild

Führen Sie anschließend den Schritt aus und sehen Sie sich die Daten an, die von n8n an Ihren Webhook in der App Workflow Webhooks gesendet wurden. In den Aufrufen können Sie sehen, dass das externe System diesen Webhook aufgerufen hat, und Sie können auch die Payloads einsehen. Sie können diese Payloads in Ihrem Shopify Flow verwenden, um beliebige Aktionen auszuführen.

Bild

Da Ihr Webhook die Daten von n8n erfolgreich empfangen hat, speichern und veröffentlichen Sie den Workflow.

Bild

Erstellen Sie in „Shopify Flow“ einen Workflow, der gestartet wird, sobald Ihre Webhook-Daten über Workflow Webhooks empfangen werden. Klicken Sie anschließend im Webhook-Trigger auf „Ereignisse aufzeichnen“.

Bild

Gehen Sie nun zu dem zuvor aufgezeichneten Webhook-Aufruf und spielen Sie den Webhook erneut ab, um diese Payload an Ihren Webhook-Trigger im Shopify Flow zu senden.

Bild

In den Daten sehen Sie nun die Payload sowie die Webhook-ID.

Bild

Diesen Webhook können Sie im Webhook-Dashboard einsehen; er dient zur Identifizierung Ihres Webhooks.

Bild

Fügen Sie nun die Bedingung hinzu: Wenn die empfangene Webhook-ID mit der Webhook-ID übereinstimmt, die Sie für den Shopify Flow erstellt haben, führen Sie die mit dem Formular verbundenen Aktionen aus. Denn jeder Webhook-Trigger empfängt die Daten, die an eine beliebige Webhook-URL in der App Workflow Webhooks gesendet werden, und diese ID hilft Ihnen dabei, die relevanten Daten aus dem Webhook für einen bestimmten Zweck auszuwählen.

Bild

Verwenden Sie den Wert „Eingehende E-Mail“, um mithilfe der erweiterten Abfrage den entsprechenden Kunden zu finden. In der Abfrage können Sie die E-Mail-Adresse verwenden, die aus den Trigger-Variablen des Webhooks stammt. Bei mir ist „fieldTwo“ die E-Mail-Adresse. Meine Abfrage sieht wie folgt aus: email:"{{fieldTwo}}"

Bild

Prüfen Sie nun, ob der Kunde vorhanden ist. Ich prüfe, ob die Kunden-ID vorhanden ist.

Bild

Fügen Sie anschließend das Tag `seo-audit-pending` hinzu. Um die Kundendaten abzurufen, habe ich in der Konfiguration diesen Code verwendet, um die Kunden-ID einzufügen. Dabei habe ich das Leerzeichen-Kontrollelement [ (](https://shopify.github.io/liquid/basics/whitespace/)) in der Tag-Syntax `{{-`, `-}}`, `{%-` und `-%}` verwendet, um Leerzeichen am linken oder rechten Rand der Kunden-ID zu entfernen. Sollten Leerzeichen vorhanden sein, funktioniert die Abfrage nicht.

ruby

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Bild

Fügen Sie die Kundenanmerkung mit der URL des Shops und der SEO-Herausforderung hinzu oder aktualisieren Sie sie. Um den Kunden zu ermitteln, habe ich in der Konfiguration diesen Code verwendet, um die Kunden-ID einzufügen. Dabei habe ich das Leerzeichen-Kontrollelement () in der Tag-Syntax {{-, -}}, {%- und -%} eingesetzt, um Leerzeichen am linken oder rechten Rand der Kunden-ID zu entfernen. Sind Leerzeichen vorhanden, funktioniert die Abfrage nicht.

ruby

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Bild

Aktivieren Sie den Workflow, senden Sie eine Testantwort über Ihr Formular ab und vergewissern Sie sich, dass der richtige Kundendatensatz in Shopify die Tags und die Notiz erhält.

Das funktioniert folgendermaßen: Das Formular wird übermittelt → n8n empfängt die Daten → n8n sendet die Daten an den Webhook unter Workflow Webhooks -> Der Webhook unter Workflow Webhooks löst den Shopify Flow aus -> Sie filtern den Shopify Flow-Trigger anhand der Webhook-ID -> Anschließend rufen Sie den Kunden anhand der ID ab -> Prüfen Sie, ob der Kunde vorhanden ist -> Fügen Sie das Tag hinzu -> Fügen Sie die Notiz hinzu

Die Tags und der Vermerk erscheinen für den Kunden wie in der folgenden Abbildung dargestellt.

Bild