StudioとHubSpot埋め込みフォームの仕様に関するトラブルと対策

ノーコードWeb制作ツール「Studio.Design」は、デザイン性や操作性の高さから多くのWeb制作者に利用されています。特に、外部サービスとの連携が手軽に行える点が魅力のひとつですが、一方で技術的な制限があることも事実です。

今回取り上げるのは、StudioでHubSpotのフォームを埋め込んだ際に発生した、コンバージョンタグが正しく動作しないという問題です。マーケティング施策においてフォーム送信後のトラッキングは非常に重要な工程であり、正しく計測できなければ、効果測定や広告運用にも支障をきたします。本記事では、その原因と対応方法について詳しく解説します。

Google広告運用代行
- プロのサポートは必要ですか？
※別ウィンドウで開くので、あとで読めます。

問題の背景

StudioではHubSpotフォームを直接埋め込むと、以下のようなiframe形式で表示されます。

<iframe src="https://XXXXXXXXXX.studioiframesandbox.com" scrolling="no"></iframe>

このiframe内でHubSpotのフォームが動作しますが、コンバージョントラッキングに関して以下のような問題が確認されました。

フォーム送信時にGoogle Tag Manager（dataLayer.push）やMeta Pixel（fbq）が動作しない
iframe内部ではタグマネージャーが読み込まれておらず、イベントが発火しません。
フォーム送信元が studioiframesandbox.com になるため、スパム判定される
HubSpot側でこのドメインをホワイトリストに登録する必要がありました。
iframeのフォーム表示は新規セッション扱いになり、流入元が直接トラフィックで計上される。
studioiframesandbox での埋め込みを回避するためにフォームの設置方法を変える

Studioの標準フォームとの違い

Studioの標準フォームを設置している場合は、以下のようなJavaScriptコードでイベントベースの計測が可能です。この方法はさまざまなフォームのコンバージョン計測に応用することができますが、iframeで読み込むフォームではフレーム内のaddEventListenerが効かないため、別の手段を検討する必要があります。

下記をカスタムコードに設定する際に<form>のIDにst-form（任意の文字列）を追加する必要があります。タグマネージャ側の設置も必要です。コピペで動作するコードではありません。

<script>
var form = document.getElementById('st-form');
form.addEventListener('submit', (event) => {
  dataLayer.push({ 'event': 'form_submit' });
});
</script>

この方法でGoogleタグマネージャーにイベントを送信できます。詳しくは別の記事で解説しています。

サンクスページを使った計測方式

この手法ではGoogleアナリティクスやMetaピクセルのイベント発火はできるようになりますが、HubSpot側で流入元が「直接トラフィック」に計上される問題は解決しません。

前述の通り、StudioでHubSpotフォームを埋め込んだ場合、iframeの仕様により通常のトラッキングコードが機能しないという問題があります。そのため、コンバージョンタグを発火させるには、直接的なイベント検知ではなく、サンクスページでの処理に切り替える必要があります。

このセクションでは、Studio上に用意したサンクスページを利用して、確実かつ重複のない計測を実現するための具体的な方法を紹介します。

1. サンクスページを用意

サンクスページ自体はStudio側で用意し、HubSpotフォームの送信完了後にそのページへ遷移するよう、HubSpot側でリダイレクト先として設定しています。

https://example.com/thanks?conversion=1

このページ自体もStudio上ではiframeで読み込まれるため、ユーザーには遷移しているようには見えませんが、実際にはURLパラメータ付きでサンクスページが表示されます。そのため、ページのレイアウトは読み込み速度や表示領域の制約を考慮し、テキストのみの簡素な構成にするのが望ましいです。

2. サンクスページ内でのコンバージョン発火スクリプト

重複計測を防ぐため、初回読み込み時にのみコンバージョンが発火するよう、以下のコードを挿入しました。実際に運用で使用する際は、コメント行や console.log の削除、Lead や generate_lead のイベント名を適切なものに変更するなどの調整を行ってください。

<script>
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('conversion') === '1') {
    // ✅ 初回訪問と判定 → トラッキング実行
    console.log("Conversion計測");

    // Meta Pixel
    if (typeof fbq === 'function') {
      fbq('track', 'Lead');
    }

    // Googleタグマネージャー
    if (window.dataLayer) {
      dataLayer.push({ event: 'generate_lead' });
    }

    // ✅ URLからパラメータを削除してリロード時の再実行を防止
    window.history.replaceState({}, document.title, window.location.pathname);
  }
</script>

これにより、イベントベースに近い形で計測することができるようになりました。

初回アクセス時のみ計測イベントが送信される
リロードや再訪時の重複カウントを防止できるという仕様になっています。

studioiframesandbox での埋め込みを回避する

サンクスページでコンバージョン発火させることで、Googleアナリティクスのキーイベント計測はできるようになりすが、HubSpot側で流入元が紐づかなくなりました。iframeでフォームを呼び出す際に新規セッション扱いになり、そのまま送信完了するために直接トラフィックの扱いになるためです。
これを回避するために、カスタムコードにtarget: "#my-form-area" を追加したHubSpotフォームのコードを記載して、ページ上のdivのIDにmy-form-areaを設定してフォームを表示させる結論に着地しました。

HubSpotフォームのコードを自己責任でカスタマイズできる場合は、こちらの実装方法をおすすめします。

<script charset="utf-8" type="text/javascript" src="//js-na2.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "000000000",
    formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    region: "na2",
	target: "#my-form-area"
  });
</script>

実際の設定状況は下記のスクリーンショットの様な形になります。