Google Analytics 4でHubSpot Formsをトラッキングする

更新日: 2025年8月19日

このセクションでは、GTMでHubSpot FormsのGA4イベントトラッキングを使用する方法について説明します。HubSpot Formsには、GTMのフォームトラッキングをサポートするAPIがあります。

HubSpot Formsのトラッキングロジックは次のとおりです。送信が成功すると、addEventListenerを使用してリッスンし、dataLayerを介してデータを送信します。以下のコードはHubSpot Forms v3およびv4をサポートしており、HubSpot Formsを含むページにデプロイできます。コードは次のとおりです。

<script>
window.dataLayer = window.dataLayer || [];

//listener for older version (v3) of HS forms
window.addEventListener('message', function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({
      event: 'form_submission',
      form_id: event.data.id,
      conversion_id: event.data.data.conversionId,
      form_data: event.data.data.submissionValues,
    });
  }
});

//listener for v4 HS forms 
window.addEventListener("hs-form-event:on-submission:success", function(event) {
    var hsform = HubspotFormsV4.getFormFromEvent(event);
    if (hsform) {
      hsform.getFormFieldValues().then(function(fieldValues) {
        var transformedData = fieldValues.reduce(function(obj, item) {
          var key = item.name.split('/')[1]; 
          if (key) {
            obj[key] = item.value;
          }
          return obj;
        }, {});
  
        window.dataLayer.push({
          event: "form_submission",
          form_id: hsform.getFormId(),
          conversion_id: hsform.getConversionId(),
          form_data: transformedData
        });
      });
    }
  });
</script>

次に、GTMでの設定方法を見てみましょう。

ステップ1：HubSpot Formsコードを設定する

GTM で、「タグ」——「新規」——「タグタイプを選択して設定を開始…」——「カスタム HTML」をクリックし、名前を“cHTML-Listen HubSpot Forms”とし、次のように設定します：

トリガー条件は、HubSpot Forms フォームのページのみに設定することも、「すべてのページ」を選択することもできます。

ステップ2：フォーム成功トリガーを設定する

前のステップで、イベントがform_submissionであることは既に分かっています。

GTMの「トリガー」 ——「新規」 ——「トリガーのタイプを選択して設定を開始…」 ——「カスタム イベント」をクリックし、名前を“form_submision(HubSpot Forms)”とし、以下のように設定します：

ステップ3: 変数を設定する

GTMの[変数] —— [新規] —— [変数タイプを選択して設定を開始… ] —— [データレイヤーの変数]をクリックし、名前を“dlv-form_id(HubSpot Forms)”とし、以下のように設定します：

同様に、dlv-form_data.email (HubSpot Forms) を設定します。

ステップ4：コードを設定する

最後に、コードを設定します。

GTM で、「タグ」——「新規」——「タグタイプを選択して設定を開始…」——「カスタム HTML」をクリックし、名前を“GA4 Event-form_submission(HubSpot Forms)”とし、次のように設定します：

ステップ5：プレビューとデバッグ

最後にテスト：

• まず、何も入力せずに「送信」をクリックします。これではイベントはトリガーされないはずです。
• 次に、何か入力して「送信」をクリックします。イベントが成功すると、イベントがトリガーされるはずです。

デバッグ方法がわからない場合は、こちらをご覧ください。

ステップ6：設定をカスタマイズする

GA4でfrom_idとform_emailを使用する場合は、GA4のカスタム設定でそれらを登録する必要があります。

Referral：https://www.analyticsmania.com/post/track-hubspot-forms-with-google-tag-manager-and-google-analytics-4/