Så här kopplar du ihop n8n med Workflow Webhooks

Översikt över användningsfall

Denna konfiguration kopplar samman ditt arbetsflöde för e-post efter köp i n8n med Workflow Webhooks, så att du kan samla in kunduppgifter för en månatlig SEO-granskning och vidarebefordra dem till Shopify Flow.

I det här exemplet får kunden ett e-postmeddelande med ett enkätformulär (vi använder Google Form, där uppgifterna läggs in i ett Google-kalkylark) där följande uppgifter efterfrågas:

• Vad är webbadressen till din Shopify-butik?
• Vad är din största SEO-utmaning just nu? Välj bland följande alternativ: slow traffic growth (långsam trafiktillväxt), poor product rankings (dåliga produktrankningar), thin content (tunt innehåll), technical errors (tekniska fel)
• Hur länge har du drivit din butik? Med följande alternativ: less than 6 months, 6–12 months, 1–3 years, 3+ years
• E-postadress som användes vid beställningen i butiken?

När kunden skickar in formuläret skickar n8n svaren till din Workflow Webhooks-ändpunkt. Shopify Flow kan sedan märka kunden och lägga till en anteckning så att ditt SEO-team omedelbart kan se sammanhanget i Shopify-admin.

Vad detta arbetsflöde gör

När kunden har skickat in formuläret i ditt e-postflöde läggs uppgifterna till i kalkylbladet, varifrån n8n skickar uppgifterna till webhooken ”Workflow Webhooks” och webhooken vidarebefordrar denna data till Shopify Flow:

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

Ditt Shopify Flow-arbetsflöde ser då ut så här:

• lägger till kundtaggen seo-audit-pending
• lägger till en kundanteckning med butikens webbadress och SEO-utmaningen

Detta gör det enkelt för ditt team att öppna kunduppgifterna i Shopify-admin och se vad som behöver åtgärdas innan revisionen inleds.

Videoguide

Här kan du se en video som visar hela uppställningen. Videon har inget ljud. Du kan öka eller minska videons hastighet efter behov.

Innan du börjar

• Installera och aktivera Workflow Webhooks i din Shopify-butik.
• Se till att du har ett Shopify Flow-arbetsflöde klart, eller skapa ett nytt i Shopify Flow.
• Skapa ditt intagsformulär i det verktyg som matar in data till ditt n8n-arbetsflöde. Jag använder Google Formulär; när formuläret har skickats in skapas en post i Google-kalkylbladen. data som hämtats från Google Form i ett kalkylark
• Se till att du registrerar kundens e-postadress exakt så som den anges i Shopify, så att Shopify Flow kan identifiera rätt kund.

Konfigurera anslutningen

Skapa webhooken i Workflow Webhooks.

Ange namn och skapa en statisk token (du kan skapa den statiska token direkt genom att trycka på den magiska knappen vid nummer 3 i bilden nedan) och spara.

I ”Avancerade inställningar” anger du namnen på de variabler du vill ta emot:

• name
• email
• store_url
• seo_challenge
• store_age

I inställningarna har vi fyra variabler som vi har kopplat till namn, e-post, store_url och seo_challenge. Dessutom har vi markerat alternativet ”Tillåt anpassad förfrågningstext” för att kunna ta emot ytterligare information, till exempel store_age.

I utlösaren för Google Sheet väljer du det ark som du vill övervaka och skapar en testpost i formuläret för att se uppgifterna.

Välj sedan åtgärden ”HTTP Request” för att skicka formulärdata till den webhook som du har skapat med hjälp av appen ”Workflow Webhooks”.

Du kan följa anvisningarna längst ner på sidan ”Workflow Webhooks” med tilldelade fält, API-token och webhook-URL.

Jag har lagt till URL:en, valt POST-metoden och lagt till rubrikerna på följande sätt i n8n:s åtgärd ”HTTP Request”.

Sedan har jag kopplat ihop de variabler som skapades i webhooken med de faktiska frågorna. I videodemonstrationen kan du se hur jag drar och släpper svaren i fälten. Jag har också lagt till variabeln store\_age, som fanns under den rullbara sidan och inte fick plats på skärmdumpen.

Utför sedan steget och se de data som skickas från n8n till din webhook i appen ”Workflow Webhooks”. Under ”Invocations” kan du se att det externa systemet har aktiverat denna webhook samt granska datamängden. Du kan använda denna datamängd i ditt Shopify Flow-flöde för att utföra valfri åtgärd.

Eftersom din webhook har tagit emot data från n8n utan problem ska du spara och publicera arbetsflödet.

I Shopify Flow skapar du ett arbetsflöde som startar när dina webhook-data tas emot via Workflow Webhooks. Klicka sedan på ”Spela in händelser” i webhook-utlösaren.

Gå nu till det tidigare webhook-anropet och spela upp webhooken igen för att skicka denna data till din webhook-utlösare i Shopify Flow.

I data kan du nu se nyttolasten och även webhook-ID:t.

Du kan se samma webhook på webhook-instrumentpanelen, och den kan användas för att identifiera din webhook.

Lägg nu till villkoret: om det mottagna webhook-ID:t stämmer överens med det webhook-ID som du skapade för n8n-flödet, ska åtgärderna relaterade till formuläret utföras. Eftersom varje webhook-utlösare tar emot data som skickas till vilken webhook-URL som helst i appen ”Workflow Webhooks”, hjälper detta ID dig att välja ut relevanta data från webhooken för ett specifikt syfte.

Använd värdet för ”Inkommande e-post” för att hitta den matchande kunden med hjälp av ”Avancerad sökning”. I sökningen kan du använda e-postadressen, och denna e-postadress hämtas från webhook-utlösarens variabler. För mig är fieldTwo e-postadressen. Min sökning ser ut så här: email:"{{fieldTwo}}"

Kontrollera nu om kunden finns. Jag kontrollerar om kund-ID:t finns.

Lägg sedan till taggen seo-audit-pending. För att hämta kunduppgifterna har jag i konfigurationen använt följande kod för att infoga kund-ID:et. Jag har använt kontroll av mellanslag i taggsyntaxen {{-, -}}, {%- och -%} för att ta bort mellanslag från vänster eller höger sida av kund-ID:et. Om det finns mellanslag kommer sökningen inte att fungera.

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

Lägg till eller uppdatera kundanteckningen med butikens webbadress och SEO-utmaningen. För att hämta kunduppgifterna har jag i konfigurationen använt följande kod för att placera kund-ID:t. Jag har använt kontroll av blanksteg i taggsyntaxen {{-, -}}, {%- och -%} för att ta bort blanksteg från vänster eller höger sida av kund-ID:t. Om det finns blanksteg kommer sökningen inte att fungera.

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

Aktivera arbetsflödet, skicka in ett testsvar från ditt formulär och kontrollera att rätt kundpost i Shopify får taggen och anteckningen.

Det fungerar så här: formuläret skickas in -> n8n tar emot uppgifterna -> n8n skickar uppgifterna till webhooken ”Workflow Webhooks” -> webhooken ”Workflow Webhooks” utlöser Shopify Flow -> du filtrerar flödesutlösaren utifrån webhook-ID:t -> hämtar sedan kunden utifrån ID:t -> kontrollerar om kunden finns -> lägg till taggen -> lägg till anteckningen

Etiketten och lappen ser ut som på bilden nedan för kunden.