あなたもHubSpotマスター！（12）GA4でコンバージョンを計測～サンクスページのないフォーム

2023.06.20

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

目次

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

サンクスページのあるフォームは、フォーム登録後に用意したサンクスページに切り替わりますので、そのページをCVとして計測すればよい訳です。一方、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のコンバージョンに設定

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

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

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の推奨イベントとして事前に定義されているイベント名称の為、