1. HOME
  2. ブログ
  3. あなたもHubSpotマスター!(12)GA4でコンバージョンを計測~サンクスページのないフォーム

あなたもHubSpotマスター!(12)GA4でコンバージョンを計測~サンクスページのないフォーム

前回、サンクスページのあるHubSpotフォームのGA4コンバージョン測定方法についてお伝えしました。いよいよ、サンクスページのないHubSpotフォームのGA4コンバージョンについてお伝えしていきたいと思います。

目次

サンクスページのないフォームのコンバージョンイベント設定

サンクスページのあるフォームは、フォーム登録後に用意したサンクスページに切り替わりますので、そのページをCVとして計測すればよい訳です。一方、HubSpotでサンクスページのないフォームを使った場合、ページが切り替わらず同一ページ上で登録の処理が行われるために、そのコンバージョンの計測をするのにひと手間加える必要があります。

サンクスメッセージを表示させている場合は、どのようにコンバージョンイベントを取得するのかが、設定の肝となります。

サンクスメッセージのHubSpotフォームの設定を確認しましょう

サンクスページのないフォームを使った場合ですが、HubSpotフォームの[オプション]にて、訪問者がフォームを送信(通過)した後のアクションとして、サンキューメッセージを表示を選択しているはずです。このメッセージをキーにすることができそうです。

HubSpotフォーム[オプション]から送信した後のアクション

参考にした動画とページの紹介

説明の前に、サンクスメッセージをコンバージョンイベントとして設定する参考動画とサイトを共有します。

HubSpotは世界的に使われているツールなので公式のヘルプを読んで、日本語で検索しても見つからなかった情報が、英語で検索すると解決方法が分かった!なんてことがあります。もちろん英語力やサイトの英訳は必要になりますが、最近は翻訳ツールの精度も上がっているので昔に比べるとかなり手に入りやすくなっている印象です(それでも大変ですけどね)。

YouTUBE動画:Track Hubspot Forms with Google Tag Manager | Analytics Mania
上記動画の引用サイト:Tracking Hubspot Form Submissions with Google Tag Manager – Updated | 3WhiteHats

上記にたどり着く前に色々と悩みました。
GA4の拡張計測機能イベントを使い、HubSpotフォームから(form_start、form_submit)イベントが取得できないか…ですとか、GTMのトリガー設定で、クリック(すべての要素)、ユーザーエンゲージメント(フォームの送信)でデータ取得を試してみましたが、HubSpotフォーム上での動作についてGTMが計測してくれませんでした。

GTMのトリガーのタイプを選択では、HubSpotフォームのデータは取得できない

ここからはマーケの強化書で実際に設定し成功した一例をご紹介します。さらに細かい仕組みや詳細については参考情報を参照ください。

GTMでサンクスメッセージを取得してカスタムイベントを作成

今回は、サンクスページのないフォームのコンバージョン設定になるため、サンクスメッセージが表示されたタイミングをもってCVとしそれを計測します。

1)GTMでタグ設定(メッセージが出たらFromIDを含んだカスタムイベントを発火)
2)GTMでトリガー設定(上記のカスタムイベントが発火したことをトリガーにする)
3)GTMでタグ設定(FromIDをパラメータにしたイベントをGA4へ送る)
4)GTMで作成したカスタムイベントをGA4のコンバージョンに設定

の4つが大きな流れです。

では詳細について確認していきます。

1-1)GTMでタグ→新規→タグの設定→タグタイプを選択でカスタムHTMLを選ぶ。

1-2)カスタムHTMLにJavaScriptをコピーして入力する。

<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

ちなみに、JavaScriptの構文について何を示しているのか、内容についてChatGPTに訊ねたところ

HubSpotのフォームが送信されたときに、HubSpotから送信されるメッセージイベントをwindowオブジェクトが受け取ります。そのメッセージイベントの種類が「hsFormCallback」で、イベント名が「onFormSubmitted」である場合、Data Layerに「hs-form-guid」:送信されたフォームのIDの情報を含んだ「hubspot-form-success」という名前のカスタムイベントを送信します。

との答えが返ってきました。プログラマーさんでない場合はこの情報だけでも助かりますね。

1-3)トリガーはAll Pagesを選ぶ。

これによりサイトのどのページでフォームメッセージが表示されてもhubspot-form-successと言う名前のカスタムイベントがGTM内で発火することになりました。

次に上記のhubspot-form-successをトリガーにカスタムイベントを設定していきます。

2-1)GTMでトリガー→新規→トリガーの設定でトリガーのタイプを選択でカスタムイベントを選ぶ。

2-2)イベント名には先ほど作成した【hubspot-form-success】を入力し保存する。

GTMのプレビュー画面で、hubspot-form-successが取得出来ているか、この段階で一度確認してみましょう。

トリガーを設定したので次はタグの設定ですが、タグでFormIDもパラメータとして一緒にGA4に渡したいので、カスタムイベントの変数を設定しておく必要があります。

3-1)GTMの変数→ユーザー定義変数 新規→変数の設定→データレイヤーの変数を選ぶ。

3-2)データレイヤーの変数名に【hs-form-guid】と入力する。

[無題の変数]の部分に[dlv-hs-from-guid]と名前を付けて[保存]して変数の設定は終了です。

この変数にデータレイヤーから取得したFormIDデータが納められますので、変数名とGA4に渡すパラメータ値{{dlv-hs-from-guid}}が同名であれば、自社の命名規則に従った変数名でも問題はありません。

変数を作ったらタグの設定をするためには、[タグ]から[新規]をクリックして設定していきましょう。

3-3)設定タグ・イベント名・イベント パラメータをそれぞれ設定する。

タグの種類:GA4イベント
設定タグ:GA4 or 手動指定したGA4のID
イベント名:generate_lead
イベントパラメータ
 パラメータ名:form_id
 値:{{dlv-hs-from-guid}}
トリガー:カスタムイベント HubSpot From success

ここで設定したイベントgenerate_lead がGA4に送られるイベント名です。ちなみにgenerate_leadはGA4の推奨イベントとして事前に定義されているイベント名称の為、

generate_lead:ユーザーが問い合わせのためにフォームまたはリクエストを送信したとき

GA4公式 アナリティクスヘルプ [GA4] 推奨イベント

とされています。もし既にECサイト等で同名のカスタムイベントを使用中でしたらオリジナルのイベント名称で命名してください。

4)GTMで作成したカスタムイベントをGA4のコンバージョンに設定

GTMで作成したカスタムイベントをGA4のコンバージョンに設定するには、既存のイベント一覧から[コンバージョンとしてマークを付ける]をONにしてください。しかしながら、GTMでタグを設定したら、まずGTMのプレビューとGA4のデバッグ2つの確認は行っておきましょう。

4-1)GTMプレビュー確認

プレビュー画面で、作成したイベントが TagFiredの欄で確認できる

4-2)GA4デバッグ確認

管理→DebugViewでGTMから送られたイベントが確認できる。
コンバージョンイベントに設定されていれば緑色旗マーク。

GTMのプレビューはほぼリアルタイムで処理され表示されているのに比べて、GA4のデバッグは数秒から数分位処理を待たされタイムラグが発生するようです。

GA4のイベントレポートに表示されるまで1日から数日必要としますので、GA4にコンバージョンイベントとして最終的に設定されるまで少し気長に待つ必要がありますね。

いかがでしたか?今回のHubSpotマスターシリーズでは、HubSpotというよりGTMの話題が多くなってしまいましたが、HubSpotのフォームコンバージョンをGA4で設定したい!と思われる方は是非、挑戦してみてください。

公式情報を中心に、HubSpotとの連携など設定で役に立ちそうなURL一覧を掲載しておきますね。

参考URL一覧

タグマネージャー公式ヘルプ
[GA4] Google タグ マネージャーで Google アナリティクス 4 タグを設定する

▼GA4公式ヘルプ
[GA4] アナリティクスで CMS にホストされたウェブサイトのセットアップを行う
HubSpot で Google アナリティクスのタグ付けを設定する
[GA4] 登録フォームが入力された場合のコンバージョンを設定する – アナリティクス ヘルプ

▼HubSpot公式日本語ブログ
Googleアナリティクス4(GA4)のイベント設定方法をわかりやすく解説
GA4の設定方法をわかりやすく解説|イベント設定やレポート設定も紹介
GA4のコンバージョン設定ガイド&計測されない時の対処法も解説【画像あり】
GA4をGTMで導入する方法|基本の手順からカスタムイベントの設定まで

▼HubSpotナレッジベース
Google アナリティクスとHubSpotコンテンツの連携
GoogleタグマネージャーのコードをHubSpotコンテンツに追加する
HubSpot 分析と Google 分析が一致しません

※2024年1月10日、マーケの強化書 読者様からのご連絡を受けて一部表記を修正しました。

ダウンロード資料へ

株式会社ジェネシスコミュニケーション

ジェネシスのマーケティングプロフェッショナルが編集を担当。独自の視点で厳選した実践的ナレッジをお届けいたします。

「マーケの強化書」更新情報お届け

マーケの強化書の更新情報をお届けします。
メールアドレスをご登録ください。
※入力前に「個人情報保護方針」を確認ください。