Workflow WebhooksWorkflow Webhooks

如何將 Zapier 與 Workflow Webhooks 連接起來

用例概覽

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

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

此工作流程的功能為何

當客戶在您的電子郵件流程中提交表單後，資料會被新增至試算表中；隨後 Zapier 會將資料傳送至 Workflow Webhooks 的 webhook，而該 webhook 則會將此資料包傳送至 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」管理後台開啟客戶紀錄，並在稽核開始前確認哪些事項需要處理。

影片指南

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

開始之前

  • 請在您的 Shopify 商店中安裝並啟用「Workflow Webhooks」。
  • 請確保已準備好一個「Shopify Flow」工作流程，或於 Shopify Flow 中建立一個新的工作流程。
  • 請在餵送 Zapier 工作流程的工具中建立您的表單。我目前使用的是 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 試算表觸發器中，請選擇您要監控的正確試算表，並在表單中建立一則測試記錄，以查看資料。

圖片

接著選擇「Webhooks by Zapier」動作，將表單資料傳送至您使用「Workflow Webhooks」應用程式所建立的 webhook。在動作事件中選擇「POST」，然後繼續。

圖片

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

圖片

我在 Zapier 的「Webhooks」動作中，已新增網址、選取 JSON 作為資料類型，並依如下方式新增了標頭與資料。

圖片

接著使用擷取到的資料進行測試，然後發布。

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

現在檢查該客戶是否存在。我正在檢查該客戶編號是否存在。

圖片

接著加入標籤 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 中的正確客戶記錄已收到該標籤和備註。

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

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

圖片