Case Study

Meta Pixel 実装事例
LP + サンクスページの広告計測を、検証込みで納品

架空のオンライン英会話サービス「Global Talk」のランディングページに Meta Pixel を実装した事例です。base code の設置から、フォーム送信時の Lead、登録完了時の CompleteRegistration まで、実際に動くデモページ上で全イベントの発火を確認できます。

  • 実装イベント PageView / Lead / CompleteRegistration
  • 実装期間 最短2営業日
  • 検証 Meta Pixel Helper + イベントマネージャー

実装概要

広告運用で「クリックは取れているのにコンバージョンが見えない」という状態を解消するため、LPの閲覧からメール登録完了までを3つの標準イベントで計測しています。標準イベントのみで構成しているため、Meta広告の最適化・オーディエンス作成にそのまま利用できます。

イベント 発火タイミング 実装箇所 広告運用での用途
PageView 全ページの表示時(base code に含む) index.html / thanks.html リターゲティング用オーディエンスの母集団
Lead 登録フォーム送信時。メール形式のバリデーションを通過した場合のみ発火 js/demo.js(submit ハンドラー内) 見込み顧客の獲得計測・類似オーディエンス作成
CompleteRegistration サンクスページ表示時 thanks.html(base code 直後) 最終コンバージョンとして広告配信を最適化

実装時間の目安は最短2営業日(base code + 標準イベント2種、検証・レポート込み)。ページ数やカスタムイベントの有無により変動します。詳細は下部の料金プランをご覧ください。

実際に動くデモLPを見る

この事例のデモLPは実際にブラウザで動作します。Chrome 拡張機能の Meta Pixel Helper を入れた状態でアクセスすると、LP表示で PageView、フォーム送信で Lead、登録完了ページで CompleteRegistration が発火する様子をその場で確認できます。

※ デモLPは架空サービスです。フォームを送信しても外部にデータは送信されません。

デモLPを開く

実装コード

以下はすべてデモLPに実際に実装されているコードからの引用です。コピペで終わりにせず、「いつ・どの条件で発火させるか」まで設計するのが計測実装の品質を分けます。

1. base code(全ページ共通)

Meta 公式のベースコードを <head> 内に設置し、Pixel の初期化と PageView の計測を行います。JavaScript 無効環境向けの <noscript> フォールバックも省略せず実装します。Pixel ID は納品時にお客様の実IDへ差し替えます。

pixel-demo/index.html HTML
<!-- Meta Pixel Code -->
<script>
  !(function (f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function () {
      n.callMethod
        ? n.callMethod.apply(n, arguments)
        : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = "2.0";
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  })(
    window,
    document,
    "script",
    "https://connect.facebook.net/en_US/fbevents.js",
  );
  fbq("init", "YOUR_PIXEL_ID_HERE");
  fbq("track", "PageView");
</script>
<noscript
  ><img
    height="1"
    width="1"
    style="display: none"
    src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID_HERE&ev=PageView&noscript=1"
    alt=""
/></noscript>
<!-- End Meta Pixel Code -->

出典: pixel-demo/index.html 15〜51行目(実装コードそのまま)

2. Lead イベント(フォーム送信時)

「送信ボタンを押したら発火」ではなく、メールアドレスのバリデーションを通過した場合のみ発火させています。さらに fbq のビーコン送信が完了する猶予として 300ms 待ってからサンクスページへ遷移し、計測の取りこぼしを防ぎます(二重遷移ガード付き)。

pixel-demo/js/demo.js JavaScript
var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

function initLeadForm() {
  var form = document.getElementById("lead-form");
  if (!form) return;

  var input = document.getElementById("email");
  var error = document.getElementById("email-error");

  form.addEventListener("submit", function (event) {
    event.preventDefault();

    var value = input ? input.value.trim() : "";
    var valid = EMAIL_RE.test(value);

    if (!valid) {
      if (input) input.classList.add("is-invalid");
      if (error) error.hidden = false;
      if (input) input.focus();
      return;
    }

    if (input) input.classList.remove("is-invalid");
    if (error) error.hidden = true;

    /* バリデーション通過時のみ Lead を発火 */
    if (typeof window.fbq === "function") {
      window.fbq("track", "Lead");
    }

    /* ビーコン送信の猶予を確保してから遷移 (二重遷移ガード付き) */
    var navigated = false;
    var go = function () {
      if (navigated) return;
      navigated = true;
      window.location.href = "thanks.html";
    };
    window.setTimeout(go, 300);
  });

  if (input) {
    input.addEventListener("input", function () {
      input.classList.remove("is-invalid");
      if (error) error.hidden = true;
    });
  }
}

出典: pixel-demo/js/demo.js 112行目・114〜158行目(実装コードそのまま)

3. CompleteRegistration イベント(登録完了ページ)

サンクスページ(thanks.html)の base code 末尾で、PageView に続けて CompleteRegistration を発火させます。ローダー部分は index.html の base code と同一のため、ここでは末尾の track 呼び出し部分を引用します。URL が変わるサンクスページ型は、フォーム完了計測のなかでも最も確実な構成です。

pixel-demo/thanks.html JavaScript
fbq("init", "YOUR_PIXEL_ID_HERE");
fbq("track", "PageView");
fbq("track", "CompleteRegistration");

出典: pixel-demo/thanks.html 38〜40行目(base code 内・実装コードそのまま)

検証結果

実装後は Meta Pixel Helper(Chrome 拡張機能)で各ページのイベント発火を確認し、さらにイベントマネージャーの「テストイベント」で Meta 側にデータが届いていることまで確認してから納品します。

Meta Pixel Helper で PageView イベントの発火を確認した画面のプレースホルダー
1. PageView の発火確認 デモLP(index.html)を開いた直後の Meta Pixel Helper。base code が正しく読み込まれ、PageView が1回だけ発火していること、Pixel ID が正しいことを確認します。
Meta Pixel Helper で Lead イベントの発火を確認した画面のプレースホルダー
2. Lead の発火確認 登録フォームに正しい形式のメールアドレスを入力して送信した直後の状態。PageView に加えて Lead が追加発火しています。不正な形式では発火しないことも併せて確認します。
Meta Pixel Helper で CompleteRegistration イベントの発火を確認した画面のプレースホルダー
3. CompleteRegistration の発火確認 サンクスページ(thanks.html)到達時の状態。PageView と CompleteRegistration の2イベントが発火し、登録完了がコンバージョンとして計測されています。
イベントマネージャーのテストイベント画面で3イベントの受信を確認した画面のプレースホルダー
4. イベントマネージャーでの受信確認 ブラウザ側の発火確認だけでなく、Meta のイベントマネージャー「テストイベント」で PageView / Lead / CompleteRegistration の受信を確認。ここまで通って初めて「計測できている」と言えます。

※ 上記4枚は構成説明用のプレースホルダー画像です。実案件の納品時には、お客様の Pixel ID での実際の検証スクリーンショットを検証レポートとしてお渡しします。

実装フロー(6ステップ)

ご依頼から納品まで、以下の流れで進めます。検証を2段階(ブラウザ側 + Meta 側)に分けているのが特徴です。

  1. ヒアリング

    計測したいコンバージョン(購入・問い合わせ・登録など)と対象ページ構成を確認し、使用する標準イベントを選定します。

  2. Pixel ID・権限の確認

    お客様のイベントマネージャーで Pixel ID を確認し、必要に応じてビジネスマネージャーの権限付与・新規 Pixel の作成をサポートします。

  3. 実装

    base code を全ページに設置し、コンバージョンイベントを発火条件(バリデーション通過・サンクスページ到達など)込みで実装します。

  4. Meta Pixel Helper での検証

    Chrome 拡張機能でページごとの発火状況を確認。イベントの重複発火・未発火・ID の誤りがないかをチェックします。

  5. イベントマネージャーでの受信確認

    「テストイベント」機能で、実装した全イベントが Meta 側に正しく届いていることをリアルタイムに確認します。

  6. 納品・検証レポート提出

    実装内容の一覧と検証スクリーンショットをまとめた検証レポートを添えて納品します。広告設定側で使う際のイベント名もあわせてご案内します。

料金プラン

ページ数と計測設計の複雑さに応じた3プランです。いずれも検証(Pixel Helper + イベントマネージャー)込みの料金です。

基本プラン

15,000円〜

まずは PageView とコンバージョン1つを確実に計測したい方に

  • base code 設置(1ページ)
  • 標準イベント1種(Lead など)
  • Meta Pixel Helper での発火検証
  • 簡易検証レポート(テキスト)
  • 納期目安: 最短2営業日

プレミアムプラン

30,000円〜

複数LPの一括実装や、より細かい計測設計が必要な方に

  • スタンダードプランの全内容
  • 3ページ以上・複数LPの一括実装
  • カスタムパラメータ設計(value / currency 等)
  • コンバージョンAPI導入のご相談
  • 納品後30日間の動作サポート
  • 納期目安: 4〜7営業日

※ 価格はすべて税込・目安です。既存サイトの構成(タグマネージャー使用の有無など)により変動するため、正式なお見積もりはヒアリング後にご提示します。

Meta Pixel の実装、お任せください

「広告は出しているのに計測が合っているか不安」という段階のご相談も歓迎です。現状の実装チェックだけのご依頼も承ります。まずはココナラのメッセージからお気軽にどうぞ。

ココナラで相談する

※ 出品ページは準備中です。リンクは公開後に差し替えます。