LP Analytics導入ガイド

計測タグ (tracker.js) の導入

外部の LP に <script> タグを 1 行貼り、計測したいボタンで trackEvent() を呼ぶだけで計測を始められる。 まず「まとめて貼る」を試し、必要に応じて個別の手順を読む。

01

まとめて貼る

LINE・電話・フォームの 3 パターンを含む完全な HTML。YOUR_SITE_ID を LP 管理 で取得した siteId に置き換えれば動く。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>サンプルLP</title>

  <!-- ① 計測タグ: site_id をご自身のサイトIDに書き換えてください -->
  <script
    src="https://lp-dashboard.maxelustech.com/tracker.js"
    data-site-id="YOUR_SITE_ID"
  ></script>
</head>
<body>
  <h1>キャンペーンLP</h1>
  <p>無料相談はこちらから</p>

  <!-- ② LINE 相談ボタン -->
  <a
    href="https://line.me/R/ti/p/@your-account"
    target="_blank"
    rel="noopener"
    onclick="trackEvent('lp_line_click')"
  >LINEで無料相談する</a>

  <!-- ③ 電話タップ -->
  <a
    href="tel:0120-000-000"
    onclick="trackEvent('lp_tel_click')"
  >0120-000-000</a>

  <!-- ④ フォーム送信 -->
  <form onsubmit="trackEvent('lp_form_submit')">
    <input name="name" placeholder="お名前" required />
    <input name="email" type="email" placeholder="メール" required />
    <button type="submit">送信</button>
  </form>
</body>
</html>

貼り付け後に 3 つのボタンを押すと、アクションログ に lp_line_click / lp_tel_click / lp_form_submit が 3 件流れる。

02

script タグを head に 1 行追加する

data-site-id には LP 管理 で確認した siteId を入れる。

<script src="https://lp-dashboard.maxelustech.com/tracker.js" data-site-id="YOUR_SITE_ID"></script>
script タグはどこに置いても動くが、<head> に置くと tracker.js のロードが最も早くなる。
03

公開キーを足して v1 API を使う（推奨）

data-public-key があると、tracker.js は送信先を /api/v1/track に切り替える。SPA のページ遷移、流入元の正規化 (first-touch / last-touch)、セッション、イベントの重複排除が有効になる。

属性で指定する
<script
  src="https://lp-dashboard.maxelustech.com/tracker.js"
  data-site-id="YOUR_SITE_ID"
  data-public-key="YOUR_PUBLIC_KEY"
></script>
グローバル変数で指定する（既存の埋め込みコードに後付けする場合）
<script src="https://lp-dashboard.maxelustech.com/tracker.js"></script>
<script>
  window.LP_TRACKING_SITE_ID     = "YOUR_SITE_ID";
  window.LP_ANALYTICS_PUBLIC_KEY = "YOUR_PUBLIC_KEY";
</script>

YOUR_PUBLIC_KEY は API 連携画面で公開キー (lpa_site_pub_…) を発行して差し替える。平文は発行直後の 1 回しか表示されない (サーバーにはハッシュのみ保存)。

公開キーが無いタグは従来どおり /api/track に旧形式で送信される。 貼り替えなくても計測は止まらない。

v1 は未登録のイベントキーを受け付けない (400)。送信するキーは先に成果の設定へ登録する。 ページビューのイベント名は page_view (旧ルートは pageview)。

サイトに Origin 許可リストを設定している場合、リストに無いドメインからの送信は 403 になる。

04

計測したいボタンに onclick を追加する

siteId は script タグの data-site-id から自動補完される。 引数は eventKey だけでよい。

LINE ボタン
<button onclick="trackEvent('lp_line_click')">
  LINEで相談
</button>
電話ボタン
<a href="tel:0120-000-000" onclick="trackEvent('lp_tel_click')">
  電話で問い合わせる
</a>
フォーム送信
<form onsubmit="trackEvent('lp_form_submit')">
  <input name="email" required />
  <button type="submit">送信</button>
</form>
05

eventKey の命名

ダッシュボードの「アクション別成果」に集計させる場合は、LP 管理 → 成果の設定 でも同じ key を登録する。

event_key用途
lp_line_clickLINE 公式アカウント追加ボタン
lp_tel_click電話番号タップ
lp_form_submitフォーム送信完了
lp_cta_clickメイン CTA (汎用)
lp_scroll_5050% スクロール到達 (任意の JS で発火)
pageviewページ表示 (任意で onload 発火)
06

問い合わせフォームを DB に保存する

フォーム送信内容を /api/inquiries に POST すると inquiries テーブルへ保存され、問い合わせ管理 で受信を確認できる。 送信成功時は lp_form_submit イベントもサーバー側で自動記録される。

<form id="contact-form">
  <input name="name" placeholder="お名前" required />
  <input name="email" type="email" placeholder="メール" required />
  <input name="phone" placeholder="電話番号 (任意)" />
  <textarea name="message" placeholder="お問い合わせ内容" required></textarea>
  <button type="submit">送信</button>
</form>

<div id="contact-result" hidden></div>

<script>
  document.getElementById("contact-form").addEventListener("submit", async function (e) {
    e.preventDefault();
    var form = e.currentTarget;
    var fd = new FormData(form);
    var btn = form.querySelector("button[type=submit]");
    var result = document.getElementById("contact-result");

    btn.disabled = true;
    result.hidden = true;

    try {
      var res = await fetch("https://lp-dashboard.maxelustech.com/api/inquiries", {
        method: "POST",
        mode: "cors",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          siteId: window.LP_TRACKING_SITE_ID,  // tracker.js の data-site-id から自動取得
          name: fd.get("name"),
          email: fd.get("email"),
          phone: fd.get("phone") || undefined,
          message: fd.get("message"),
        }),
      });
      var data = await res.json();

      if (res.ok && data.ok) {
        result.textContent = "送信ありがとうございました。担当より追ってご連絡します。";
        result.style.color = "green";
        form.reset();
        // 注: /api/inquiries 側で lp_form_submit イベントもサーバ側で自動記録される
      } else {
        result.textContent = "送信失敗: " + (data.error || res.statusText);
        result.style.color = "red";
      }
    } catch (err) {
      result.textContent = "送信失敗: " + err.message;
      result.style.color = "red";
    } finally {
      btn.disabled = false;
      result.hidden = false;
    }
  });
</script>
必須
siteId / name / email / message
任意
phone / company
制限
email 形式チェック、name・email ≤ 200 / phone ≤ 50 / message ≤ 5000
レスポンス
成功 { ok: true, id } / 失敗 { ok: false, error }
07

trackEvent() の呼び出しパターン

下記のいずれの書き方でも動く。

// パターンA: ショートハンド (推奨)
trackEvent("lp_line_click");

// パターンB: オブジェクト指定 (siteIdを上書きしたい時等)
trackEvent({ siteId: "xxx", eventKey: "lp_line_click" });

// パターンC: metadata付き (任意のJSONを events.metadata に保存)
trackEvent({ eventKey: "lp_form_submit", metadata: { plan: "pro" } });
08

テスト LP で導入を検証する

本サービスに同梱の テスト LP は、LINE・電話・ 問い合わせフォームの 3 ボタンを実装済み。外部 LP に貼る前に、 tracker.js と GA4 の両方が動いているかをここで確認できる。

環境変数を設定する

Vercel の Project Settings → Environment Variables に次の 2 つを登録する (ローカルは .env.local)。

NEXT_PUBLIC_DEMO_SITE_ID="<LP管理で作成したsiteのID>"
NEXT_PUBLIC_GA4_MEASUREMENT_ID="G-XXXXXXXXXX"  # 任意 (GA4計測したい場合)
  • NEXT_PUBLIC_DEMO_SITE_ID — LP 管理 でデモ用の LP を 1 件作り、その siteId をコピーする
  • NEXT_PUBLIC_GA4_MEASUREMENT_ID — GA4 プロパティの測定 ID (G- で始まる)。未設定でも tracker.js 部分だけは検証できる
  • Vercel は環境変数の変更後に再デプロイが必要

検証用 URL を開いてボタンを押す

次の URL をブラウザで開き、ページ内の LINE・電話・フォームの 3 ボタンをそれぞれ押す。 ページ最上部の帯で UTM が認識されていることを確認できる。

Instagram 流入
開く
https://lp-dashboard.maxelustech.com/lp-saas-demo?utm_source=instagram&utm_medium=social&utm_campaign=test
X (Twitter) 流入
開く
https://lp-dashboard.maxelustech.com/lp-saas-demo?utm_source=x&utm_medium=social&utm_campaign=test
直接流入
開く
https://lp-dashboard.maxelustech.com/lp-saas-demo

計測結果を確認する

  1. アクションログ — 押したボタンの分だけ lp_line_click / lp_tel_click / lp_form_submit が即時に並べば tracker.js は正常
  2. 問い合わせ管理 — フォームから送信したテスト内容が一覧に出ればフォーム連携も正常
  3. ダッシュボード — 流入元ランキングに instagram / x / direct が出る (GA4 側の値のため、次の同期後に反映)

GA4 から analytics_sources_daily への同期は毎日 03:00 JST (Vercel Cron) に実行される。すぐ確認したい場合は LP 管理 の各 LP 詳細から手動同期する (GA4 プロパティ ID の設定が必要)。

tracker.js 側の成果は API 着信後すぐ反映され、同期を待つ必要はない。

09

うまく動かないとき

trackEvent is not defined
script の読み込みが終わる前にボタンを押している。head に置くか、async / defer を外して同期ロードにする。
siteId が見つかりません
script タグに data-site-id が無い。LP 管理で siteId を取得して埋める。
送信されているがアクションログに出ない
DevTools の Network で /api/track のステータスを見る。404 なら siteId が違う。200 なら反映済み (1〜2 秒のキャッシュあり)。
ダッシュボードの成果数が動かない
event_key と一致する event_definitions が LP に未登録。LP 管理 → 編集 → 成果の設定で同じ key を is_conversion = true で追加する。
10

リファレンス

tracker.js
https://lp-dashboard.maxelustech.com/tracker.js
送信先 (公開キーなし)
POST https://lp-dashboard.maxelustech.com/api/track
送信先 (公開キーあり)
POST https://lp-dashboard.maxelustech.com/api/v1/track
CORS
旧: 任意のドメインから利用可 / v1: サイトの Origin 許可リストに一致した Origin のみ
送信ペイロード
旧: { siteId, eventKey, metadata? }
v1: { siteId, publicKey, eventId, eventName, occurredAt, page, referrer, attribution, properties }
レスポンス
旧: { ok: true } / { ok: false, error }
v1: { success: true, data: { eventId, deduplicated }, requestId }
集計の確認
ダッシュボード (要ログイン)