Workflow WebhooksWorkflow Webhooks

如何將 Make 與 Workflow Webhooks 連接起來

用例概覽

此設定將您在 MAKE 中的「購買後電子郵件」工作流程與 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
  • 在商店下單時使用的電子郵件地址？

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

此工作流程的功能為何

當客戶在您的電子郵件流程中提交表單後，資料會被新增至試算表中，隨後 MAKE 會將資料傳送至 Workflow Webhooks 網路掛鉤，而該網路掛鉤則會將此資料包傳送至 Shopify Flow：

perl
{
  "name": "Saad",
  "email": "customer@example.com",
  "store_url": "mystore.myshopify.com",
  "challenge_and_store_age": "thin Content | 1-3 years"
}

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

  • 新增客戶標籤「seo-audit-pending」
  • 新增一則包含商店網址及 SEO 挑戰的客戶備註

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

影片指南

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

最後，當我提交表單時，MAKE 中的觸發器無法正常運作，因此我重新執行了現有的事件；此外，流程中也出現了一個與 STEP（為客戶新增標籤）中的客戶 ID 相關的錯誤，我也已修正了這個問題。

開始之前

  • 請在您的 Shopify 商店中安裝並啟用「Workflow Webhooks」。
  • 請確保已準備好一個「Shopify Flow」工作流程，或於 Shopify Flow 建立一個新的工作流程。
  • 請在支援您的 MAKE 工作流程的工具中建立表單。我目前使用的是 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。

在 MAKE 中，選擇 Google 試算表觸發器（監控新列），選取您要監控的正確試算表，並執行一次；若連線成功，請儲存該情境。

圖片

接著在 MAKE 中選取「HTTP」→「建立請求」，將表單資料傳送至您透過 Workflow Webhooks 應用程式所建立的 Webhook。在「動作事件」中選取「POST 方法」，輸入 URL，並新增標頭。（驗證類型應設定為「無驗證」）

圖片

您可以依照 Workflow Webhooks 網頁鉤子頁面底部的說明，配合對應的欄位、API 憑證及網頁鉤子網址來進行設定。

圖片

接著，您可以按照以下方式將資料進行映射。

圖片

接著儲存並執行一次。

圖片

在呼叫記錄中，您可以看到外部系統已觸發此 webhook，並可查看其載荷。您可以在您的 Shopify Flow 中使用此載荷來執行任何動作。

圖片

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

圖片

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

圖片

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

圖片

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

圖片

現在請加入以下條件：若接收到的 Webhook ID 等於您為 MAKE 流程所建立的 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 中的正確客戶記錄已收到該標籤和備註。

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

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

圖片