# script タグ

> 1行の script で動くもの（流入元の記録・フォーム送信・GTM）と、属性の一覧。

URL: https://sitekit.example/docs/script

## 書き方

`</body>` の直前、または `<head>` に `defer` 付きで1行入れます。

```html
<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 の値を埋め込む。中継を使えないホスティング向けで、**ふだんは付けない**（[中継とホスティング](https://sitekit.example/docs/hosting)） |

- **接続先は属性で指定しません。** 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` に書いたコンテナを読み込みます。

```html
<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 で拾う方法は [フォーム](https://sitekit.example/docs/forms#送信を-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つです。

```text
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 の要件に従って別に追加してください。