<p>Contact Form 7（以下 CF7）で問い合わせを受け、A8.net などの成果計測タグを「送信完了のタイミング」で発火させたい。ところが CF7 はデフォルトで<strong>同じページ内に完了メッセージを出す</strong>だけで、サンクスページに遷移しません。成約タグをどこに置けばよいか分からず、計測漏れや二重計測が起きやすいです。</p><p>この記事では、実務でフォーム計測を入れてきた立場から、<strong>サンクスページへ飛ばす方法</strong>と、<strong>同一ページで JS イベント発火する方法</strong>の2つを、いまの CF7 仕様に合わせて解説します。古い <code>on_sent_ok</code> は使いません。</p><h2 id="hf8427d24b6">なぜ CF7 へのタグ埋め込みで事故が起きやすいか</h2><p>A8 の成果タグは「コンバージョンが確定したページで、1回だけ」動かす前提です。CF7 は次の理由で、そのままでは相性が悪いです。</p><ul><li>送信後も URL が変わらない（完了ページが無い）</li><li>同じページを再読み込みすると、タグを直書きしていると再発火しやすい</li><li>バリデーション失敗の送信でも JS が動くと、未完了を成果にしてしまう</li></ul><blockquote><p>昔よく使われた Contact Form 7 の追加設定 <code>on_sent_ok</code> は、CF7 4.8 以降で廃止されています。今これを書くと無視されるか、動かないと思ってください。代替は DOM イベント <code>wpcf7mailsent</code> です。</p></blockquote><p>使うイベントは次で切り分けます。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>イベント</p></th><th colspan="1" rowspan="1"><p>意味</p></th><th colspan="1" rowspan="1"><p>タグ発火に使うか</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>wpcf7submit</code></p></td><td colspan="1" rowspan="1"><p>送信ボタンが押された（失敗も含む）</p></td><td colspan="1" rowspan="1"><p>使わない</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>wpcf7invalid</code></p></td><td colspan="1" rowspan="1"><p>バリデーションエラー</p></td><td colspan="1" rowspan="1"><p>使わない</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>wpcf7mailsent</code></p></td><td colspan="1" rowspan="1"><p>メール送信まで成功</p></td><td colspan="1" rowspan="1"><p>ここで発火・リダイレクト</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>wpcf7mailfailed</code></p></td><td colspan="1" rowspan="1"><p>メール送信失敗</p></td><td colspan="1" rowspan="1"><p>使わない</p></td></tr></tbody></table><h2 id="hf5125c5bcf">方法1：サンクスページへリダイレクトしてタグを置く（推奨）</h2><p>計測の見通しが良く、広告運用者とページ実装を分けやすいので、実務ではこちらを先に勧めます。流れは次です。</p><ol><li>WordPress で固定ページ「送信完了（スラッグ <code>thanks</code>）」を作る</li><li>そのページにだけ A8 の成果タグを貼る</li><li>CF7 の送信成功時に <code>/thanks/</code> へ飛ばす</li></ol><h3 id="h88de3607d0">1. 送信完了ページを作る</h3><p>固定ページを新規作成し、スラッグを <code>thanks</code> にします。本文は「お問い合わせありがとうございました」で十分です。パーマリンクが <code>https://example.com/thanks/</code> になることを確認してください。</p><p>このページの「カスタム HTML」ブロック、またはテーマの head / body 終了前に、A8 管理画面から発行した成果計測タグを置きます。値は必ず自分のプログラム ID に差し替えてください。</p><div data-filename="thanksページ（カスタムHTML）"><pre><code class="language-html">&lt;script src=&quot;https://statics.a8.net/a8sales/a8sales.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  a8sales({
    &quot;pid&quot;: &quot;s00000000000&quot;,
    &quot;order_number&quot;: &quot;INQUIRY-&quot; + Date.now(),
    &quot;currency&quot;: &quot;JPY&quot;,
    &quot;items&quot;: [
      {
        &quot;code&quot;: &quot;inquiry&quot;,
        &quot;price&quot;: 0,
        &quot;quantity&quot;: 1
      }
    ],
    &quot;totalPrice&quot;: 0
  });
&lt;/script&gt;</code></pre></div><p>問い合わせフォームは金額が 0 円でも、A8 側の成果地点設定と <code>code</code> を合わせておけば計測できます。<code>order_number</code> は重複しない値にしてください。同じ番号だと成果が弾かれることがあります。</p><h3 id="h9d9ffd988e">2. 送信成功でサンクスページへ飛ばす</h3><p>テーマの <code>functions.php</code> に、フッターへスクリプトを出す処理を足します。子テーマを使ってください。親テーマを直接いじると更新で消えます。</p><div data-filename="functions.php"><pre><code class="language-php">&lt;?php
function my_cf7_redirect_to_thanks() {
  if (is_admin()) {
    return;
  }
  ?&gt;
  &lt;script&gt;
  document.addEventListener(&quot;wpcf7mailsent&quot;, function (event) {
    window.location.href = &quot;/thanks/&quot;;
  }, false);
  &lt;/script&gt;
  &lt;?php
}
add_action(&quot;wp_footer&quot;, &quot;my_cf7_redirect_to_thanks&quot;);</code></pre></div><p>フォームが複数あり、特定のフォームだけ飛ばしたい場合は、イベントの <code>event.detail.contactFormId</code> で分岐します。フォーム ID は CF7 編集画面のショートコード <code>[contact-form-7 id=&quot;123&quot; ...]</code> の数字です。</p><pre><code class="language-javascript">document.addEventListener(&quot;wpcf7mailsent&quot;, function (event) {
  if (event.detail.contactFormId === 123) {
    window.location.href = &quot;/thanks/&quot;;
  }
}, false);</code></pre><h2 id="h6f3b0bef9e">方法2：リダイレクトせず、wpcf7mailsent で直接発火する</h2><p>サンクスページを増やせない、同一ページ完結にしたい場合の上級者向けです。完了メッセージはその場に出し、成功時だけ A8 のスクリプトを読み込んで実行します。</p><div data-filename="cf7-a8-conversion.js"><pre><code class="language-javascript">document.addEventListener(&quot;wpcf7mailsent&quot;, function (event) {
  if (window.sessionStorage.getItem(&quot;a8_cv_sent&quot;) === &quot;1&quot;) {
    return;
  }

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

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

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

  const script = document.createElement(&quot;script&quot;);
  script.src = &quot;https://statics.a8.net/a8sales/a8sales.js&quot;;
  script.onload = run;
  document.body.appendChild(script);
}, false);</code></pre></div><p>テーマの JS に足すか、<code>wp_footer</code> で出力します。ポイントは次です。</p><ul><li>フォーム送信ボタンの <code>onclick</code> では発火しない</li><li><code>wpcf7submit</code> では発火しない</li><li>同じタブで何度も成功させないよう <code>sessionStorage</code> で一度きりにする</li></ul><h2 id="ha189ba8ca9">現場でハマりがちなポイント</h2><h3 id="hfdb45aa316">テスト送信の確認方法</h3><p>A8 の管理画面反映にはタイムラグがあるので、まずはブラウザでタグが動いたかを見ます。</p><ol><li>Chrome のデベロッパーツール → Network を開く</li><li>フィルタに <code>a8</code> や <code>a8sales</code> を入れる</li><li>テスト送信する</li><li>サンクスページ方式なら、遷移後に <code>a8sales.js</code> と成果リクエストが 200 で走るか確認する</li><li>JS 発火方式なら、送信成功後（リダイレクト無し）に同じリクエストが出るか確認する</li></ol><p>コンソールに <code>a8sales is not defined</code> と出る場合は、本体 JS の読み込みより先に実行しています。<code>onload</code> 待ちを入れてください。</p><h3 id="hfbae3184b8">キャッシュプラグインと Cookie（ITP）</h3><p>サンクスページをキャッシュすると、別ユーザーの成果が混ざったり、タグが古い HTML のまま固まったりします。WP Rocket、W3 Total Cache、LiteSpeed Cache などを使っている場合は、<code>/thanks/</code> をキャッシュ除外にしてください。</p><p>Safari の ITP 以降、第三者 Cookie に依存した計測は外れやすくなっています。A8 のタグは公式の最新コードを使い、入力ページからサンクスページまで同一ドメインで完結させる方が安定します。広告の着地とフォームが別ドメインだと、成果が飛びやすいです。</p><h3 id="h3a66a7f1bc">二重計測を防ぐ</h3><ul><li>サンクスページを再読み込みしても成果を重ねないよう、<code>order_number</code> を毎回ユニークにする（A8 側の重複排除に効く）</li><li>サンクスページ方式では、完了ページに「もう一度送信」を置かない</li><li>JS 方式では <code>sessionStorage</code> に加え、送信ボタンの連打防止（CF7 標準のスピナー待ち）を確認する</li><li>GTM とテーマ直書きの両方に同じ A8 タグを置かない</li><li>プレビューや管理者のテストを成果から除外したい場合は、ログイン中はタグを出さない</li></ul><div data-filename="functions.php"><pre><code class="language-php">&lt;?php
function my_a8_tag_only_for_guests() {
  if (is_user_logged_in()) {
    return;
  }
  if (!is_page(&quot;thanks&quot;)) {
    return;
  }
  // ここに A8 タグ
}
add_action(&quot;wp_footer&quot;, &quot;my_a8_tag_only_for_guests&quot;);</code></pre></div><h2 id="he18b38ec03">テーマ・計測まわりのおすすめ</h2><p>タグの出し分けをするなら、ブロックやフックが素直なテーマの方が事故が少ないです。SWELL や SANGO はカスタム HTML と head / footer の追加がしやすく、CF7 ＋広告タグの案件でよく使います。計測の箱を GTM に集約すると、A8・GA4・Meta を同じ「フォーム送信成功」に載せ替えやすいです。ただし GTM とテーマ直書きの二重設置には注意してください。</p><h2 id="haed0087c92">フォーム計測の代行・ご相談</h2><p>CF7 のサンクスページ化、A8 / GTM の成果地点設計、二重計測の切り分けまで対応しています。「タグを貼ったのに成果が上がらない」という場合は、イベントの種類とキャッシュ除外を先に見ます。</p><p>ご相談は<a href="/contact/">ご相談・お問い合わせフォーム</a>からお気軽にどうぞ。既存サイトを崩さず、計測だけ先に直すこともできます。</p>

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

<p>「Next.jsで作りたいが、すでにロリポップやエックスサーバーの契約がある」「Vercelに移すほど予算も運用も変えられない」。現場ではよく聞く話です。共有サーバーは基本的にPHP前提で、Node.jsを常駐させるSSRやISRは使えません。</p><p>結論から言うと、<strong>共有サーバーでNext.jsを公開するなら SSG（静的エクスポート）が前提</strong>です。<code>output: &apos;export&apos;</code> でHTMLを書き出し、<code>out</code> を <code>public_html</code> に置く構成です。</p><p>この記事では、フリーランスのWebディレクター兼エンジニアとして、実際に共有サーバーへNext.jsを納品した手順と、そこで必ず踏む罠（画像最適化、API Routes、404）をまとめています。</p><h2 id="h81ec6d415c">なぜ共有サーバー × Next.js（SSG）なのか</h2><p>VercelやCloudflareは便利ですが、既存契約を残したい案件では「今あるサーバーに静的ファイルを置く」方が早いです。</p><ul><li>サーバー契約を増やさず、固定費を抑えられる</li><li>HTML配信なので表示が速い</li><li>WordPressを残したまま、フロントだけモダン化できる</li></ul><blockquote><p>実務では「Nodeが動かない」は欠点ではなく、制約です。制約を先に設計に入れると、後からISR前提のコードを書いて詰むことが減ります。</p></blockquote><table><tbody><tr><th colspan="1" rowspan="1"><p>方式</p></th><th colspan="1" rowspan="1"><p>共有サーバー</p></th><th colspan="1" rowspan="1"><p>向いていること</p></th></tr><tr><td colspan="1" rowspan="1"><p>SSR / ISR</p></td><td colspan="1" rowspan="1"><p>不可（Node常駐が必要）</p></td><td colspan="1" rowspan="1"><p>Vercelなど</p></td></tr><tr><td colspan="1" rowspan="1"><p>SSG（<code>output: &apos;export&apos;</code>）</p></td><td colspan="1" rowspan="1"><p>可</p></td><td colspan="1" rowspan="1"><p>コーポレート、ブログ、ポートフォリオ</p></td></tr></tbody></table><h2 id="h868447cfa4">構築手順</h2><h3 id="h7fd1504381">1. 静的エクスポートを有効にする</h3><p>App Routerでも Pages Routerでも、設定の核は同じです。共有サーバー向けは次の3点がセットです。</p><div data-filename="next.config.ts"><pre><code class="language-typescript">import type { NextConfig } from &quot;next&quot;;

const nextConfig: NextConfig = {
  output: &quot;export&quot;,
  distDir: &quot;out&quot;,
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
};

export default nextConfig;</code></pre></div><ul><li><code>output: &quot;export&quot;</code> … サーバーなしで動くHTMLを出す</li><li><code>trailingSlash: true</code> … <code>/about/</code> を <code>about/index.html</code> にする。共有サーバーの404対策でほぼ必須</li><li><code>images.unoptimized: true</code> … 後述する <code>next/image</code> の罠を避ける</li></ul><h3 id="h51a4a280c7">2. ビルドして out を作る</h3><pre><code class="language-bash">pnpm build
# または
npm run build</code></pre><p>成功するとプロジェクト直下に <code>out</code> ができます。中身は <code>index.html</code> と各ページのフォルダです。このディレクトリだけをサーバーに上げます。<code>node_modules</code> は不要です。</p><div data-filename="package.json"><pre><code class="language-json">{
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build&quot;,
    &quot;export&quot;: &quot;next build&quot;
  }
}</code></pre></div><h3 id="hc6032edcb0">3. 共有サーバーへアップロードする</h3><p>アップロード先はサーバーによって名前が違いますが、公開ディレクトリはだいたい次のどれかです。</p><ul><li>mixhost: <code>public_html</code></li><li>エックスサーバー: <code>ドメイン名/public_html</code></li></ul><p><strong>実務での手順</strong>は次のとおりです。</p><ol><li>ローカルで <code>pnpm build</code> する</li><li>SFTP（FileZilla、Cyberduck、VS Code / Cursor のSFTP拡張）で接続する</li><li><code>out</code> の中身を <code>public_html</code> にコピーする（<code>out</code> フォルダごとではなく中身）</li><li>ブラウザでトップと下層URLを確認する</li></ol><blockquote><p><code>out/about/index.html</code> はサーバー上では <code>public_html/about/index.html</code> です。<code>out</code> ごと上げると <code>example.com/out/</code> になって事故ります。</p></blockquote><p>SSHが使えるプランなら、手元でビルドして <code>rsync</code> する方が差分更新できて安全です。</p><pre><code class="language-bash">pnpm build
rsync -avz --delete ./out/ user@example.com:~/public_html/</code></pre><h2 id="ha189ba8ca9">現場でハマりがちなポイント</h2><h3 id="hddec7d0dd8">next/image がそのまま使えない</h3><p>Next.jsの画像最適化は、実行時にNodeが画像を処理する仕組みです。SSGにはそのサーバーがありません。設定しないとビルドエラー、または本番で画像が壊れます。</p><p>実務では次のどちらかです。</p><ol><li><code>images.unoptimized: true</code> にして、<code>&lt;Image&gt;</code> を普通のimgとして出す</li><li>microCMSやImgixのURLパラメータでリサイズする（例: <code>?w=800&amp;q=80</code>）</li></ol><div data-filename="components/Hero.tsx"><pre><code class="language-tsx">import Image from &quot;next/image&quot;;

export default function Hero({ src, alt }: { src: string; alt: string }) {
  return (
    &lt;Image
      src={src}
      alt={alt}
      width={800}
      height={450}
    /&gt;
  );
}</code></pre></div><p>microCMSの画像なら、ドメイン許可は静的エクスポートではほぼ関係なくなります。<code>unoptimized</code> にした時点で最適化プロキシを通らないためです。代わりにCMS側のリサイズを使います。</p><pre><code class="language-typescript">const src = `${eyecatch.url}?w=800&amp;q=80&amp;fm=webp`;</code></pre><h3 id="h7a8ba3b57c">API Routes が使えない</h3><p><code>app/api/</code> や <code>pages/api/</code> はNodeサーバーです。静的エクスポートではビルド時点で弾かれます。問い合わせフォームをNextのAPIに投げていると、ここで初めて気づくことが多いです。</p><p>代替は次です。</p><ul><li>お問い合わせ: Formspree、Googleフォーム、サーバー側のPHP、またはWordPressのREST</li><li>記事取得: ビルド時にmicroCMSからfetchする（閲覧時にAPIを叩かない）</li><li>Webhook再生成: 共有サーバー単体では難しい。GitHub Actionsでビルドしてrsyncする</li></ul><div data-filename="lib/microcms.ts"><pre><code class="language-typescript">import { createClient } from &quot;microcms-js-sdk&quot;;

const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN!,
  apiKey: process.env.MICROCMS_API_KEY!,
});

export async function getBlogs() {
  return client.getList({
    endpoint: &quot;blogs&quot;,
    queries: { limit: 10, orders: &quot;-publishedAt&quot; },
  });
}</code></pre></div><blockquote><p>APIキーはビルド環境（GitHub ActionsのSecrets）にだけ置きます。静的HTMLにキーを埋め込まないこと。クライアントコンポーネントからmicroCMSを直接叩くとキーが漏れます。</p></blockquote><h3 id="hfe0df3d826">Trailing Slash を忘れると404になる</h3><p>共有サーバーのApacheは、だいたい「ディレクトリ＋index.html」でページを返します。<code>trailingSlash: false</code> のままだと、Nextは <code>about.html</code> を出します。一方ブラウザや内部リンクは <code>/about</code> や <code>/about/</code> を要求し、サーバー側の設定と食い違って404になります。</p><p>実務の対策はシンプルです。</p><ul><li><code>trailingSlash: true</code> にする</li><li>内部リンクは <code>/about/</code> に揃える</li><li>必要なら <code>.htaccess</code> で末尾スラッシュへ寄せる</li></ul><div data-filename=".htaccess"><pre><code class="language-apache">RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ /$1/ [L,R=301]</code></pre></div><h3 id="hc0503dc96f">動的ルートはビルド時に全部出す</h3><p><code>generateStaticParams</code>（App Router）または <code>getStaticPaths</code>（Pages Router）で、公開するURLをビルド時に列挙します。<code>fallback: &apos;blocking&apos;</code> や ISRは共有サーバーでは動きません。記事を追加したら、もう一度ビルドしてアップロードが必要です。</p><div data-filename="app/posts/[id]/page.tsx"><pre><code class="language-tsx">import { getBlogs, getBlog } from &quot;@/lib/microcms&quot;;
import { notFound } from &quot;next/navigation&quot;;

export async function generateStaticParams() {
  const { contents } = await getBlogs();
  return contents.map((post) =&gt; ({ id: post.id }));
}

export default async function PostPage({
  params,
}: {
  params: Promise&lt;{ id: string }&gt;;
}) {
  const { id } = await params;
  const post = await getBlog(id).catch(() =&gt; null);
  if (!post) notFound();

  return (
    &lt;article&gt;
      &lt;h1&gt;{post.title}&lt;/h1&gt;
      &lt;div dangerouslySetInnerHTML={{ __html: post.content }} /&gt;
    &lt;/article&gt;
  );
}</code></pre></div><h2 id="h5a0c599f11">公開前チェックリスト</h2><ul><li><code>output: &quot;export&quot;</code> と <code>trailingSlash: true</code> が入っている</li><li><code>images.unoptimized: true</code> が入っている</li><li><code>app/api</code> や <code>pages/api</code> が残っていない</li><li>ビルドがローカルで通る</li><li><code>out</code> の中身を <code>public_html</code> 直下に置いている</li><li>下層URL（<code>/posts/xxxx/</code>）が404にならない</li></ul><h2 id="h1276fc2775">おすすめの共有サーバー</h2><p>SSGは「HTMLを速く返せるか」が勝負です。次の系統は、静的配信との相性がよく、WordPress併用の案件でも使いやすいです。</p><ul><li><strong>mixhost</strong>: 国内向けの管理画面が分かりやすく、小〜中規模のコーポレートに使いやすい</li><li><strong>エックスサーバー</strong>: 実績が多く、SSHやrsync運用まで見据えるなら候補に入りやすい</li></ul><p>どちらも「Next.js専用」ではありません。PHPサイトと静的フロントを同じ契約で分けて置く、という使い方が実務では多いです。</p><h2 id="h278fa0e7d5">既存WordPressからの移行・デプロイ支援</h2><p>WordPressを残しつつフロントだけNext.jsにする、共有サーバーへSSGで載せる、画像とフォームの代替設計まで、設計から実装まで対応しています。「Vercelには出せないが、表示は速くしたい」という場合は特にこの構成が向いています。</p><p>ご相談は<a href="/contact/">ご相談・お問い合わせフォーム</a>からお気軽にどうぞ。サーバー契約を変えない前提で、移行手順から整理できます。</p>

テクノロジー

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

【実務レベル】Next.jsを一般的な共有サーバーで公開する完全手順｜SSG出力の注意点と対策

Categories