【保存版】HubSpotとGA4連携の完全ガイド

HubSpotとGA4の違いと連携するメリット

GA4とHubSpotは、どちらもサイトアクセス数やコンバージョン数を計測できる点で共通しています。
一方で、明確な違いもあります。それは、「データをセッションベースで記録する（人物特定まではできない）」か「データを人物ベースで記録する（CRMに格納されるコンタクト情報と照らし合わせて人物特定できる）」点です。

これらのGA4とHubSpotを連携させるメリットとしては、GTMを介さずに直接連携ができるという点です。
HubSpotの設定で、GA4の「トラッキングID」を登録するだけで、ウェブサイトに来た人の動きをGA4で確認できるようになります。
この設定をすると、チェックアウトページ（お支払いページ）や見積ページも自動で追跡できるようになるのもメリットです。

HubSpotとGA4の連携方法

以降では「すでにフォームが用意されている」ことを前提として解説していきます。

連携方法【サンクスページあり】

サンクスページがあるフォームの場合、以下のどちらかの方法で連携・設定をします。

【パターン1】GA4から直接連携する（GTMの使用無し）
【パターン2】GTM（Google Tag Manager）を使用してGA4連携する

それぞれの手順を画像付きで解説していきます。

◆【パターン1】GA4で設定する手順（GTMの使用無し）
GA4を使用した設定では、サンクスページのURLが必要です。
まずはフォーム側での下準備を行います。

①HubSpot管理画面の左サイドメニューより、「マーケティング」 > 「フォーム」にアクセスする

②該当するフォームにカーソルを当てると [編集] が表示されるので、クリックする

③フォーム編集画面上部の [オプション] をクリックする

④「誰かがフォームを送信した後のアクション」で、「HubSpotページまたは外部URL」を選択する

また、その時のサンクスページURLを選択（HubSpotで作成した場合は選択可能）または記入する

最後に右上の [更新] をクリックすればフォーム側の準備完了

つづいて、GA4画面での設定手順に移ります。

⑤GA4にログインし、左下の [管理] をクリックする

⑥「データの表示」の [イベント] をクリックする

⑦[イベントを作成]をクリックする
再び [作成] ボタンをクリックし、以下の（）括弧内の情報を入力する
※カスタムイベント名と値は任意のものを設定してください
※値は、サンクスページURLに合わせて設定してください

・カスタムイベント名（例：セミナー）
・一致する条件
　パラメータ（event_name）／演算子（次と等しい）／値（例：page_view）
　パラメータ（page_location）／演算子（次を含む）／値（例：seminar_thanks）

入力を終えたら、右上の [保存] をクリックする

⑧作成後は、作成したイベントが「ON」になっているかを確認する（※重要）

こちらでGA4を使用した連携の設定は完了です。

◆【パターン2】GTM（Google Tag Manager）を使用してGA4連携する

GTMを用いて設定する場合は、以下の手順です。

①GTMにログインし、[タグ]  >  [新規] をクリックする

②「タグ名」「タグの設定」「トリガー」をそれぞれ設定する

③「タグタイプを選択」で、[Googleアナリティクス] > [Googleアナリティクス：GA4] を選択する

④GA4の測定ID（G-XXXXX）を入力し、イベント名・イベントパラメータを設定する
（イベント名の例：セミナー）
（イベントパラメータの例：seminar_complete）

⑤次に「トリガー」を設定する
※今回は、以下のように設定しています。

・トリガーのタイプ（例：ページビュー）
・このトリガーの発生場所（例：一部のページビュー）
・Page URL／含む／seminar_thanks
・このトリガーへの参照タグ（GA4_セミナー）※先ほど作成したものを選択する

⑥タグとトリガーの設定が完了したら、右上の [保存] をクリックする

⑦あとは、GA4のみの設定と同様にGA4のイベント設定画面で、作成したイベントが「ON」になっているかを確認する（※重要）

こちらで、GTMを使用した設定が完了です。

連携方法【サンクスページなし】

次に、サンクスページがないフォームの場合の連携方法を解説していきます。
ここではGTMでの設定手順を紹介しますが、大まかな流れは以下です。

1. HubSpot側で、フォームの設定をする
2. GTM側で、カスタムHTMLタグを作成する
3. GTM側で、カスタムイベントを作成する
4. GTM側で、変数を設定する

先ほどと同様に、まずはHubSpot管理画面のフォーム側での下準備を行います。

①HubSpot管理画面の左サイドメニューより、「マーケティング」 > 「フォーム」にアクセスする

②該当するフォームにカーソルを当てると [編集] が表示されるので、クリックする

③フォーム編集画面上部の [オプション] をクリックする

④「サンキューメッセージ」を選択し、メッセージを作成し、右上の [更新] をクリックする

⑤次にGTMに移動し、設定をする
GTMにログインし、[タグ] > [新規] をクリックする

⑥「タグ名」「タグの設定」「トリガー」をそれぞれ設定する

⑦「タグタイプを選択」で、[カスタムHTML] を選択する

⑧カスタムHTMLに、以下をコピペする

<script type=”text/javascript”> window.addEventListener(“message”, function(event) { if(event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormSubmitted’) { window.dataLayer.push({ ‘event’: ‘hubspot-form-success’, ‘hs-form-guid’: event.data.id }); } }); </script>

参照：
📝Tracking Hubspot Form Submissions with Google Tag Manager – Updated | 3WhiteHats

つづいて、上記で設定したカスタムHTMLタグの「トリガー」を設定します。

⑧トリガーは [All Pages] を選択する

ここまでの設定によって、サイトのどのページでフォーム送信完了メッセージが表示されてもhubspot-form-successと言う名前のイベントがGTM内で発火するようになります。

つづいて、カスタムイベントを作成します。
カスタムイベントはトリガーから作成できます。

⑨再度GTMホームに行き、[トリガー] > [新規] をクリックする

⑩「トリガーのタイプを選択」では、[カスタムイベント] を選択する

⑪「イベント名」に「hubspot-form-success」を設定し、
「トリガーの発生場所」は、「全てのカスタムイベント」にチェックを入れ、[保存]する

次に、「変数」を設定します。

⑫GTMのホームに戻り、[変数] をクリックし、
「ユーザー定義変数」の「新規」を選択する

⑬「変数タイプを選択」で、[データレイヤーの変数] を選択する

⑭「データレイヤーの変数名」に「hs-form-guid」と記入し、
左上の変数名は同じく「hs-form-guid」と名付けて、［保存］する

以上で、変数の設定も完了です。

最後に、GTMのプレビューモードで必ずタグが発火するか確認し、[公開] を押しましょう。

連携時のよくあるトラブルとその解決策

ここまで、HubSpotとGA4の連携手順について解説しましたが、稀にトラブルが発生するケースがあります。
以下は、よくあるトラブルと解決ポイントです。
万が一トラブルがあった際は、該当場所を再度確認してみましょう。

• データが正確に記録されない
  • トラッキングコードの設置場所を確認する
    ウェブサイト全体で動作するよう適切に設定されているかを確認してください。
• イベントトラッキングが機能しない
  • GA4のカスタムイベント設定やGTMのトリガー設定を見直す
  • 各ツールの設定を見直し、計測条件が一致しているかを確認しましょう。

HubSpotとGA4の連携でより詳細なマーケティング分析を

いかがでしたか？
HubSpotとGA4の連携方法は、パターンによって異なるため、自社に合った方法で設定をしてみてください。

ウェブサイト訪問者のサイト上での行動データと、リードデータを統合的に活用して、マーケティングの精度を高めていきましょう。