Google AnalyticsでHubSpotのフォーム送信をトラッキングする方法

HubSpotは、現在B2B企業で最も広く使われているマーケティングツールの1つであり、中でもリードキャプチャフォームはよく使われる機能です。リードキャプチャフォームは、「デモを申し込む」や「コピーをダウンロードする」といったCTAのために、Webサイトで使われるのが一般的です。ユーザーは必要事項を入力し、フォームを送信します。

こうした送信状況はHubSpotでは簡単に確認できますが、このデータをGoogle Analyticsでも確認したい場合はどうすればよいでしょうか。GAにコンバージョントラッキングを設定しておけば、Webサイトのパフォーマンスを把握でき、HubSpotだけではわからない詳細まで掘り下げて分析できるため、重要です。

この記事では、GAとGoogle Tag Managerを使って、あらゆるHubSpotフォームの送信を手早くトラッキングし、フォームごとに独自のカスタムイベントを作成する方法をご紹介します。

必要なもの

この方法を使うには、WebサイトにGoogle Tag Managerを導入しておく必要があります。導入は比較的簡単です。Googleのチュートリアルで手順を確認できます。Google Tag Managerはデジタルマーケティングの分析に非常に役立つツールなので、まだお使いでなければ導入をおすすめします。基本的には、Webサイトのカスタムスクリプトをすべてページ自体に埋め込まなくても、一括で管理できるツールです。Tag Managerだけをインストールし、それ以外のスクリプトはすべてTag Manager上で設定します。

Tag Managerを導入できたら、次の手順に進み、Google Analytics 4でHubSpotフォーム送信のトラッキングを設定しましょう。

手順

必要な手順はわずかです。最も複雑なのはJavascriptの部分ですが、コードはコピー&ペーストするだけなので心配はいりません。

まず、Javascriptでイベントリスナーを作成する
Tag Managerでカスタムイベントトリガーを作成する
トリガーを使ってGA4イベントタグを作成する
GTMで新しいタグをプレビューしてテストする
GAでイベントを確認し、コンバージョンイベントとして設定する

ステップ1:Javascriptでイベントリスナーを作成する

Webページ上のすべての操作やイベントは、DOM(Document Object Model)で追跡されます。つまり、ごく簡単なJavascriptを使ってイベントリスナーを作成すれば、特定のイベントを「待ち受け」、そのイベントが発生したときに何らかの処理を実行できます。この仕組みを使って、HubSpotフォームの送信とコンバージョンの動きをトラッキングし、記録します。

HubSpotフォームが送信されるたびに、DOMにイベントが生成されます。これらのイベントの詳細は、HubSpotのForm APIドキュメントで確認できます。HubSpotは、フォームが正常に送信されるたびにonFormSubmittedという特定のイベントを生成します。このイベントを待ち受けることになります。細かい内容を気にする必要はあまりありません。

では、どうすればよいでしょうか。最初にGoogle Tag Managerを開き、新しいカスタムHTMLタグを作成します。これでJavascriptのリスナーを追加できます。スクリーンショットの下に実際のコードを掲載しているので、HTMLの欄にコピー&ペーストしてください。

HubSpotフォームの送信時にdataLayerイベントをプッシュするスクリプトを設定した、Google Tag Managerのカスタム HTMLタグ — カスタムHTMLタグの設定例

この部分はこの作業で最も複雑で、Javascriptの経験がない方にはほとんど意味がわからないかもしれません。ただ、説明を読めば意外と簡単に理解できるはずですので、ご安心ください。

コードの一部は、Javascriptの仕組みを理解していないと意味がわからないので、無視して構いません。基本的には、このスクリプトが開いているウィンドウにEventListenerを追加し、前述の条件に合致するデータタイプのイベントを検知すると、データレイヤーと呼ばれるものに新しいイベントを追加します。

データレイヤーはJavascriptのオブジェクト(仮想的なもの)です。Webサイトの情報をGoogle Tag Managerに渡す役割があり、このイベントが発生すると、その情報がデータレイヤーに渡されます。

このコードはコピー&ペーストして使います。内容は次のとおりです。

HubSpotフォームの送信をすべてトラッキングするイベントを作成したい場合は、JS内にある event.data.id === “id” という条件を削除してください。ここに入れるIDは、HubSpotで確認できるフォームのIDです。この条件を削除すれば、フォームが送信されるたびにイベントが発火します。

特定のフォームに対して特定のイベントを発火させるほうが、すべてのフォームを対象にしたグローバルなイベントよりも望ましい運用です。イベントや命名規則をより細かく管理できるためです。

このコードをTag Managerに公開すると、「form-submission-event-name」という新しいイベントが作成されます(名前は自由に付けられます)。このイベント名を使えば別の処理を実行するトリガーにできるので、次はこのイベント名を使ってトリガーを設定します。

ステップ2:カスタムイベントトリガーを作成する

これでイベントリスナーの設定と新しいイベントの作成が完了しました。次は、Datalayerに送信されるこのイベントをもとにトリガーを設定します。手順は簡単で、新しいカスタムイベントを作成し、Javascriptで作成したイベント名を入力するだけです。

「その他」の下にカスタムイベントがあるGoogle Tag Managerのトリガータイプ一覧

トリガーには、前のステップでJavascriptコードに指定したものとまったく同じイベント名を使う必要があります。これにより、そのイベントがGoogle Tag Manager内の他のタグを発火させるトリガーになります。別の方法もありますが、この方法のほうがすっきりしていると思います。

フォーム送信のイベント名を入力した、カスタムイベント用のGoogle Tag Managerトリガー設定

このトリガーは、GA4イベントの参照元として使います。つまり、そのイベントが発生するたびに、トリガーがGoogle Analyticsのイベントを発火させます。

ステップ3:イベントを参照するGA4タグを作成する

次のステップはとても簡単です。以下のように、Google Tag Managerで新しいGA4イベントタグを作成します。ここでトリガーを選択しますが、ステップ2で作成したトリガーを選んでください。最後に名前を付けます。ここでは例として「Request a Demo」としました。

Request A Demoカスタムイベントのトリガーで発火する、Request a Demo用のGoogle Tag Manager GA4イベントタグ

ステップ4:新しいタグをプレビューしてテストする

次に、設定内容に応じて、テスト用のフォームまたは本番のフォームでこの新しいタグをプレビューしてテストし、タグが正しく発火し、意図どおりに動作することを確認します。うまくいかない場合、最も多い原因はイベント名の不一致です。

ステップ5:Google Analyticsでイベントを確認し、コンバージョンとして設定する

Google Tag Managerのコンテナでタグのテストが完了し、イベントが正しく発火していることを確認できたら、Google Analyticsに移動して、イベントが表示されているかを確認します。リアルタイムビューで確認するのがおすすめです。

イベントごとのイベント数とユーザー数が表示され、一覧にRequest a Demoが含まれているGA4のイベントレポート

Google Analyticsでイベントが記録されていることを確認できたら、管理画面に移動し、コンバージョンとしてトラッキングしたい場合はオンに切り替えます。これで設定は完了です。

ほとんどのWebサイトでは、主なコンバージョンは1つだけですが、コンテンツのダウンロードやその他のサインアップ、登録などのコンバージョンも計測したい場合があるかもしれません。トラッキングするイベントを増やす場合は、後からすべてを簡単に見直せるよう、イベントの命名規則を決めて統一性を保つようにしましょう。

Google Analyticsでコンバージョンを設定する理由

HubSpotやSalesforceなど、フォームを作成したツール内でフォームの送信をすべて追跡・記録できるため、Google Analyticsでコンバージョントラッキングを設定しない人もいます。

フォームの送信をCRMだけで追跡する場合の問題は、ツールを乗り換えると過去のデータが失われてしまうことです。また、Google Analyticsにコンバージョンを記録していないと、Webサイトのコンバージョン率や指標を見直すのも難しくなります。

HubSpotをGoogle Adsアカウントに直接連携して、コンバージョンをインポートすることもできますが、Google Analyticsからコンバージョンをインポートすることも可能です。そのため、柔軟性が高まり、将来にも備えられます。個人的には、これがベストプラクティスだと考えています。

Google Ads向けにHubSpotでイベントを作成する

Google Analyticsでイベントを設定するだけでなく、HubSpotを使っている場合は、Google AdsとHubSpotのアカウントを連携すれば、CRMのデータをもとにカスタムイベントを作成して、Google Adsでのコンバージョンを最適化できます。

以下の例では、それぞれ異なるトリガーを持つ3つのイベントを作成しています。これらはGoogle Adsに同期され、Google Ads上で選択することで、そのコンバージョンアクションに向けて広告を最適化できます。より詳しいガイドはHubSpotナレッジベースのこちらをご覧ください。

HubSpotから同期されたHubSpotのGoogle Ads コンバージョンイベント:MQL、商談、デモリクエストフォーム

HubSpotとGoogle Adsで拡張コンバージョンを使う

拡張コンバージョンは、Google Adsの機能の1つで、コンバージョン計測の精度を高め、より高度な入札を可能にします。既存のコンバージョンタグを補完し、ウェブサイトのハッシュ化されたファーストパーティのコンバージョンデータを、プライバシーに配慮した形でGoogleに送信します。

お客様がデモのリクエストなど、ウェブサイト上でコンバージョンを完了すると、通常はメールアドレス、氏名、その他の企業情報といったファーストパーティの顧客データを取得できます。このデータをコンバージョントラッキングタグで取得してハッシュ化し、ハッシュ化した状態でGoogleに送信することで、コンバージョン計測の強化に活用できます。

利用する拡張コンバージョンの種類によって、ハッシュ化されたデータは計測を改善するためにさまざまな形で使われます。B2Bマーケターにとっては、職場で会社のGoogleアカウントにログインしている場合に、このデータに基づいて最適化できるため便利です。

このデータは、広告に反応したときにログインしていたGoogleアカウントと顧客を照合するために使われます。