Marketing n8n Demo

Shan
Categories
Translations: EN, ZH

基於實驗精神，和客戶一起做了一個小型的流程串連，要做的事很單純:

  • 使用者填表單加入電子報
    • 寄出歡迎信
    • 將使用者加入email list (Google Sheets)

因為是試用webhook，表單只在本地環境沒有上線，欄位內容檢查也先跳過 (偷懶)

整個流程:

  • Webhook收到表單資訊
  • 讀取資料和欄位比對
    • 成功的時候會發送email，並寫入Google Sheets “工作表1”
    • 失敗的時將錯誤訊息寫入Google Sheets的ErrorLog 分頁

n8n welcome flow

記錄一下每個node的設定

Webhook

按下project右上角的加號 (Open nodes panel)，打開nodes選擇清單並找到Webhook

選了之後會出現編輯畫面，在HTTP Methods欄位選擇POST (表單的預設方法是POST)，就會得到Test URL，會很像n8n Docs的範例截圖，只是其中的GET Method會改成POST。

將Test URL設定為表單的request發送目標，例如表單程式碼有一個submitForm function專門用來送出reuqest:

function submitForm(data) {
  const URL = "https://your-project.app.n8n.cloud/webhook-test/test-url-path"

  fetch(URL, {
    method: 'POST',
    body: JSON.stringify(data),
  })
}

表單資料比對

n8n收到的表單欄位可能和Google Sheets工作表的欄位不同，所以通常需要手動對上。再次點開Open nodes panel並找到 Edit Fields node

在這個例子中，雖然欄位相同但還是用了手動比對

  • Google Sheets工作表欄位: email、name、phone
  • 表單送出的欄位: email、name、phone

n8n edit fields

其他設定用預設即可

發送email

n8n nodes 支援很多種email發送服務，像是 Mailchimp、Mailgun、Zoho email、Brevo、或是自訂的Email Trigger (IMAP)。這次試用免費的Brevo

設定方式是將在Brevo建立好的API Key (SMTP & API -> API keys & MCP)，貼到 Connect欄位即可，串接好帳戶之後也能使用在Brevo建立好的Template (Campaigns -> Templates)

寄送位址選擇Edit Fields產出的email欄位

n8n brevo

Google Sheets

Google Sheets node 設定方式和Brevo node有點像，都是在連接帳戶 (Connection)之後，用下拉選單選擇要用的工作表

連接Google的方法比較多: 直接登入、OAuth2、Service Account

連好之後貼上Google Sheets URL，就可以看到可以用的工作表

新增的node，成功和失敗的node有點不同

  • 成功: 新增或更新資料，如果email相同就更新，不然就新增
  • 失敗: 新增，收集錯誤log的工作表一直新增就好了

n8n google sheets

測試

測試的時候按下畫面下方的 Execute workflow，webhook就會開始監聽表單送出的request，也啟動整個工作流

n8n workflow