書き方
</body> の直前、または <head> に defer 付きで1行入れます。
<script src="https://cdn.sitekit.example/sitekit.js" data-site="hanaya" defer></script>これだけで次の3つが動きます。
- 流入元（UTM）の記録 — 広告などから来た人の
utm_*/gclid/fbclidをブラウザに覚えておき、フォーム送信のときに自動で添える - フォーム送信 —
data-sitekit-formを付けた<form>を、ページを移動せずに送る - GTM の読み込み —
data-gtmを書いたときだけ
属性の一覧
| 属性 | 必須 | 説明 |
|---|---|---|
data-site | 必須 | サイト ID。無いときは何もせず黙って終わる（エラーも出さない） |
data-locale | 取得する言語。省略すると <html lang>、それも無ければ ja | |
data-gtm | GTM のコンテナ ID（GTM-XXXXXXX の形）。形が違えば無視する | |
data-embed | 表示時に CMS の値を埋め込む。中継を使えないホスティング向けで、ふだんは付けない（中継とホスティング） |
- 接続先は属性で指定しません。 script 自身の
srcのオリジン（https://cdn.sitekit.example）に接続します。srcがhttp(s)でない場合（ファイルを直接開いたときなど）は何もしません integrity（SRI）は付けません。 サイトの HTML を触らずに script を更新できるようにしているためです- 1ページに script を2つ置く使い方には対応していません
流入元（UTM）の記録
広告のリンクなどから来たときの次の値を、ブラウザの localStorage に記録します。
| 記録する値 | 内容 |
|---|---|
utm_source / utm_medium / utm_campaign / utm_term / utm_content | URL の UTM パラメータ |
gclid / fbclid | Google 広告 / Meta 広告のクリック ID |
landing / referrer / at | 着地したページ・参照元・日時 |
- 「最初に来たとき（first）」と「最後に来たとき（last）」の2つを覚えます。保存期間は 90 日です
- フォームを送ると、お問い合わせと一緒に保存されます。サイト側で hidden 項目を足す必要はありません
- 1つの値が 500 文字を超える場合は切り詰めて記録します
- ブラウザが
localStorageを使わせない設定のときは記録しません（フォームの送信は動きます）
GTM の読み込み
data-gtm に書いたコンテナを読み込みます。
<script src="https://cdn.sitekit.example/sitekit.js" data-site="hanaya" data-gtm="GTM-XXXXXXX" defer></script>管理画面の「設定」でも GTM ID を入れられます。こちらは中継（Cloudflare Pages）が <head> にタグを差し込む経路で、反映は公開 JSON のキャッシュ（60秒）が切れたあとです。両方に書くと、差し込まれたタグと data-gtm のコンテナが食い違います。 中継を使うサイトでは data-gtm は書かず、管理画面で設定してください。
フォーム送信を GTM で拾う方法は フォーム にあります。
window.SiteKit
読み込み後に window.SiteKit ができます。ふだんは触らなくてかまいません。
| メンバー | 説明 |
|---|---|
SiteKit.version | ビルドのバージョン文字列 |
SiteKit.attribution() | 記録中の流入元。無ければ null |
SiteKit.bindForms() | フォームを結び付け直す。あとから JavaScript でフォームを足したときに呼ぶ |
SiteKit.refresh() | localStorage から流入元を読み直す |
キャッシュ
script（https://cdn.sitekit.example/sitekit.js）は5分キャッシュされます。不具合の修正は、サイトの HTML を触らずにおおむね5分で全訪問者へ行き渡ります。逆に、バージョンを固定する使い方には向きません。
CSP を設定している場合
script タグ（と data-gtm）だけの場合、許可するオリジンは次の2つです。
script-src 'self' https://cdn.sitekit.example https://www.googletagmanager.com;
connect-src 'self' https://cdn.sitekit.example;中継で GTM を差し込む場合は、インラインの GTM スニペットが <head> に入るため、'unsafe-inline' か nonce が要ります。'unsafe-inline' を許せないサイトでは data-gtm を使うほうが素直です。GTM が読み込むタグの分は、GTM の要件に従って別に追加してください。