HubSpotと自社フォームをトラッキングコード連携した話

こんにちは。株式会社IVRy （アイブリー）のエンジニアのsagawaです。

みなさん、HubSpotというサービスをご存知でしょうか？

HubSpotとはCRM（顧客関係管理）を中心としたマーケティングプラットフォームです。HubSpotにはCMSや営業支援システムなど様々な機能がありますが、IVRyではこのうちのマーケティングオートメーションツールを利用しています。

https://www.hubspot.jp/

Webマーケティング活動においては、アカウント登録や資料請求のお問い合わせといった訪問された方の行動、つまりコンバージョンを計測することが重要になります^[1]。

IVRyではこれらのフォームを内製していますが、HubSpotを導入する際、これらのコンバージョン情報をHubSpotにどのように連携するか検討して実装する必要がありました。

本記事ではその検討内容と実装内容について紹介していきます。

HubSpot連携手法の検討

コンバージョン時の情報をHubSpotに連携する方法は多岐に渡ります。
今回はその種類と選定にあたっての判断軸を見ていきます。

HubSpotのフォームかHubSpot以外のフォームか

まず、HubSpotにはフォーム自体を作成する機能があり、このフォームを利用するとそれだけでコンバージョン情報を収集することが可能です。作成したフォームはWebサイトに埋め込むこともできれば独立したページとしても利用できます。システム制約などが特に無い場合は、こちらのフォームを利用して情報収集することが一般的です。

他方でHubSpotのフォームを使わずに既存のフォームを改修してHubSpotに連携する方法もあり、後述の通りですがHubSpotが公開しているAPIを利用する手法やトラッキングコードを埋め込む手法で連携することができます。

IVRyではコンバージョン計測対象の各種フォームがすでに内製されており、フォーム回答時のデータ処理などシステムロジックにも関連していたため、HubSpotのフォームを新規に利用することはせず既存フォームを活かして連携する方針としました。

API連携かトラッキングコード連携か

HubSpot以外のフォームからHubSpotに連携するにあたり、以下の2種類の手法を検討しました。

候補① フォーム送信時にHubSpotのAPIを利用して連携

この手法では具体的に以下のAPIを用いた方法があります。

• ContactAPIを使ってコンタクトを直接作成・更新
• FormAPIを使ってHubSpot上のフォームにデータを送信・登録する

API連携の場合、データ加工や連携タイミングなどをコントールしやすい利点はあるものの、以下の難点があります。

• APIキーの秘匿のためにサーバ側の改修も必要になる^[2]
• ContactAPIで顧客情報を生成した場合は、HubSpotでの訪問者のトラッキングが有効にならない
• FormAPIを利用する場合はHubSpot側で同等のフォームを都度作成する必要があるため二重管理となり、運用工数と保守工数がともに増加する

候補② トラッキングコードによるフォーム送信キャプチャを利用して連携

HubSpotのトラッキングコードにはフォーム送信キャプチャという機能があり、これを利用して連携する手法です。

この手法の場合、フォーム送信の時点で自動連携されてしまったり、連携項目のマッピングのためにフィールドを調整する必要があるなど扱いが難しいポイントが何点かあるのですが、APIキー不要・訪問者トラッキング有効・フォームの二重管理不要など、API利用の際の難点を回避することができます。

選定軸

今回の手法選定で重視したのは、マーケティング観点での要件を満たした上で
プロダクトの本機能にできるだけ影響を与えずに連携を実現できるかという点です。

HubSpot連携のような外部連携に関するソースコードは、フロントエンドやプロダクトといった単位のモジュールで機能が閉じなくなってしまうため、複雑な連携であればあるほど直感的に理解しづらく暗黙知となりやすい性質があります。これを回避するためにはそれ相応の量のコメントを追加する必要があり、保守性が低下してしまいます。

また、連携のための実装がプロダクトの本機能と密に結合してしまった場合、ツールを見直す・差し替える場合の改修工数も多くかかってしまいます。今回のような外部ツールは選択肢が多く進化も早いため、今後のリスクを低減するためにもできるだけ影響の少ない連携方法を選ぶ必要があります。

この観点より、サーバ側に影響がなくフロントエンドの対象ページで連携処理が完結する、候補②のトラッキングコード連携を採用することとなりました。

トラッキングコード連携の実装

トラッキングコード連携の仕様はこちらのドキュメントの通りですが、主要な実装ポイントとして以下が挙げられます。

• 連携処理は、トラッキングコードが配信されているページのフォームにおいてsubmitイベントが発火したタイミングで実行される。
• HubSpotのプロパティとフォームフィールドのマッピングは、HubSpotのプロパティ内部名（または表示名）とフォームフィールドのラベル（またはフィールド名）が一致しているかどうかで判定される。

これらを踏まえて、HubSpotと自社フォームそれぞれでの下準備の内容、最終的に実装したシーケンスを見ていきます。

HubSpotの下準備

1. トラッキングコードを取得します。

   • HubSpotのユーザー設定から取得することができます。
     

2. フォーム設定の「HubSpot以外のフォーム」から「ウェブサイトフォームからデータを収集」をONにします。

   • これをONにすることで、トラッキングコードが配信されているページのフォームで、フォーム送信キャプチャの機能が有効になります。
     

3. フォームのフィールドに紐づけるプロパティの内部名を確認します。

   • このプロパティ内部名をフォームフィールドのラベルなどに設定することで、プロパティのマッピングを行います。
     

自社フォームの下準備

1. HubSpotで取得したトラッキングコードを対象ページに貼り付けます。
   （またはGoogleTagManagerなどで配信します）

   • トラッキングコードが配信されたページのフォームで、HubSpotのフォーム送信キャプチャが有効となります。

2. フォームのフィールドにHubSpot連携用ラベルを追加します。

   • ラベルの内容は、マッピングしたいHubSpotのプロパティ内部名と一致させるようにします。

サーバ処理が不要なフォームの場合は以上の内容で十分なのですが、
サーバ側で入力データのチェックなどが必要になるフォームの場合、以下の内容を加える必要があります。

3. フォームの送信ボタンをsubmitボタンから通常のボタンに変更します。

   • サーバ側のデータチェックが未実施のままHubSpotに情報連携されないように、submitイベントが発火しないようにします。

4. HubSpot連携用にsubmitイベントを発火する仕組みを追加します。

   • サーバ側のデータチェックが確実に完了した後にHubSpotに情報連携できるように、submitイベントを別途発火できるようにします。

実装後のシーケンス

以下ではサーバ側でのデータ登録時にデータチェックが必要となる場合のシーケンスを見ていきます。

1. フォーム送信(非submitイベント)

   • 訪問者がフォームを入力して送信ボタンをクリックします。この時点ではまだHubSpotには連携されません。

2. データ登録依頼

   • フロントエンドより、入力データの登録処理をバックエンドに依頼します。

3. データ登録OK

   • バックエンドにてデータチェックを行った後にデータ登録処理を行い、正常に終了すればその旨をフロントエンドに返します。

4. submitイベントを発火→フォーム送信キャプチャで連携実行

   • トラッキングコードによるフォーム送信キャプチャを発火させるため、データ登録とは別でsubmitイベントを発火させてHubSpotにコンバージョン情報を連携します。

5. 後続画面を表示

これでバックエンドの処理に影響を与えることなく、
フロンエンドだけでHubSpotにコンバージョン情報を連携することができるようになりました。
参考になれば幸いです。

おわりに

IVRyでは一緒に働いてくれる方を絶賛募集中です！
以下の採用概要の通りですが、エンジニアをはじめほぼ全ての職種にて募集しています。

https://ivry-jp.notion.site/IVRy-e1d47e4a79ba4f9d8a891fc938e02271

カジュアル面談も絶賛受付中ですので、ぜひお気軽にご連絡ください。
お待ちしています！

https://youtrust.jp/companies/b56fa7467dcc42b90f33b5102ea7bc18/recruit

脚注

1. IVRyではこちらのプライバシーポリシーに則って情報を管理しています。

2. CSRやSSGを採用しているページの場合の観点となります。