Workflow WebhooksWorkflow Webhooks

如何將 n8n 與 Workflow Webhooks 連接起來

用例概覽

此設定可將您在 n8n 中的「購買後電子郵件工作流程」與 Workflow Webhooks 連結，讓您能收集客戶資料以進行「每月 SEO 稽核」，並將資料傳送至 Shopify Flow。

在此範例中，客戶會收到一封附有問卷表單的電子郵件（我們使用的是 Google 表單，Google 表單會將資料新增至 Google 試算表中），其中詢問以下內容：

  • 您的 Shopify 商店網址是什麼？
  • **您目前面臨的最大 SEO 挑戰是什麼？**可選答案如下：slow traffic growth、poor product rankings、thin content、technical errors
  • **您的店鋪經營多久了？**可選答案如下：less than 6 months、6–12 months、1–3 years、3+ years
  • 在商店下單時使用的電子郵件地址？

當客戶提交表單時，n8n 會將回答內容傳送至您的 Workflow Webhooks 端點。接著，Shopify Flow 便能為該客戶加上標籤並新增備註，讓您的 SEO 團隊能在 Shopify 管理後台立即掌握相關背景資訊。

此工作流程的功能為何

當客戶在您的電子郵件流程中提交表單後，資料會被新增至試算表中；接著，n8n 會將資料傳送至 Workflow Webhooks Webhook，而該 Webhook 則會將此資料包傳送至 Shopify Flow：

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

那麼，您的 Shopify Flow 工作流程如下：

  • 新增客戶標籤 seo-audit-pending
  • 新增一則客戶備註，內容包含商店網址及 SEO 方面的挑戰

這讓您的團隊能夠輕鬆地在「Shopify」管理後台開啟客戶記錄，並在稽核開始前查看哪些事項需要處理。

影片指南

您可以在這裡觀看整個設置過程的影片，影片無聲音。您可以根據需要調整影片的播放速度。

開始之前

  • 請在您的 Shopify 商店中安裝並啟用「Workflow Webhooks」。
  • 請準備好一個「Shopify Flow」工作流程，或在 Shopify Flow 中建立一個新的工作流程。
  • 請在銜接您 n8n 工作流程的工具中建立您的表單。我目前使用的是 Google 表單，一旦 Google 表單被提交，系統便會在 Google 試算表中建立一筆記錄。 圖片 從 Google 表單接收的資料已匯入試算表
  • 請務必確保您收集的客戶電子郵件地址與 Shopify 中的記錄完全一致，以便 Shopify Flow 能正確識別該客戶。

設定連線

在 Workflow Webhooks 中，建立 webhook。

圖片

輸入名稱並產生靜態憑證（您可以按下下圖中編號 3 處的「魔法按鈕」，立即建立靜態憑證），然後儲存。

圖片

在「進階設定」中，為您要接收的變數命名：

  • name
  • email
  • store_url
  • seo_challenge
  • store_age

圖片

在設定中，我們有 4 個變數，已分別對應至 name、email、store_url 和 seo_challenge；此外，我們也勾選了「**允許自訂請求正文」**選項，以便接收其他資訊，例如 store_age。

在 Google 試算表觸發器中，請選取您要監控的正確試算表，並在表單中建立一則測試條目以檢視資料。

圖片

接著選擇「HTTP 請求」動作，將表單資料傳送至您使用 Workflow Webhooks 應用程式所建立的 webhook。

圖片

您可以依照 Workflow Webhooks 網頁掛鉤頁面底部的步驟操作，並提供對應的欄位、API 憑證及網頁掛鉤的 URL。

圖片

我在 n8n 的 HTTP 請求動作中，已加入網址、選取 POST 方法，並以這種方式新增了請求頭。

圖片

接著，我將 webhook 中建立的變數與實際問題進行了對應。您可以在影片示範中看到我是如何將答案拖放至各欄位的。此外，我也新增了原本位於可捲動頁面下方、因此未能顯示在截圖中的 store_age 變數。

圖片

接著執行該步驟，並在 Workflow Webhooks 應用程式中查看從 n8n 傳送至您 webhook 的資料。在「呼叫記錄」中，您可以看到「外部系統」已呼叫此 webhook，並查看其載荷內容。您可以在 Shopify Flow 中使用此載荷來執行任何操作。

圖片

由於您的 Webhook 已成功從 n8n 接收資料，請儲存並發佈此工作流程。

圖片

在 Shopify Flow 中，建立一個工作流程，使其在透過 Workflow Webhooks 接收 webhook 資料時啟動。接著在 webhook 觸發器中，點擊「記錄事件」。

圖片

現在請回到先前的 Webhook 呼叫，並「重播 Webhook」，將此有效載荷傳送至您在 Shopify Flow 中的 Webhook 觸發器。

圖片

現在在資料中，您可以看到有效載荷以及 webhook ID。

圖片

您可以在 webhook 儀表板中看到相同的 webhook，並可藉此識別您的 webhook。

圖片

現在新增一個條件：若接收到的 Webhook ID 等於您為 n8n 流程所建立的 Webhook ID，則執行與該表單相關的操作。因為每個 Webhook 觸發器都會接收傳送至 Workflow Webhooks 應用程式中任何 Webhook URL 的資料，而此 ID 將有助於您從 Webhook 中篩選相關資料，以滿足特定需求。

圖片

使用「收件電子郵件」的值，透過「進階查詢」找出相符的客戶。在查詢中，您可以使用電子郵件，而這封電子郵件是從 webhook 觸發變數中取得的。對我來說，fieldTwo 就是電子郵件。我的查詢如下：email:"{{fieldTwo}}"

圖片

現在來檢查該客戶是否存在。我正在檢查客戶 ID 是否存在。

圖片

接著加入標籤 seo-audit-pending。為了取得客戶資料，我在設定中使用了這段程式碼來填入客戶 ID，並在標籤語法中使用了 空格處理函式，以及 {{-、-}}、{%- 和 -%} 來移除客戶 ID 左右兩側的空格。若存在任何空格，查詢將無法正常運作。

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

圖片

在客戶備註中新增或更新商店網址及 SEO 挑戰。 為了取得客戶資料，我在設定中使用了這段程式碼來插入客戶 ID，並在標籤語法 {{-、-}}、{%- 以及 -%} 中，運用 的空格處理函式，以移除客戶 ID 左右兩側的空格。若存在任何空格，查詢將無法正常運作。

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

圖片

啟用工作流程，並從表單提交一則測試回覆，以確認 Shopify 中的正確客戶記錄已收到該標籤和備註。

運作方式如下：表單提交 → n8n 接收資料 → n8n 將資料傳送至 Workflow Webhooks 的 webhook -> Workflow Webhooks 的 webhook 觸發 Shopify Flow -> 您根據 webhook ID 篩選流程觸發器 -> 接著根據該 ID 擷取客戶資料 -> 檢查該客戶是否存在 -> 新增標籤 -> 新增備註

對客戶而言，標籤和備註的外觀如下圖所示。

圖片