アクセス解析（GA4 / GTM）

フォーム送信成功時に、設置先サイトで運用中の Google アナリティクス（GA4）/ Google タグマネージャーへイベントを自動発火する

CarePort 埋め込みフォームは、送信が成功すると設置先サイトで運用中の GA4 / GTM へ careport_form_submit イベントを自動で発火します。CarePort 側で計測 ID（G-XXXXXXX）を設定する必要はありません。

これは form.js が埋め込み先ページ上で実行され、そのページに既に読み込まれている gtag.js / GTM のインスタンスをそのまま利用するためです（Shadow DOM はフォームの見た目を隔離するだけで、window.gtag などの JavaScript には影響しません）。

送信が成功した本物のコンバージョンだけを計測します。スパム対策の honeypot に引っかかった送信ではイベントは発火しません。

仕組み

設置先サイトの計測構成に合わせて、次の優先順位で 1 つの経路に流します（GA4 への二重計上は起きません）。

サイトの構成	発火する内容
GA4 を `gtag.js` で直接設置	`gtag('event', 'careport_form_submit', { ... })`
GTM 経由で設置（`gtag` 非公開）	`dataLayer.push({ event: 'careport_form_submit', ... })`
GA4 / GTM が無い・独自処理したい	`window` に `CustomEvent('careport:form_submit')` を dispatch（常時）

計測経路が壊れていても、フォームの送信処理そのものには一切影響しません。

既定で送られるイベント

イベント名: careport_form_submit
パラメータ:

パラメータ	内容
`form_id`	送信されたフォームの ID（UUID）
`form_name`	フォーム名
`page_location`	送信が行われたページの URL

GA4 で受け取る（gtag.js 設置の場合）

テスト送信後、GA4 管理画面の 管理 → イベント に careport_form_submit が表示されます（反映に少し時間がかかります）。
これを キーイベント（旧コンバージョン） としてマークすると、コンバージョンとして集計されます。
送信直後の確認は レポート → リアルタイム → イベント数 で見られます。

追加したカスタムパラメータをレポートの軸として使うには、GA4 の カスタム定義（カスタムディメンション） への登録が必要です。登録しなくてもイベント自体は送信されます。

GTM で受け取る（タグマネージャー設置の場合）

dataLayer に push されるので、GTM 側で次のように設定します。

トリガー を「カスタムイベント」で作成し、イベント名に careport_form_submit を指定。
そのトリガーに GA4 イベントタグを紐付け、必要なパラメータをマッピング。

form_id などのパラメータは dataLayer 変数として参照できます。

カスタマイズ

すべて埋め込みコードの data-* 属性で設定でき、CarePort 側のコード変更は不要です。

イベント名を変える

<script
  src="https://cdn.careport.app/v1/form.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-ga-event="contact_submit"
></script>

パラメータを追加する

data-ga-params に JSON を渡すと、既定パラメータと一緒に送られます。顧客が自分でほしいパラメータを自由に追加できる入口です。

<script
  src="https://cdn.careport.app/v1/form.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-ga-params='{"campaign":"spring2026","plan":"pro","value":5000}'
></script>

ルール:

値は 文字列・数値・真偽値 のフラットな JSON のみ（配列・ネストしたオブジェクトは無視されます）。
予約パラメータ（form_id / form_name / page_location）は上書きできません。
1 イベントあたり最大 22 個まで（GA4 の上限 25 から予約 3 個を除いた数）。
不正な JSON や非対応の値は静かに無視され、送信処理には影響しません。

<script>（サイト全体）と <div>（フォーム個別）の両方に指定した場合は、<div> 側が優先してマージされます。

<!-- サイト共通のパラメータは script に、フォーム固有のものは div に -->
<div
  data-careport-form
  data-form-id="00000000-0000-0000-0000-000000000000"
  data-ga-params='{"form_kind":"contact"}'
></div>
<script
  src="https://cdn.careport.app/v1/form.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-ga-params='{"campaign":"spring2026"}'
></script>

計測を無効化する

<script
  src="https://cdn.careport.app/v1/form.js"
  data-key="cp_live_xxxxxxxxxxxxxxxx"
  data-ga="off"
></script>

独自処理に繋ぐ（CustomEvent）

GA4 / GTM 以外の任意の処理に繋ぎたい場合は、careport:form_submit イベントを購読します。GA4 が無くても必ず発火します。

window.addEventListener('careport:form_submit', (e) => {
  console.log(e.detail); // { form_id, form_name, page_location, ...追加パラメータ }
  // 任意のタグ送信・計測・通知など
});

注意点

個人情報は送信しません。 メールアドレス・氏名・本文などの入力値は GA4 へ送られません（GA4 のポリシー上も送ってはいけません）。送られるのは form_id などのメタ情報のみです。
計測の有効化には CDN 配信の form.js が必要です。 機能はリリース後の form.js から有効になります。古いキャッシュが残っている場合は時間をおいて再確認してください。

動作確認

フォームを実際に送信します。
GA4 の リアルタイム → イベント数 で careport_form_submit を確認します。
GA4 を導入していない場合は、ブラウザの DevTools コンソールで上記の addEventListener を仕込んでから送信すると、発火と detail を目視できます。