Jak połączyć n8n z funkcją Workflow Webhooks

Przegląd przypadków użycia

Ta konfiguracja łączy proces obsługi wiadomości e-mail wysyłanych po dokonaniu zakupu w n8n z funkcją Workflow Webhooks, dzięki czemu mogą Państwo gromadzić dane klientów na potrzeby comiesięcznego audytu SEO i przekazywać je do Shopify Flow.

W tym przykładzie klient otrzymuje wiadomość e-mail zawierającą formularz ankiety (korzystamy z Google Forms; Google Forms dodaje wpis do arkusza kalkulacyjnego Google), w którym prosi się o podanie:

• Jaki jest adres URL Państwa sklepu w serwisie Shopify?
• Jakie jest obecnie Państwa największe wyzwanie związane z SEO? Do wyboru są następujące opcje: slow traffic growth (powolny wzrost ruchu), poor product rankings (słabe pozycje produktów), thin content (uboga treść), technical errors (błędy techniczne)
• Od jak dawna prowadzi Pan/Pani swój sklep? Do wyboru** są** następujące opcje: less than 6 months, 6–12 months, 1–3 years, 3+ years
• Czy ten adres e-mail został użyty do złożenia zamówienia w sklepie?

Gdy klient prześle formularz, n8n wysyła odpowiedzi do Państwa punktu końcowego Workflow Webhooks. Następnie Shopify Flow może oznaczyć klienta i dodać notatkę, dzięki czemu Państwa zespół ds. SEO od razu zapozna się z kontekstem w panelu administracyjnym Shopify.

Jakie są zadania tego procesu

Po przesłaniu przez klienta formularza w ramach Państwa przepływu wiadomości e-mail dane są dodawane do arkusza kalkulacyjnego, skąd n8n wysyła je do webhooka Workflow Webhooks, a ten z kolei przekazuje te dane do Shopify Flow:

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

Państwa proces w Shopify Flow będzie zatem wyglądał następująco:

• dodaje tag klienta seo-audit-pending
• dodaje notatkę dla klienta zawierającą adres URL sklepu oraz informacje dotyczące wyzwań związanych z SEO

Dzięki temu Państwa zespół może z łatwością otworzyć kartę klienta w panelu administracyjnym Shopify i sprawdzić, na co należy zwrócić uwagę przed rozpoczęciem audytu.

Przewodnik wideo

Tutaj mogą Państwo obejrzeć film przedstawiający całą konfigurację; film nie zawiera dźwięku. W razie potrzeby mogą Państwo zwiększyć lub zmniejszyć prędkość odtwarzania filmu.

Zanim zaczną Państwo

• Zainstaluj i włącz funkcję Workflow Webhooks w swoim sklepie Shopify.
• Proszę przygotować proces w Shopify Flow lub utworzyć nowy w Shopify Flow.
• Proszę utworzyć formularz rejestracyjny w narzędziu, które zasila Państwa przepływ pracy w n8n. Ja korzystam z Formularzy Google - po przesłaniu formularza w systemie Google Formy tworzony jest wpis w arkuszach kalkulacyjnych Google. dane otrzymane z formularza Google w arkuszu kalkulacyjnym
• Proszę upewnić się, że adres e-mail klienta jest zapisywany dokładnie tak, jak figuruje w systemie Shopify, aby usługa Shopify Flow mogła zidentyfikować właściwego klienta.

Skonfiguruj połączenie

W sekcji Workflow Webhooks proszę utworzyć webhook.

Wprowadź nazwę i wygeneruj token statyczny (można to zrobić natychmiast, naciskając „magiczny przycisk” oznaczony numerem 3 na poniższym obrazku), a następnie zapisz.

W sekcji Ustawienia zaawansowane proszę nadać nazwy zmiennym, które chcą Państwo otrzymywać:

• name
• email
• store_url
• seo_challenge
• store_age

W ustawieniach mamy 4 zmienne, które przypisaliśmy do pól „name”, „email”, „store_url” oraz „seo_challenge”; ponadto zaznaczyliśmy opcję Zezwól na niestandardową treść żądania, aby móc odbierać inne informacje, takie jak „store_age”.

W wyzwalaczu Arkusza Google proszę wybrać odpowiedni arkusz, który chcą Państwo monitorować, a następnie utworzyć wpis testowy w formularzu, aby wyświetlić dane.

Następnie wybierz akcję HTTP Request, aby wysłać dane formularza do webhooka utworzonego za pomocą aplikacji Workflow Webhooks.

Można postępować zgodnie z instrukcją podaną na dole strony Workflow Webhooks, uwzględniając przypisane pola, token API oraz adres URL dla webhooka.

W akcji HTTP Request w n8n dodałem adres URL, wybrałem metodę POST oraz dodałem nagłówki w następujący sposób.

Następnie przyporządkowałem zmienne utworzone w webhooku do konkretnych pytań. Na filmie demonstracyjnym mogą Państwo zobaczyć, w jaki sposób przeciągam i upuszczam odpowiedzi do odpowiednich pól. Dodałem również zmienną store_age, która znajdowała się poniżej przewijanej strony i nie zmieściła się na zrzucie ekranu.

Następnie proszę wykonać ten krok i sprawdzić dane przesłane z n8n do Państwa webhooka w aplikacji Workflow Webhooks. W sekcji „Wywołania” można zobaczyć, że system zewnętrzny wywołał ten webhook, a także zapoznać się z treścią komunikatu. Treść tę można wykorzystać w Shopify Flow do wykonania dowolnej czynności.

Ponieważ Państwa webhook pomyślnie odebrał dane z n8n, proszę zapisać i opublikować przepływ pracy.

W usłudze Shopify Flow utwórz przepływ pracy, który uruchamia się po otrzymaniu danych z webhooka za pośrednictwem funkcji Workflow Webhooks. Następnie w wyzwalaczu webhooka kliknij opcję „Rejestruj zdarzenia”.

Teraz przejdź do poprzedniego wywołania webhooka i ponownie uruchom webhook, aby wysłać tę treść do wyzwalacza webhooka w Shopify Flow.

W danych widoczne są teraz dane użytkowe oraz identyfikator webhooka.

Ten sam webhook można zobaczyć na pulpicie nawigacyjnym webhooków i można go wykorzystać do identyfikacji Państwa webhooka.

Teraz proszę dodać warunek: jeśli otrzymany identyfikator webhooka jest zgodny z identyfikatorem webhooka utworzonym dla przepływu n8n, należy wykonać czynności związane z formularzem. Każdy wyzwalacz typu „Webhook” odbiera dane wysłane na dowolny adres URL webhooka w aplikacji Workflow Webhooks, a ten identyfikator pomoże Państwu wybrać odpowiednie dane z webhooka do konkretnego celu.

Proszę skorzystać z wartości „Otrzymana wiadomość e-mail”, aby znaleźć odpowiedniego klienta za pomocą zaawansowanego zapytania. W zapytaniu można wykorzystać adres e-mail, który pochodzi ze zmiennych wyzwalacza webhooka. W moim przypadku pole „fieldTwo” odpowiada adresowi e-mail. Moje zapytanie wygląda następująco: email:"{{fieldTwo}}"

Teraz proszę sprawdzić, czy klient istnieje. Sprawdzam, czy identyfikator klienta istnieje.

następnie proszę dodać tag seo-audit-pending. Aby pobrać dane klienta, w konfiguracji zastosowałem ten kod w celu umieszczenia identyfikatora klienta; w składni tagów {{-, -}}, {%- oraz -%} użyłem funkcji kontroli spacji, aby usunąć spacje z lewej lub prawej strony identyfikatora klienta. Jeśli pojawią się jakiekolwiek spacje, zapytanie nie zadziała.

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

proszę dodać lub zaktualizować notatkę dotyczącą klienta, podając adres URL sklepu oraz wyzwanie związane z SEO. Aby uzyskać dane klienta, w konfiguracji zastosowałem ten kod w celu umieszczenia identyfikatora klienta. Wykorzystałem kontrolę spacji w składni tagów {{-, -}}, {%- oraz -%}, aby usunąć spacje z lewej lub prawej strony identyfikatora klienta. Jeśli występują jakiekolwiek spacje, zapytanie nie zadziała.

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

Włącz proces i prześlij próbną odpowiedź z formularza, a następnie sprawdź, czy właściwy rekord klienta w Shopify otrzymał tag i notatkę.

Działa to w następujący sposób: formularz został przesłany → n8n odbiera dane → n8n wysyła dane do webhooka Workflow Webhooks → webhook Workflow Webhooks uruchamia Shopify Flow → filtruje Pan/Pani wyzwalacz przepływu na podstawie identyfikatora webhooka → następnie pobiera Pan/Pani dane klienta na podstawie tego identyfikatora → sprawdza Pan/Pani, czy klient występuje w systemie -> dodają Państwo tag -> dodają Państwo notatkę

Etykieta i notatka wyglądają dla klienta tak, jak pokazano na poniższym obrazku.