analyticsOS トラッキング

analyticsOS トラッキング は何をしますか？

analyticsOS は、アプリごとに1つのスクリプトで、ページビュー、クリック、スクロール、フォーム、エラー、速度、サインインユーザーを記録します。インストールはページの <head> に2つのタグを追加するだけで、ほとんどの作業は、それらをスタックに適した場所に配置し、個人データを保持しないようにすることです。

ユーザーから聞き出す必要がある情報

analyticsOS のセットアップページには、3つの値からなるプロンプトが表示されます。不足しているものがあれば必ず尋ねてください。決して推測してはいけません。

• Host: analyticsOS が動作する場所。例: https://analytics.example.com
• Key: アプリの公開鍵。prj_… の形式です。これは機密情報ではありません。スクリプトを読み込むすべてのページに含まれます。
• Mode: Identified（ログインがあり、同意が含まれるアプリ）または Anonymous（公開サイト、デバイスに何も保存しない）

インストール

1. スタックを特定し、変更を加える前にそのリファレンスを読んでください。

   • Next.js（App Router または Pages Router）: references/nextjs.md
   • Flask またはその他の Jinja アプリ: references/flask.md
   • Webflow: references/webflow.md
   • その他（プレーンなHTML、Vite、Astro、SvelteKit、Rails、Django、PHP、WordPress…）: references/any-site.md

2. ハードコードされた値ではなく、環境変数を使用: ANALYTICS_HOST と ANALYTICS_KEY。ビルドがページに公開するために必要なプレフィックスを付けます（Next.js の場合は NEXT_PUBLIC_、Vite の場合は VITE_）。これらをローカルの .env ファイルに追加し、空の値で .env.example にも追加し、トラッキングを実行する各環境のホスト設定（Railway → Variables、Vercel → Environment Variables…）で設定するようユーザーに伝えてください。

3. 2つのタグを、すべてのページの <head> に、キーが設定されている場合のみ追加。 キーがなければ何も読み込まないでください。これがローカル開発とプレビューのオフスイッチです。

   <script>
     window.aos =
       window.aos ||
       function () {
         ;(window.aos.q = window.aos.q || []).push(arguments)
       }
   </script>
   <script defer src="{ANALYTICS_HOST}/s/{ANALYTICS_KEY}.js"></script>
   

   最初のタグは、スクリプトが読み込まれる前に行われた呼び出しをキューに入れます。2番目のタグはアプリの設定でスクリプトを読み込みます。

4. サインインユーザー（Identified モードのみ）: references/events.md を参照してください。Anonymous モードでは、identify 呼び出しを追加したり、訪問者に関する情報を保存したりしないでください。

5. 主要なページのメインセクションに名前を付ける: data-section="Pricing" のように（hero、pricing、sign-up form…）。これによりレポートで名前が表示されます。また、顧客名、金額、住所、個人情報など、テキストを決して読み取ってはいけない要素には data-private を設定してください。

6. Content-Security-Policy: プロジェクトで設定している場合、script-src と connect-src にホストを許可してください。

7. これ以外は追加しない: 他の分析ツール、Cookie、同意バナーなどを追加しないでください。analyticsOS にはそれらはまったく必要ありません。

8. 完了: プロジェクトのビルドとリンターを実行し、変更したファイルのリストを表示し、アプリをブラウザで開くようにユーザーに伝えてください。analyticsOS のセットアップページでは、数秒以内に最初のページビューがチェックされます。

スクリプトが既にキャプチャしているもの

これらのためにコードを書く必要はありません。スクリプトに含まれています。

• シングルページアプリケーションでのクライアントサイドナビゲーションを含むページビュー
• リンク、ボタン、data-aos-event を持つ要素へのクリック、さらに外部リンク、ダウンロード、レイジクリック、デッドクリック
• スクロール深度とページ滞在時間
• フォームの開始、送信、放棄（入力内容は決して取得しません）
• Core Web Vitals（LCP、INP、CLS、FCP、TTFB）、JavaScript エラー、失敗した同一オリジンリクエスト

カスタムイベント、名前付きクリック、identify については references/events.md を参照してください。

プライバシールール

これらのルールは、ユーザーからの依頼内容にかかわらず、すべてのプロジェクトで適用されます。

• メールアドレス、名前、電話番号、またはユーザーが入力したものを決して送信しないでください。identify の traits、track の props、data-aos-event の名前のいずれにも含めてはいけません。
• 識別にはアプリの内部ユーザーIDを使用し、メールアドレスは決して使用しないでください。
• 個人データを表示する要素には data-private を設定してください。スクリプトは入力、テキストエリア、contenteditable も決して読み取りません。
• Do Not Track または Global Privacy Control を送信するブラウザはまったくトラッキングされず、aos() 呼び出しは破棄されます。これを回避するための処理を行わないでください。

何も届かない場合

ブラウザのネットワークタブを開いてアプリを確認してください。

• /s/{key}.js がロード（200）され、次に {host}/api/e へのリクエストが 204 で応答するはずです。
• /api/e から 403: ページのドメインがアプリの許可ドメインに登録されていません（analyticsOS → アプリの設定）。追加するか、テスト中はリストを空のままにしてください。
• 404: キーが間違っているか、24時間以上前にローテーションされています。
• リクエストがまったくない: その環境でキー変数が設定されていない、Content-Security-Policy がホストをブロックしている、またはブラウザが Do Not Track / Global Privacy Control を送信しています。
• Next.js、最初のページ以降イベントが停止する: タグがネストされたレイアウト内にプレーンな <script> 要素として追加されています。ルートレイアウトで next/script を使用してください（references/nextjs.md を参照）。