n8nとWorkflow Webhooksを連携させる方法

ユースケースの概要

この設定により、n8nの購入後メールワークフローとWorkflow Webhooksを連携させ、月次SEO監査のためのお客様情報を収集し、それをShopify Flowに引き継ぐことが可能になります。

この例では、お客様にはアンケートフォーム（ここではGoogleフォームを使用しており、GoogleフォームからGoogleスプレッドシートにデータが追加されます）が記載されたメールが届き、以下の項目についてお尋ねします：

ShopifyのストアURLは何ですか？
現在、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」を追加します
ストアのURLと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 の Webhook の下部に記載されている手順に従い、マッピングされたフィールド、API トークン、および Webhook の URL を設定してください。

n8nのHTTPリクエストアクションで、URLを追加し、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 -%}

お客様メモにストアのURLと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 に基づいてお客様情報を取得します → お客様が存在するかどうかを確認します → タグを追加します → メモを追加します

お客様には、以下の画像のようにタグとメモが表示されます。