静的サイトに GA4 を入れて、お問い合わせを成果（generate_lead）として数える

静的サイトの GA4（Google アナリティクス 4）で、お問い合わせを成果として数えるには、お問い合わせが本当に送信できた時だけ、受付の画面で generate_lead というイベントを1回だけ送る作りにします。再読み込みや、受付の URL を直接開いた時、二重送信や機械の投稿と見なした時は、送りません。私たちは、この形でこのサイトに入れました。

測定 ID（G- で始まる、GA4 の計測の番号）は、この記事には書きません。コードの例では、測定ID という言葉に置き換えています。

計測のコードの入れ方：測定 ID は1か所だけ、確認用には入れない

測定 ID は、書き出しの道具（ビルドのプログラム）の1か所にだけ書きました。すべてのページの head に、計測のコードが入ります。

# 計測のコードは本番用の書き出しにだけ入れ、確認用（--preview）には入れない
GA_ID = '測定ID'

def ga_snippet():
    # GTAG_JS_URL は、Google が案内する gtag.js の読み込みの URL
    return (f'<script async src="{GTAG_JS_URL}?id={GA_ID}"></script>\n'
            f"<script>window.dataLayer = window.dataLayer || [];function gtag(){{dataLayer.push(arguments);}}"
            f"gtag('js', new Date());gtag('config', '{GA_ID}');</script>\n")

確認用（preview）の書き出しには、入れていません。確認用のサイトは、オーナーや AI が何度も開くので、入れると、自分たちのアクセスが混ざってしまうからです。

お問い合わせは、本当に送れた時だけ数える

お問い合わせの成果（リード）は、generate_lead というイベントで数えます。大事なのは、「フォームのボタンを押した時」ではなく、「本当に送信できた時」に数えることです。

私たちの作りは、次のとおりです。

1. サーバーが、メールを送れた時だけ目印を作る

   お問い合わせのプログラム（PHP）が、メールの送信に成功した時だけ、1回限りの目印を作ります。二重送信や、機械の投稿と見なした時は、この目印を作りません。

2. 受付の画面に、目印を載せる

   送信のあとの受付の画面を開く時に、目印を HTML に載せます。目印は、画面に出したら、すぐ使い切りにします。

3. 目印がある時だけ、generate_lead を送る

   受付の画面の JavaScript が、目印を見つけた時だけ、generate_lead を1回送ります。同じ目印では、二度と送りません。

// お問い合わせの送信の完了：受付の画面に目印がある時だけ、1回だけ送る（同じ目印では二度と送らない）
var done = document.querySelector('.form-done[data-lead]');
if (done) {
  var key = 'ga-lead-' + done.getAttribute('data-lead');
  var sent = false;
  try { sent = sessionStorage.getItem(key) === '1'; sessionStorage.setItem(key, '1'); } catch (e) {}
  if (!sent) gaEvent('generate_lead', { form: 'contact', page_path: location.pathname });
}

送らない場合：再読み込み、直接開く、二重送信、機械の投稿

この作りで、次の場合は generate_lead を送りません。

• 受付の画面を再読み込みした時。目印は一度画面に出したら使い切りなので、2回目の表示には載りません
• 受付の URL を、直接開いた時。送信していないので、目印がありません
• 二重送信の時。送信済みの券でもう一度送られた場合は、メールを送り直さず、目印も作りません
• 機械の投稿と見なした時。メールを送らないので、目印も作りません

ほかのイベント：app_store_click と cta_click

お問い合わせのほかに、2つのクリックを数えています。

どのイベントにも、名前やメールアドレスなどの入力内容は入れません。送るのは、フォームの種類や、ページの場所、リンクの行き先など、人を特定しないものだけです。

つまずき：点検の道具のアクセスが GA4 に混ざった

点検の道具を動かした時に、手元のサーバーからのアクセスが、GA4 に1回混ざりました。点検の道具は、手元で配信したサイトをブラウザで開くので、計測のコードが動いて、Google に送ってしまったのです。

そこで、点検の道具では、Google への送信を止めるようにしました。あわせて、書き出しのあとの点検（check_site.py）に、「本番用のすべてのページに、計測のコードが1回だけ入り、確認用には入っていないこと」を確かめる項目を足しました。

GA4 の画面でやること

コードを入れたあと、GA4 の画面で行うことが2つあります。

1. generate_lead を、キーイベント（成果として数えるイベント）にする
2. リアルタイムの画面で、イベントが届いているかを確かめる

まとめ

• 測定 ID は、書き出しの道具の1か所にだけ書き、すべてのページの head に入れた。確認用の書き出しには入れない
• お問い合わせは、サーバーがメールを送れた時だけ目印を作り、受付の画面で generate_lead を1回だけ送る
• 再読み込み、受付の URL を直接開く、二重送信、機械の投稿では送らない
• App Store へのボタンは app_store_click、記事の最後の案内は cta_click で数える。入力内容はどのイベントにも入れない
• 点検の道具のアクセスが混ざったので、点検の道具では Google への送信を止めた