![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/Webhook-1-900x600.jpg)
Webhookを利用してHubSpotと他のツールを連携させると、HubSpotでおきたイベントを他のツールに通知したり、他のシステムからデータを取得してHubSpotのレコードに反映できたりします。他にも、さまざまな連携が可能なので、HubspotでWebhookを扱えるようになると、とても便利です。
しかし設定方法が複雑であるため、どのように設定を進めれば良いのかわからない人も多いのではないでしょうか。今回はWebhookを利用してHubSpotと他のツールを連携させる方法を紹介します。
なお、Webhookを利用するためには、アプリ開発やコードに関する知識が必要です。FLUEDではWebhookを使った開発にも対応できますので、挫折しそうになったら、弊社に相談していただくのもおすすめです。無料相談会も実施中ですので、この機会にぜひお申し込みください。
HubSpotの使い方、活用方法が聞ける、無料のオンライン相談会を開催中です。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/06/HubSpot2.jpg)
「HubSpotで何ができるか知りたい方」はもちろん、「すでに利用しているがもっとフル活用したい方」もお気軽にご相談ください。
詳細は「HubSpotをより活用したい方へ!無料のオンライン相談会を実施中!」をご確認ください。
▼ 今すぐHubSpot無料相談会を予約
コンテンツ目次
Webhookの基本
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/david-pupaza-Q9-QEy1_jYI-unsplash-1024x683.jpg)
Webhookとは、Webアプリケーションでイベントが実行された際に外部サービスにHTTP で通知する仕組みです。
特定のサービスでイベントが発生した際に、HTTPを介して指定の宛先へデータを送ります。このときに指定の宛先へデータを送ることをHTTPリクエストと呼び、GETリクエストとPOSTリクエストの2パターンがあります。
ここではHTTPの概要と、HTTPリクエストの種類をわかりやすく解説します。
専門的な話でやや難しいのですが、HubSpotでWebhookを利用する際は、ここで紹介するGETリクエストやPOSTリクエストなどを用いる場面もでてきます。簡単に概要だけでも掴んでみてください。
HTTPとは
HTTPとはHypertext Transfer Protocolの略で、Webサイトを表示する際に使用されるプロトコルです。プロトコルは、情報やデータをやり取りする際のルールです。
たとえば、言葉の違う国の人々が英語という共通の言葉(プロトコル)を使うと、うまく情報を交換できます。対して、言葉の違う国の人同士がそれぞれの国の言葉で会話をしても情報をやり取りすることが難しいです。
HTTPは通信ネットワークにおける共通言語みたいな感じで、簡単に考えてもらうといいかもしれません。
通信ネットワークの世界も同じようにHTTPと呼ばれるプロトコルを使うことで、データのやり取りができる仕組みになっているのです。そしてHTTPを介したデータのやり取りは、HTTPリクエストと呼ばれる仕組みで行われます。
HTTPリクエストの種類
HTTPリクエストとは、利用者から投げられた求め(リクエスト)に対してWebサーバーが適切なレスポンスを返す仕組みです。
たとえば利用者が特定のページを表示するようにリクエストしたら、サーバー側は該当ページを表示するようにレスポンスを返します。
リクエストのタイプには、データの取得や保存、消去などさまざまなものがありますよ。
GETリクエストとPOSTリクエストの2タイプがあるので、それぞれ解説します。
GETリクエストとは
GETリクエストは、URLの後ろにリクエストの内容を含めてサーバーに送る方法です。指定されたURLの内容を取り出す際に利用されることが多いです。
GETリクエストを行った場合、URLの「?」以降にリクエストの内容が記載されます。たとえばURLが次のように表示されます。
導入検討に役立つMAツール比較一覧を無料公開! |
GETリクエストの場合、URLにリクエスト内容が記載されるため、送信した情報が丸見えになります。そのため重要な情報は、POSTリクエストを利用します。
ちなみに、「?」以降の「名前=値」部分をリクエストパラメーターと呼びます。複数のリクエストがある場合は、「&」でつなぎます。
POSTリクエストとは
POSTリクエストは送信する内容をコードのBody部分に格納して送る方法です。GETリクエストとは異なりURLの後方にリクエストパラメーターが記載されないため、リクエスト内容が表からは見えないようになっています。
そのため、お問い合わせフォームや登録画面など、個人情報などの重要な情報を利用者が入力する際に利用されます。
Webhookの基本について少し長くなりましたが、次はHubSpotとWebhookの連携について説明しますね。
HubSpotとWebhookを連携してできること
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/john-schnobrich-FlPc9_VocJ4-unsplash-1-1024x683.jpg)
Webhookを利用すると、HubSpotと他のさまざまなツールを連携させられます。連携すると、HubSpotアカウント上で発生したイベントの連携ツールへの反映が可能です。たとえば、以下のことができます。
- 別のシステムからデータを取得してHubSpotのレコードを更新する
- 取引データを外部出荷処理システムに送信して注文書を作成する
- 社内のチャットストリームにチャットアラートを送信し、重要な情報を従業員に共有する
- HubSpot内の特定のアクションに合わせて、顧客に対して自動でメッセージを送信する
- Slackなどのチャットツールに自動でチャンネルを開設したり、関係者を招待したりする など
けっこう自由度が高く便利なのですが、アプリ開発などの専門知識が必要です。
Webhook APIを利用するためにはHubSpotアプリが必要
Webhook APIを利用するためには、HubSpot内で開発アカウントを作成したうえで、APIを活用してアプリを開発する必要があります。コードの専門知識が必要ですので、API開発に詳しいスタッフが必要かもしれません。
もし適任スタッフが不在で、やり方がわからない場合は開発のサポートやアドバイスをFLUEDにご相談ください。
HubSpotワークフローでWebhookを使用する流れ
HubSpotのワークフローを使うと、複雑なコードを入力しなくてもWebhookを利用して他のツールと連携できます。ここでは、HubSpotワークフローでWebhookを使用する流れについて解説します。
ワークフローでWebhookをセットアップする手順
まずはワークフローでWebhookをセットアップしましょう。次の手順で行ってください。
1.HubSpotアカウントにて、[ワークフロー]をクリックする
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/20b1cfbe15a3560dd2b8109523cbf3b6-1024x523.png)
2.Webhookで連携させたいワークフローの名前をクリック
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/2eb574da3faf6063cd500aef880735f1-1024x453.png)
3.+アイコンをクリックして、アクションを追加後に、右側のパネルで[Webhookを送信]を選択。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/f23ba86cb077f8e640a744000fe5f0a4-1024x477.png)
4.[メソッド]ドロップダウンメニューをクリックし、[POST]または[GET]を選択。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/0349796ae8cd24dd02d6fb0caae41fba.png)
5.WebhookURLを入力。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/3d0347326e280de77c80dccc55cc0a11.png)
POSTとGETのいずれを選択しても、WebhookURLを入力します。またWebhookURLには安全なプロトコルにする制限があるため、httpsで始まるURLを指定しましょう。
以降の項目設定はPOSTとGETリクエストで変わりますので、分けて解説します。
POSTリクエストの設定
POSTリクエストを設定する場合は、まずは認証タイプを選択します。認証タイプを指定すると、適切な送信に対してのみ処理が進められます。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/530360dbf070d4d8e6216b01eea5974c.png)
「ヘッダーにリクエスト署名を含める」を選択すると、HubSpotアプリIDを入力します。アプリIDを入力すると、それをもとにリクエスト署名が作成されます。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/e6bfd0763e712e901cdb7e03be96ce94.png)
認証には、APIキーの使用も可能です。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/932951656870c2aa25d60a52ec47429b.png)
認証タイプでAPIキーを選択後に、以上の3つの項目を設定すると、APIキーを利用した認証ができます。
GETリクエストの設定
メソッドで「GETリクエスト」を選択した場合は、クエリパラメーターを設定します。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/491dd26b150c49777a5fa7544049937e.png)
クエリパラメーターは、WebhookURLの後半につけるリクエストする内容を表す文字列ですね。
POSTリクエストをカスタマイズする方法
POSTリクエストをカスタマイズする場合は、「リクエスト本文をカスタマイズ」を選択してキーや値の中に、必要な情報をそれぞれ入力するよいです。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/b88428301dff211bd7cedbb9755c355c.png)
GETリクエストをカスタマイズするする方法
GETリクエストをカスタマイズする場合は、クエリパラメーターの項目でキーや値を設定するとよいです。プロパティの数も自由に追加できます。
Webhookをテストする方法
最後にWebhookをテストして、正しくWebhookでHubSpotと目的のツールを連記できたのかを確認してみてください。
HubSpot内でWebhookをテストする
HubSpot内でWebhookをテストする場合は、まずは設定項目の最下部にある「アクションをテスト」をクリック。その後、出力するコンタクトを選択、最後にテストをクリックすると実行できます。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/6a86c7a5d19fcf8b3987df1f758833eb.png)
外部でWebhookをテストする
外部でWebhookをテストする手順は次のとおりです。
1.Webhookのサイトにアクセスして、指定のURLをコピーする
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/53ee9958478613a2e6486c20236cd4db-1024x405.png)
2.Webhook URL にペースト
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/02/8a72aa475246ad8cbc0433854d1725c1.png)
ワークフローがオンになると、テストコンタクトを手動で登録可能です。
Webhookを利用したHubSpotの連携でお困りの場合はご相談ください
今回は、Webhookを利用したHubSpotの連携方法について解説しました。うまく連携できるととても便利なのですが、Webhookを利用するためには専門知識が必要であるため、連携させるまでが大変です。
FLUEDではHubSpotとWebhook連携を活用した開発をたくさんやっているので、ぜひお気軽に問い合わせください。
HubSpotの使い方、活用方法が聞ける、無料のオンライン相談会を開催中です。
![](https://eigyou-dx.jp/wp-dx2021/wp-content/uploads/2023/06/HubSpot2.jpg)
「HubSpotで何ができるか知りたい方」はもちろん、「すでに利用しているがもっとフル活用したい方」もお気軽にご相談ください。
詳細は「HubSpotをより活用したい方へ!無料のオンライン相談会を実施中!」をご確認ください。
▼ 今すぐHubSpot無料相談会を予約