組み込みの注意

性能への影響

項目	値
タグの大きさ	約 8KB（gzip で約 4KB）。ほかのライブラリに依存しません
読み込み	async。ページの描画を止めません
読み込み時の通信	設定の取得が 1 回（GET /v1/sites/{サイトキー}/config）
操作のあとの通信	判定が 1 回。続けて操作したときは、約 0.5 秒待ってまとめて 1 回にします
描画を止める処理	ありません。表示を変える前にページを隠す処理（ちらつき防止）も入れません

通信の中身と上限は 通信の仕様。

CSP（Content Security Policy）

ページに CSP を設定している場合は、MITATE の配信元のオリジン（管理画面に表示されるタグの src のオリジン）を、次の 2 つに加えてください。

ディレクティブ	理由
script-src	タグ（mitate.js）を読み込むため
connect-src	設定の取得と判定の通信のため

MITATE はページに <style> やインラインのスクリプトを足しません。プランを出す場所の見た目は、お客様の CSS で整えてください（ブロックの印）。

SPA（React・Vue など）

• タグは document で操作を受け取るので、画面の遷移のあとも読み取りを続けます。判定のたびに、そのときの location.pathname を送ります。
• 訴求を差し替えるときは、data-mitate-field を付けた要素の子を入れ替えます。フレームワークが管理している要素の子を入れ替えると、次の再描画で元に戻されたり、フレームワークがエラーを出したりします。
  • 対処 1：差し替えるブロックを、フレームワークが再描画しない場所（サーバーで描いた静的な HTML など）に置く。
  • 対処 2：data-mitate-field を付けず、mitate:change のイベント を受けて、フレームワークの側で表示を切り替える。
• 画面の遷移でブロックが作り直されたときは、次の判定で、いま出すべき訴求を出し直します。それまでは標準の表示です。

同意の管理（CMP）

訪問者の同意を得てから読み取る運用にする場合は、同意が得られたあとにタグを読み込んでください。同意が取り消されたら window.mitate.stop() を呼ぶと、そのページでの読み取りを止め、標準の表示に戻します。

対応ブラウザ

ブラウザ	版
Chrome・Edge	103 以降
Firefox	100 以降
Safari（macOS・iOS）	16 以降

これより古いブラウザでは、タグは何もしません（標準の表示のまま、何も送りません）。

読み取りの範囲を絞る

• 読ませたくない場所には data-mitate-ignore を付けます。中の操作も文字も読みません。
• 入力欄（input・textarea・select・編集できる要素）の値は、印がなくても読みません。
• ボタンやリンクの文字に個人の情報が入る場所（「山田様のマイページ」など）には、data-mitate-ignore か data-mitate-act（決まった文）を付けてください。