Sådan forbinder du n8n med Workflow Webhooks

Oversigt over anvendelsestilfælde

Denne opsætning forbinder din e-mail-arbejdsgang efter køb i n8n med Workflow Webhooks, så du kan indsamle kundeoplysninger til en månedlig SEO-gennemgang og videresende dem til Shopify Flow.

I dette eksempel modtager kunden en e-mail med et spørgeskema (vi bruger Google Forms, som tilføjer data til et Google-regneark), hvor der spørges om:

Hvad er din Shopify-butiks-URL?
Hvad er din største SEO-udfordring lige nu? Vælg blandt følgende muligheder: slow traffic growth, poor product rankings, thin content, technical errors
Hvor længe har du drevet din butik? Med følgende muligheder: less than 6 months, 6–12 months, 1–3 years, 3+ years
Er e-mail-adressen blevet brugt til en ordre i butikken?

Når kunden indsender formularen, sender n8n svarene til dit Workflow Webhooks-endpoint. Shopify Flow kan derefter tagge kunden og tilføje en note, så dit SEO-team straks kan se sammenhængen i Shopify-administrationspanelet.

Hvad denne arbejdsgang gør

Når kunden har indsendt formularen i din e-mail-workflow, tilføjes dataene i regnearket, og herfra sender n8n dataene til webhooken Workflow Webhooks, og webhooken sender denne payload videre til Shopify Flow:

perl

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

Din arbejdsgang i Shopify Flow ser altså således ud:

tilføjer kundetagget seo-audit-pending
tilføjer en kundebemærkning med butikkens URL og SEO-udfordringen

Det gør det nemt for dit team at åbne kundeprofilen i Shopify-administrationspanelet og se, hvad der kræver opmærksomhed, inden revisionen går i gang.

Videovejledning

Her kan du se videoen af hele opsætningen; videoen har ingen lyd. Du kan øge eller sænke videoens afspilningshastighed efter behov.

Før du går i gang

Installer og aktiver »Workflow Webhooks« i din »Shopify«-butik.
Sørg for, at du har en »Shopify Flow«-arbejdsgang klar, eller opret en ny på Shopify Flow.
Opret din indtastningsformular i det værktøj, der forsyner din n8n-arbejdsgang med data. Jeg bruger Google Forms; når Google Forms-formularen er indsendt, oprettes der en post i Google Sheets. data modtaget fra Google-formularen i regnearket
Sørg for, at du indsamler kundens e-mailadresse nøjagtigt som den fremgår på Shopify, så Shopify Flow kan identificere den rigtige kunde.

Opret forbindelsen

Opret webhook i »Workflow Webhooks«.

Indtast navn, generer et statisk token (du kan oprette det statiske token med det samme ved at trykke på den magiske knap ved nummer 3 på nedenstående billede) og gem.

I afsnittet »Avancerede indstillinger« skal du navngive de variabler, du ønsker at modtage:

name
email
store_url
seo_challenge
store_age

I indstillingerne har vi 4 variabler, som vi har tilknyttet navn, e-mail, store_url og seo_challenge. Derudover har vi også markeret indstillingen »Tillad brugerdefineret anmodningstekst« for at kunne modtage andre oplysninger, såsom store_age.

I Google Sheets-udløseren skal du vælge det rigtige ark, du vil overvåge, og oprette en testpost i formularen for at se dataene.

Vælg derefter handlingen »HTTP-anmodning« for at sende formularoplysningerne til den webhook, du har oprettet ved hjælp af appen »Workflow Webhooks«.

Du kan følge den vejledning, der er angivet nederst på siden Workflow Webhooks, med tilknyttede felter, API-token og URL til webhook.

Jeg har indsat URL’en, valgt POST-metoden og tilføjet headerne på denne måde i n8n-handlingen »HTTP-anmodning«.

Derefter har jeg knyttet de variabler, der blev oprettet i webhooken, til de egentlige spørgsmål. I videodemonstrationen kan I se, hvordan jeg trækker og slipper svarene ind i felterne. Jeg har også tilføjet variablen »store_age«, som befandt sig under den rullbare side og derfor ikke kunne ses på skærmbilledet.

Udfør derefter trinnet, og se de data, der sendes fra n8n til din webhook i appen »Workflow Webhooks«. Under »Invocations« kan du se, at det eksterne system har aktiveret denne webhook, og du kan også se payloaden. Du kan bruge denne payload i din »Shopify Flow« til at udføre en hvilken som helst handling.

Da din webhook har modtaget dataene fra n8n uden problemer, skal du gemme og offentliggøre arbejdsgangen.

I »Shopify Flow« skal du oprette en arbejdsgang, der starter, når dine webhook-data modtages via Workflow Webhooks. Klik derefter på »Record Events« i webhook-udløseren.

Gå nu tilbage til det tidligere webhook-kald, og gentag webhooket for at sende denne payload til din webhook-udløser i Shopify Flow.

I dataene kan du nu se Payloaden og også webhook-ID’et.

Du kan se den samme webhook i webhook-oversigten, og den kan bruges til at identificere din webhook.

Tilføj nu betingelsen: Hvis det modtagne webhook-id svarer til det webhook-id, du oprettede til n8n-flowet, skal du udføre handlinger relateret til formularen. Da hver webhook-udløser modtager de data, der sendes til en hvilken som helst webhook-URL i appen »Workflow Webhooks«, vil dette id hjælpe dig med at udvælge de relevante data fra webhooken til et bestemt formål.

Brug værdien »Indgående e-mail« til at finde den relevante kunde ved hjælp af »Avanceret forespørgsel«. I forespørgslen kan du bruge e-mail-adressen, som hentes fra webhook-triggervariablerne. For mig er »fieldTwo« e-mail-adressen. Min forespørgsel ser således ud: email:"{{fieldTwo}}"

Kontroller nu, om kunden findes. Jeg tjekker, om kunde-id'et findes.

Tilføj derefter tagget seo-audit-pending. For at hente kunden har jeg i konfigurationen brugt denne kode til at indsætte kunde-ID’et. Jeg har brugt kontrollen til mellemrum () i tag-syntaksen {{-, -}}, {%- og -%} til at fjerne mellemrum fra venstre eller højre side af kunde-ID’et. Hvis der er mellemrum, vil forespørgslen ikke fungere.

ruby

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

Tilføj eller opdater kundebemærkningen med butikkens URL og SEO-udfordringen. For at hente kunden har jeg i konfigurationen brugt denne kode til at indsætte kunde-ID'et. Jeg har brugt til at fjerne mellemrum i tag-syntaksen {{-, -}}, {%- og -%} for at fjerne mellemrum fra venstre eller højre side af kunde-ID'et. Hvis der er mellemrum, vil forespørgslen ikke fungere.

ruby

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

Aktivér arbejdsgangen, indsend et testsvar fra din formular, og kontroller, at den korrekte kundepost i Shopify modtager tagget og noten.

Det fungerer på følgende måde: Formularen indsendes -> n8n modtager dataene -> n8n sender dataene til webhooken Workflow Webhooks -> webhooket på Workflow Webhooks udløser Shopify Flow -> du filtrerer flow-triggeren ud fra webhook-id'et -> henter derefter kunden ud fra id'et -> tjekker, om kunden findes -> tilføjer tagget -> tilføjer noten

Taggen og notatet ser ud som på det følgende billede for kunden.