Drive Sales Through Personalized E-commerce Experiences.👉🏼 Discover now

No cc required

Start Shopify trial Try PageFly freeTry PageFly free

Table of Contents

Shopify Webhooks をマスターする: ストアオーナーのための完全ガイド

当社の事業は、アフィリエイトから得られる手数料によって支えられています。 詳細

Shopify Webhook は、外部アプリケーションとの統合を構築し、Shopify ストアで発生するイベントにリアルタイムで応答するのに役立つ重要なツールです。Webhook サブスクリプションは、Shopify 管理インターフェースと API を介して Webhook を管理および作成する上で重要な役割を果たします。Shopify Webhook は、ストアで発生する特定のイベントに関連するイベント データを送信します。Shopify 管理ダッシュボードを介して Webhook を作成および管理するのは便利ですが、このインターフェースでは Webhook 関連のタスクを自動化することはできません。

この問題を解決するために、Shopify は Webhook API を公開し、ユーザーがプログラムを通じて Shopify の Webhook とやり取りできるようにして、機能の範囲を拡大しました。このガイドでは、Shopify API を使用して認証を設定する方法、次に Shopify Webhook API を使用して Webhook をより自動的かつ効率的に作成、管理、追跡する方法を学びます。この方法を試して、Shopify ストアとの統合を最適化しましょう。

Shopify Webhooks をマスターする: ストアオーナーのための完全ガイド

Shopify Webhook とは何ですか?

Shopify Webhookとは

Shopify Webhook とは何ですか?

Shopify Webhook の定義と目的: Shopify Webhook はどのように機能しますか?

Shopify Webhooks は、Shopify ストアでイベントが発生したときに、Web サイトから他のシステムに通知できるようにする機能です。Webhook サブスクリプションは、アプリを Shopify データと同期させ、特定のイベントに関するほぼリアルタイムのデータを受信する上で重要な役割を果たします。Shopify Webhooks の例:新しい注文を作成すると、顧客情報が自動的に CRM システムに送信され、データが更新されます。特に、Webhooks には、このデータを後で使用するために保存する機能もあります。

Shopify Webhookリソースの潜在的な使用例

1. 製品価格の調整: プロモーションや入力価格の変更などのイベントに基づいて、製品価格を自動的に更新します。

2. 注文の作成: 新しい注文情報を管理システムまたは会計システムに自動的に更新します。

3. 会計ソフトウェアとの統合: 注文と支払いのデータを会計ソフトウェアと同期します。

4. 顧客への通知: 注文状況や製品情報について、テキストまたはインスタント メッセージで顧客に通知を送信します。

5. データ収集: データをストレージ システムまたはデータ ウェアハウスに自動的にインポートします。

6. データを削除: 顧客がストアからアプリをアンインストールすると、顧客データが自動的に削除されます。

7. 出荷業者に通知: 商品を時間どおりに準備して配送できるように、新しい注文に関する通知を出荷業者に送信します。

Shopify Webhookの作成方法

Shopify Webhookの作成方法

Shopify Admin から Shopify Webhook を作成するためのステップバイステップ ガイド

1. Shopify管理画面で通知にアクセスする

次に、Shopify 管理画面に移動します。次に、左側のメニューから [設定] を選択し、[通知] をクリックします。

Shopify管理画面で通知にアクセスする

2. Webhooksセクションへの移動

この手順では、ページを下にスクロールして「 Webhooks 」セクションを見つけます。

Webhooksセクションへの移動

3. 新しいWebhookを作成する

Webhooks 」セクションを見つけたら、「 Create webhook 」というボタンが表示されます。そのボタンをクリックすると、新しいダイアログボックスが表示されます。

4. イベントと形式の選択

最初のドロップダウン メニューで、以下のShopify Webhook リストからイベントを選択する必要があります。

  • ショッピング カートを作成する:新しいショッピング カートが作成されるたびに Webhook を送信します。
  • カートの更新:カートに変更があるたびに Webhook を送信します。
  • 支払いの作成:新しい支払いが作成されたときに Webhook を送信します。
  • 支払いをクリア:支払いがクリアされたら Webhook を送信します。
  • 支払いの更新:支払い情報が更新されたときに Webhook を送信します。
  • コレクションを作成する:新しいコレクションが作成されたときに Webhook を送信します。
  • コレクションの削除:コレクションが削除されたときに Webhook を送信します。
  • コレクションの更新:コレクション情報が更新されたときに Webhook を送信します。
  • また、Shopify ストアでの注文、顧客、商品、ストア、テーマ、その他のアクティビティの作成、削除、更新など、他の多くのイベントもあります。
イベントと形式の選択

5. URLを入力してWebhookを追加する

URL セクションでは、データを保存する URL アドレスを入力できます。ただし、Webhook は次の URL を返すことができないことに注意してください。

  • internal 」という単語で終わる URL (例: thisshop.com/i Internal)。
  • ローカル サーバー。
  • Shopify のドメイン名 (例: shopify.com、myshopify.com)。
  • www.example.com のような偽のドメイン。
URLを入力してWebhookを追加する

6. オプション: Webhook のテスト

送信したい情報が正しい URL に送信されることを確認するには、「テスト メッセージを送信」リンクをクリックして Webhook をテストします。これにより、入力した URL が正しく機能していることを確認できます。

URLを入力してWebhookを追加する

Shopify API を使用して Shopify Webhook を作成するための代替方法

Shopify API を使用して Shopify Webhook を作成するための代替方法

ShopifyストアAPIの設定

API を使用して Shopify で Webhook を作成するには、https://{shop}.myshopify.com/admin/{version}/webhooks.json にある Webhook API エンドポイントにアクセスする必要があります ({} 内の値を自分の値に置き換えることを忘れないでください)。

これを行うには、必要なデータを含む POST リクエストをこのエンドポイントに送信する必要があります。任意の HTTP クライアント (Postman、Curl など) を使用できます。このチュートリアルでは、使いやすく便利な ReqBin を使用します。

このチュートリアルで作成する Webhook の場合、「注文の作成」イベントなどの注文関連のイベントをサブスクライブする必要があります。このイベントは、ストアで新しい注文が作成されたときにトリガーされます。

Webhook リクエストで送信されるデータは、次の構造である必要があります。

{

「ウェブフック」: {

"トピック": "注文/作成",

"アドレス": "{webhook_url}",

「フォーマット」: 「json」

}

}

前のコードでは、Webhook は json としてフォーマットされているので、{webhook_url} を Hookdeck CLI セッションで作成された Webhook URL に置き換えることを忘れないでください。

次に、ブラウザを開いて https://reqbin.com にアクセスします。API URL をアドレス フィールドに貼り付け、リクエスト メソッドとして POST を選択します。認証のために、次のように X-Shopify-Access-Token フィールドをヘッダー セクションに追加します (MY_ACCESS_TOKEN を Shopify アプリのパスワードに置き換えます)。

これで、ヘッダーの情報が「Ingredients」セクションの詳細にマッピングされます。次に、「Content」セクションに移動して、リクエスト オブジェクトを貼り付けます。リクエストの設定方法については、以下のスクリーンショットの例を参照してください。

次に、[送信] ボタンをクリックして新しい Webhook を生成します。完了すると、以下に示すように、成功の応答が返されます。

これは、注文などのイベント用の Webhook の作成や、Shopify ストアでのテーマの作成に成功したことを示します。

さらに、API を通じて、更新、検索、削除などの他の Webhook アクションを実行することもできます。これらの操作を実行する方法の詳細については、Shopify Webhook API ドキュメントを参照してください。

Webhookをテストする

ローカル Webhook のキャプチャと受信 API を設定し、API を通じて Webhook を登録したので、設定をテストします。

登録されたイベントの Webhook を受信するには、新しい注文を作成してイベントをトリガーします。これは、Shopify 管理インターフェースで簡単に行うことができます。以下は、ベン・シモンズの 76er ジャージを注文した例です。

注文を作成すると、Shopify は注文/作成イベントの Webhook を起動します。

以下のように、Hookdeck CLI セッションでこのメッセージが表示されます。

ログとWebhook情報を確認する

Webhook のログと情報を調べるには、Hookdeck CLI を使用してイベント ページへの URL を提供し、そこで Webhook データを分析できます。この URL は、Webhook を作成したときに CLI 出力に表示されます。この URL をコピーしてブラウザーで開くと、イベント ページで Webhook の詳細 (ヘッダー セクションの Webhook タイトルを含む) が表示されます。

Webhook のペイロードの内容を表示することもできます。

最後に、ローカル API が Webhook ペイロードをログに記録していることを確認します。ブラウザでローカル API の /fetch-webhooks-logs エンドポイントにアクセスすると、次のような画面が表示されます (最初のオブジェクトはスキップしてください)。

すでに、Webhook ID、注文内のアイテムの合計数、Webhook が送信された時刻を記録できます。

Shopifyウェブフックを確認する

Shopify からの Webhook を検証することは、このソースから受信したデータの整合性を確保するための重要なステップです。Shopify が Webhook を送信すると、Webhook ペイロードの暗号化バージョンを含む X-Shopify-Hmac-Sha256 ヘッダーも含まれます。これは、公開キーと HMAC 暗号化アルゴリズムを使用して行われます。

システム上の Webhook を検証するには、同じ公開キーと HMAC アルゴリズムを使用して、暗号化されたバージョンの Webhook ペイロードを再計算する必要があります。次に、その結​​果を X-Shopify-Hmac-Sha256 ヘッダーで送信された値と比較します。一致した場合、ペイロードが有効であり、Shopify から送信されたことを意味します。ただし、一致しない場合は、データの改ざんまたは変更がある可能性があるため、この状況に適切に対処する必要があります。

コードでは、この検証は通常、server.js ファイルにある validPayload などのミドルウェア関数を通じて実行されます。

定数sigHeaderName = 'x-shopify-hmac-sha256';

定数sigHashAlg = 'sha256';

const シークレット = "xx-xx-x";

.....

/* 関数validatePayload(req, res, next) {

if(req.method == "POST"){

生のボディが必要な場合

return next('リクエスト本文が空です')

}

定数ボディ = req.rawBody;

const hmacHeader = req.get(sigHeaderName);

//解析された本文に基づいてハッシュを作成する

const ハッシュ = 暗号

.createHmac(sigHashAlg、シークレット)

.update(本文、"utf8"、"16進数")

.digest("base64");

// 作成されたハッシュをX-Shopify-Hmac-Sha256ヘッダーの値と比較します

if (ハッシュ !== hmacHeader) {

return next(`リクエストボディダイジェスト (${hash}) が ${sigHeaderName} (${hmacHeader}) と一致しませんでした`)

}

}

次を返す()

}

app.use(ペイロードを検証); */

Shopify APIによる認証

プライベート アプリの資格情報を使用して Shopify API を使用するときに認証できる方法は 3 つあります。

1) ユーザー名とパスワードを組み合わせる

アプリが基本認証をサポートしている場合は、リクエスト URL で認証情報を直接渡すことができます。これを行うには、URL の先頭にユーザー名とパスワードを追加します。例:

https://{ユーザー名}:{パスワード}@{ショップ}.myshopify.com/admin/api/{バージョン}/webhooks.json

そこには:

- {username}: は API キーです。

- {password}: プライベート アプリのパスワードです。

- {shop}: Shopify ストアのサブドメインです (例: myshop)。

- {version}: 使用している API バージョンです (例: 2021-10)。

この URL を使用して Shopify API に送信されたリクエストはすべて自動的に認証されます。

2) 認証トークンを使用する

クライアントが基本認証をサポートしていない場合は、認証トークンを使用できます。トークンは、ストア アプリの API キーとパスワードを組み合わせ、結果の文字列を base64 でエンコードすることによって生成されます。このトークンは、リクエストの「Authorization」ヘッダーで送信されます。例:

認証: 基本 NDQ3OGViN2FjMTM4YTEzNjg1MmJhYmQ4NjE5NTZjMTk6M2U1YTZlZGVjNzFlYWIwMzk0MjJjNjQ0NGQwMjY1OWQ=

3) 「X-Shopify-Access-Token」ヘッダーを使用する

最後の方法は、「X-Shopify-Access-Token」ヘッダーをプライベート アプリ パスワードとともに使用することです。このパスワードはリクエストのヘッダーで送信されます。例:

X-Shopify アクセストークン: {my_app_password}

これら 3 つの方法を使用すると、アプリを認証して、Shopify から Webhook を安全かつ効率的に送受信できます。

Shopify API を使用して Shopify Webhook を設定および受信する

Shopify API を使用して Webhook を作成し、Webhook ログの設定を開始する前に、次の手順を実行する必要があります。

Webhook サブスクリプションを設定するには、Webhook を受信するエンドポイントを定義し、イベント メッセージのトピックを指定する必要があります。

  1. デモ API コードをコピーし、ローカルマシン上で実行します。
  2. Hookdeck CLI を使用して、ローカル API エンドポイントを指す Webhook URL を作成します。
  3. Shopify API を使用して Webhook を作成します。
  4. サブスクリプション イベントを発生させて Webhook をテストします。
  5. Webhook ログを確認し、Webhook が機能していることを確認します。
  6. Webhook ペイロードを確認します。

Shopify API を使用して Webhook サブスクリプションを作成、アクティブ化、および変更することは、アプリを Shopify データと同期させるために不可欠です。Webhook サブスクリプションを作成するには、HTTPS リクエストを受信するエンドポイントを定義し、SSL 構成が正しく設定されていることを確認する必要があります。Webhook ペイロードを適切に処理することは、特定のイベントに関するほぼリアルタイムのデータを処理するために不可欠です。Shopify 管理インターフェースまたは API を介して、Webhook サブスクリプションを確認、作成、および変更できます。

これらの手順を実行すると、Webhook を効果的に作成してテストする準備が整います。始めましょう。

デモ API を複製するには、次の手順を実行します。

1ターミナルを開き、次のコマンドを実行して、 APIのアプリケーション リポジトリを複製します。

git clone –single-branch –branch shopify-webhooks

次のコマンドを使用してプロジェクトのルート ディレクトリに移動します。

cd nodejs-webhook-server-example

  1. 次のコマンドを使用して、必要な依存関係をインストールします。

npmインストール

  1. インストールが完了したら、次のコマンドで Node.js サーバーを起動できます。

npm スタート

  1. これにより、API クライアントが起動し、API が現在実行されており、ポート 1337 で接続をリッスンしていることを示すメッセージが画面に表示されます。

このアプリケーションには 2 つのエンドポイントがあります。

  • /log-shopify-webhook : このエンドポイントは、Shopify から Webhook を受信し、メモリ内データベースに保存します。Webhook ペイロードからの情報のサブセットを含む単純なオブジェクトをキャプチャします。
  • /fetch-webhooks-logs : このエンドポイントを呼び出すと、ログに記録された Webhook データのセットを取得できます。

Hookdeck CLI を使用して Webhook URL を作成するには、次の手順を実行します。

  1. ターミナルを開き、次のコマンドを実行します (注意: サンプル プロジェクトを使用していない場合は、ポート値 1337 を API が実行されているポート番号に置き換えてください)。

フックデッキ 聞く 1337

2. このコマンドは対話型セッションを開始し、CLI は Webhook URL を作成するエンドポイントに関する情報を要求します。以下は、質問と、それぞれに入力する必要がある回答です。回答するたびに Enter キーを押すようにしてください。

プロンプト

答え

どのソースを選択すればよいでしょうか?

新しいソースを作成します(以前に接続を作成していない場合、このプロンプトは表示されません)

新しいソースラベルは何にすべきでしょうか?

ショッピファイ

Webhook をどのパスに転送する必要がありますか (例: /webhooks)?

/log-shopify-webhook (独自のカスタムサーバーを使用している場合は、この値をエンドポイントに置き換えます)

接続ラベルとは何ですか (例: My API)?

購入ログAPI

必要な情報が揃うと、CLI は Webhook URL の生成プロセスを開始します。プロセスが完了すると、URL が画面に表示され、CLI はリクエストを受信する準備ができたことを通知します。

注: ゲスト モードで CLI を使用している場合は、コンソールからゲスト ログイン URL リンクを使用してダッシュボードにアクセスする必要があります。これをコピーしてブラウザに貼り付け、ゲスト ログイン セッションを開始します。

Shopify Webhookの使い方

Shopify Webhook を設定するにはどうすればいいですか?

Shopify で Webhook を構成する方法は 2 つあります。1 つ目は API を使用する方法で、2 つ目は Shopify 管理インターフェースを使用する方法です。

API を使用する場合は、HTTP POST リクエストを作成し、Shopify REST Admin API の Webhook リソースに送信する必要があります。

Shopify 管理インターフェースから設定する場合は、次の 3 つの手順に従います。

ステップ 1: 管理者で [設定] を選択し、[通知] に移動します。

ステップ 2: Webhook を見つけて選択し、「Webhook の作成」をクリックします。

ステップ 3: 聞きたい形式を選択します。JSON または XML を選択できます。

Webhook を作成したら、その整合性を検証する必要があります。これを行う方法については、Shopify で Webhook をテストする方法について引き続きお読みください。

ShopifyでWebhookをテストするにはどうすればいいですか?

Beeceptor などのパブリック サービスを使用することも、ローカル サーバーを実行することもできます。サーバーをローカルで実行することを選択した場合は、ngrok や Pagekite などのサービスを使用して公開されていることを確認してください。以下は、Webhook エンドポイントとしてサポートされていない URL です。

  • 「internal」という単語で終わる URL (例: thisshop.com/internal)
  • ローカルサーバー
  • Shopify ドメイン (例: shopify.com、myshopify.com)
  • www.example.com のような偽のドメイン

Shopify 管理画面で Webhook をテストするには、次の操作を実行します。

ステップ 1: [通知] セクションで [Webhooks] セクションを見つけます。

ステップ 2: テストする Webhook の横にある [テスト通知の送信] ボタンをクリックします。

サンプル Webhook が、構成された Webhook URL に送信されます。

Shopify で Webhook エンドポイントを作成する方法は?

Shopify で Webhook エンドポイントを作成するには、エンドポイントが有効な SSL 証明書を持つ HTTPS Webhook アドレスであることを確認する必要があります。これにより、エンドポイントが Shopify からのイベント通知を正しく受信して処理できるようになります。さらに、Webhook リクエストが Shopify からのみ送信され、改ざんされていないことを確認するための検証も実装する必要があります。

  1. 安全で信頼性の高い Webhook のベスト プラクティス

安全で信頼性の高い Webhook のベスト プラクティス

安全な URL エンドポイントとデータ暗号化の重要性を強調します。

アプリが一時的に利用できなくなり、Webhook が失われた場合、URL エンドポイントを保護し、復元時にデータを暗号化することが重要です。アプリが復旧したときに情報を修正して保護するには、次の手順に従う必要があります。

1. URL エンドポイントのセキュリティを確認する: データ交換をセキュリティの脅威から保護するために、エンドポイントが HTTPS プロトコルを使用し、有効な SSL 証明書を持っていることを確認します。

2. 復元時にデータを暗号化する: データを Webhook ハンドルに統合する前に、不正な開示やアクセスを防ぐために、データが完全に暗号化されていることを確認します。

3. Webhook を再登録する: エンドポイントをテストして検証した後、必要な Webhook を再登録し、確立された安全基準に準拠していることを確認します。

これらの手順を適用することで、アプリケーションがオンラインに戻ったときに、情報とデータが安全かつ効果的に保護されることが保証されます。

ユニーク: エラーを処理し、Webhook の配信を確実に行うためのヒントを提供します。

Shopify は効果的な重複排除メカニズムを適用し、多数のアクティビティによる重複や過負荷を防止します。このメカニズムにより、10 秒ごとに最新の情報を含む Webhook が 1 つだけ発行されます。

例: 新しい商品を作成し、10 秒以内に継続的に更新する場合、生成される Webhook は 2 つだけです。最初の Webhook は商品作成イベントを記録し、2 番目の Webhook はその期間後の最終更新を提供します。Webhook イベントを効果的に管理し、正確な配信を確保するには、Webhook 処理にエラー処理と品質管理戦略を組み込む必要があります。これには、エラーを迅速に認識して回復するための対策を講じるとともに、重複または無視された Webhook イベントに対処するために一時的な状態を保存することが含まれます。このアプローチは、処理効率を最適化するだけでなく、データが正確かつ確実に配信されることを保証し、Shopify Webhook システムの保守性を向上させます。

スケーリングとトラブルシューティング

大容量の Webhook に関する潜在的な課題 (スケーリング、エラー処理) について説明します。

アプリケーションが Webhook を処理するのに 3 秒かかるとします。5 秒以内に応答を返すことができます。ただし、3 つの Webhook を同時に受信する場合、必要な時間は 9 秒になり、2 番目の Webhook はタイムアウトが経過する前に完了しません。

たとえば、花を販売し、1 日平均 10 件の注文を処理する Shopify ストアがあるとします。顧客が注文したときに配送サービスをトリガーする Webhook を設定しました。配送サービスは平均的な 1 日の注文量を簡単に処理しますが、バレンタインデーが近づくと、注文数が 1 日あたり 300 件に増加します。

配送サービスで毎日 300 件の Webhook を受信し始めると、アプリケーションのサーバー リソースが急速に消費され、サービス エラーにより Webhook がドロップされるようになります。Webhook がドロップされ始めると、注文して支払いをした多くの顧客が注文を受け取れなくなります。

では、こうした避けられない状況を最小限に抑えるにはどうすればよいでしょうか。標準的な解決策の 1 つは、サーバーのハードウェア機能を拡張して処理速度を上げることです。また、水平スケーリング技術を使用して Webhook ジョブを分散することもできます。

ただし、Shopify で迅速に応答する最善の方法は、Webhook を非同期的に処理することです。このアプローチでは、Shopify は応答を受信する前にアプリが Webhook の処理を​​完了するまで待つ必要がありません。

Shopify Webhookの非同期処理を実装する方法の 1 つは、Shopify とアプリの間でメッセージ ブローカーを使用することです。この仲介者は Shopify から Webhook を受信し、すぐに応答を Shopify に返します。次に、ブローカーはアプリケーションが処理できる速度で Webhook をアプリケーションにルーティングします。

こうすることで、 Shopify Webhook がタイムアウトすることはなくなり、アプリのサーバー リソースが不足することもなくなります。

  • 一般的な Webhook の問題をトラブルシューティングするためのリソースを提供します。

アプリでShopify Webhookを使用する場合は、失敗した Webhook 配信通知を監視して処理することが重要です。Shopify では、再送信の試行が 19 回連続して失敗すると Webhook を削除します。Webhook 配信メトリクス レポートを使用して、配信エラーのトラブルシューティングを行い、パフォーマンスを向上させることができます。アプリ ユーザーに影響を与えないように、失敗した Webhook 配信通知を監視して処理するようにしてください。

Webhookで配送状況を確認する

  • 失敗したWebhook配信通知

Webhook の配信が 13 回連続して失敗すると、Shopify からメールで通知されます。問題が解決されるか、Webhook が削除されるまで、通知は毎日送信されます。パートナー ダッシュボードのアプリの通知はアプリの API メールに送信され、カスタム アプリは開発者のメールで通知を受け取ります。

結論

このガイドでは、 Shopify Webhook を使用してストアの管理と他のアプリとの統合を最適化する方法について説明しました。Webhook の作成からデータの整合性のテストと検証まで、概要と安全で効果的な実装方法を提供しました。

ストアの自動化と柔軟性を高めるために、Webhook の活用を推奨します。非同期処理を適用し、Webhook 配信エラーの解決策を使用することで、ピーク時でも統合が常に効率的に実行されるようにすることができます。Webhook のパワーを活用することで、Shopify ストアの運用を最適化し、優れた顧客体験を提供できます。ためらわずに、Webhook の可能性を最大限に活用し、今すぐストアをアップグレードしましょう。

FAQs

Explore Now