【実務ノウハウ】Contact Form 7にA8.netの成果計測タグを確実に埋め込む2つの方法｜サンクスページ・JSイベント対応

Contact Form 7（以下 CF7）で問い合わせを受け、A8.net などの成果計測タグを「送信完了のタイミング」で発火させたい。ところが CF7 はデフォルトで同じページ内に完了メッセージを出すだけで、サンクスページに遷移しません。成約タグをどこに置けばよいか分からず、計測漏れや二重計測が起きやすいです。

この記事では、実務でフォーム計測を入れてきた立場から、サンクスページへ飛ばす方法と、同一ページで JS イベント発火する方法の2つを、いまの CF7 仕様に合わせて解説します。古い on_sent_ok は使いません。

なぜ CF7 へのタグ埋め込みで事故が起きやすいか

A8 の成果タグは「コンバージョンが確定したページで、1回だけ」動かす前提です。CF7 は次の理由で、そのままでは相性が悪いです。

• 送信後も URL が変わらない（完了ページが無い）
• 同じページを再読み込みすると、タグを直書きしていると再発火しやすい
• バリデーション失敗の送信でも JS が動くと、未完了を成果にしてしまう

昔よく使われた Contact Form 7 の追加設定 on_sent_ok は、CF7 4.8 以降で廃止されています。今これを書くと無視されるか、動かないと思ってください。代替は DOM イベント wpcf7mailsent です。

使うイベントは次で切り分けます。

方法1：サンクスページへリダイレクトしてタグを置く（推奨）

計測の見通しが良く、広告運用者とページ実装を分けやすいので、実務ではこちらを先に勧めます。流れは次です。

1. WordPress で固定ページ「送信完了（スラッグ thanks）」を作る
2. そのページにだけ A8 の成果タグを貼る
3. CF7 の送信成功時に /thanks/ へ飛ばす

1. 送信完了ページを作る

固定ページを新規作成し、スラッグを thanks にします。本文は「お問い合わせありがとうございました」で十分です。パーマリンクが https://example.com/thanks/ になることを確認してください。

このページの「カスタム HTML」ブロック、またはテーマの head / body 終了前に、A8 管理画面から発行した成果計測タグを置きます。値は必ず自分のプログラム ID に差し替えてください。

<script src="https://statics.a8.net/a8sales/a8sales.js"></script>
<script>
  a8sales({
    "pid": "s00000000000",
    "order_number": "INQUIRY-" + Date.now(),
    "currency": "JPY",
    "items": [
      {
        "code": "inquiry",
        "price": 0,
        "quantity": 1
      }
    ],
    "totalPrice": 0
  });
</script>

問い合わせフォームは金額が 0 円でも、A8 側の成果地点設定と code を合わせておけば計測できます。order_number は重複しない値にしてください。同じ番号だと成果が弾かれることがあります。

2. 送信成功でサンクスページへ飛ばす

テーマの functions.php に、フッターへスクリプトを出す処理を足します。子テーマを使ってください。親テーマを直接いじると更新で消えます。

<?php
function my_cf7_redirect_to_thanks() {
  if (is_admin()) {
    return;
  }
  ?>
  <script>
  document.addEventListener("wpcf7mailsent", function (event) {
    window.location.href = "/thanks/";
  }, false);
  </script>
  <?php
}
add_action("wp_footer", "my_cf7_redirect_to_thanks");

フォームが複数あり、特定のフォームだけ飛ばしたい場合は、イベントの event.detail.contactFormId で分岐します。フォーム ID は CF7 編集画面のショートコード [contact-form-7 id="123" ...] の数字です。

document.addEventListener("wpcf7mailsent", function (event) {
  if (event.detail.contactFormId === 123) {
    window.location.href = "/thanks/";
  }
}, false);

方法2：リダイレクトせず、wpcf7mailsent で直接発火する

サンクスページを増やせない、同一ページ完結にしたい場合の上級者向けです。完了メッセージはその場に出し、成功時だけ A8 のスクリプトを読み込んで実行します。

document.addEventListener("wpcf7mailsent", function (event) {
  if (window.sessionStorage.getItem("a8_cv_sent") === "1") {
    return;
  }

  const orderNumber =
    "INQUIRY-" + event.detail.contactFormId + "-" + Date.now();

  const run = function () {
    a8sales({
      pid: "s00000000000",
      order_number: orderNumber,
      currency: "JPY",
      items: [{ code: "inquiry", price: 0, quantity: 1 }],
      totalPrice: 0,
    });
    window.sessionStorage.setItem("a8_cv_sent", "1");
  };

  if (typeof window.a8sales === "function") {
    run();
    return;
  }

  const script = document.createElement("script");
  script.src = "https://statics.a8.net/a8sales/a8sales.js";
  script.onload = run;
  document.body.appendChild(script);
}, false);

テーマの JS に足すか、wp_footer で出力します。ポイントは次です。

• フォーム送信ボタンの onclick では発火しない
• wpcf7submit では発火しない
• 同じタブで何度も成功させないよう sessionStorage で一度きりにする

現場でハマりがちなポイント

テスト送信の確認方法

A8 の管理画面反映にはタイムラグがあるので、まずはブラウザでタグが動いたかを見ます。

1. Chrome のデベロッパーツール → Network を開く
2. フィルタに a8 や a8sales を入れる
3. テスト送信する
4. サンクスページ方式なら、遷移後に a8sales.js と成果リクエストが 200 で走るか確認する
5. JS 発火方式なら、送信成功後（リダイレクト無し）に同じリクエストが出るか確認する

コンソールに a8sales is not defined と出る場合は、本体 JS の読み込みより先に実行しています。onload 待ちを入れてください。

キャッシュプラグインと Cookie（ITP）

サンクスページをキャッシュすると、別ユーザーの成果が混ざったり、タグが古い HTML のまま固まったりします。WP Rocket、W3 Total Cache、LiteSpeed Cache などを使っている場合は、/thanks/ をキャッシュ除外にしてください。

Safari の ITP 以降、第三者 Cookie に依存した計測は外れやすくなっています。A8 のタグは公式の最新コードを使い、入力ページからサンクスページまで同一ドメインで完結させる方が安定します。広告の着地とフォームが別ドメインだと、成果が飛びやすいです。

二重計測を防ぐ

• サンクスページを再読み込みしても成果を重ねないよう、order_number を毎回ユニークにする（A8 側の重複排除に効く）
• サンクスページ方式では、完了ページに「もう一度送信」を置かない
• JS 方式では sessionStorage に加え、送信ボタンの連打防止（CF7 標準のスピナー待ち）を確認する
• GTM とテーマ直書きの両方に同じ A8 タグを置かない
• プレビューや管理者のテストを成果から除外したい場合は、ログイン中はタグを出さない

<?php
function my_a8_tag_only_for_guests() {
  if (is_user_logged_in()) {
    return;
  }
  if (!is_page("thanks")) {
    return;
  }
  // ここに A8 タグ
}
add_action("wp_footer", "my_a8_tag_only_for_guests");

テーマ・計測まわりのおすすめ

タグの出し分けをするなら、ブロックやフックが素直なテーマの方が事故が少ないです。SWELL や SANGO はカスタム HTML と head / footer の追加がしやすく、CF7 ＋広告タグの案件でよく使います。計測の箱を GTM に集約すると、A8・GA4・Meta を同じ「フォーム送信成功」に載せ替えやすいです。ただし GTM とテーマ直書きの二重設置には注意してください。

フォーム計測の代行・ご相談

CF7 のサンクスページ化、A8 / GTM の成果地点設計、二重計測の切り分けまで対応しています。「タグを貼ったのに成果が上がらない」という場合は、イベントの種類とキャッシュ除外を先に見ます。

ご相談はご相談・お問い合わせフォームからお気軽にどうぞ。既存サイトを崩さず、計測だけ先に直すこともできます。