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

ユースケースの概要

この設定により、MAKEの購入後メールワークフローと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
ストアで注文の際に使用したメールアドレスですか？

お客様がフォームを送信すると、MAKEは回答をWorkflow Webhooksエンドポイントに送信します。その後、Shopify Flowがお客様にタグを付け、メモを追加することで、SEOチームはShopifyの管理画面でその背景情報をすぐに確認できるようになります。

このワークフローの機能

お客様がShopify Flow内のフォームを送信すると、データがスプレッドシートに追加され、そこからMAKEがデータを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」を追加します
ストアのURLとSEO上の課題を記載した顧客メモを追加します

これにより、チームはShopifyの管理画面でお客様レコードを簡単に開き、監査が始まる前にどのような点に注意が必要かを確認できるようになります。

動画ガイド

こちらでは、セットアップ全体の動画をご覧いただけます。動画には音声がありません。必要に応じて、動画の再生速度を調整することができます。

結局、フォームを送信した際、MAKEでトリガーが機能していなかったため、既存のイベントを再実行しました。また、Shopify Flow内で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 の Webhook の下部に記載されている手順に従い、マッピングされたフィールド、API トークン、および Webhook の URL を設定してください。

その後、次のようにデータをマッピングすることができます。

その後、保存して一度実行してください。

呼び出し履歴では、外部システムがこの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 -%}

お客様メモにストアのURLとSEOに関する課題を追加または更新してください。お客様情報を取得するために、設定では、お客様IDを配置する際に以下のコードを使用しました。の空白文字処理機能（）を、タグ構文{{-、-}}、{%-、および-%}内で使用し、お客様IDの左右にある空白文字を除去しました。空白文字が含まれていると、クエリが正常に動作しません。

ruby

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

ワークフローを有効にし、フォームからテスト用のレスポンスを送信して、Shopify内の正しいお客様レコードにタグとメモが反映されることを確認してください。

仕組みは以下の通りです。フォームが送信されると、MAKEがデータを受信し、そのデータをWorkflow WebhooksのWebhookに送信します。すると、Workflow WebhooksのWebhookがShopify Flowをトリガーします。そこで、Webhook IDに基づいてShopify Flowのトリガーをフィルタリングし、そのIDに基づいてお客様情報を取得します。お客様が存在するかを確認した後、タグを追加し、メモを追加します。

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