Web アナリティクスをインストール

このガイドは、Glossia プロジェクトを前提としており、そのプロジェクトのアナリティクス設定にサイトドメインが構成されています。コレクションはそのドメインによって識別され、コピーする必要のあるキーやシークレットはありません。

オプション A: スクリプトタグ

このスニケットをすべてのページに追加し、理想的には <head> に追加してください：

<script defer data-domain="example.com" src="https://glossia.ai/assets/glossia-web.js"></script>

SDK は自動的に初期化され、ロード時にページビューを送信し、シングルページアプリケーションのクライアントサイドナビゲーションで以降のページビューを記録します。省略された場合、data-domain は window.location.hostname にデフォルト値となるため、シングルドメインのサイトの場合は省略できます。カスタムの収集エンドポイントを使用するには、data-endpoint="https://collect.your-host.com" を追加してください。

サイトがコンテンツセキュリティポリシーを使用している場合、script-src（またはscript-src-elem が存在する場合）およびconnect-src の両方にhttps://glossia.aiを許可してください。スクリプトは/assets/glossia-web.js から読み込まれ、同じオリジンの/v1/collect にイベントを送信します。

オプション B: npm

パッケージをインストールします：

npm install @glossia/web

アプリケーションのエントリーポイントで一度初期化します：

import glossia from "@glossia/web";

glossia.init({ endpoint: "https://glossia.ai/v1/collect" });

関連バンドル内のパッケージを使用する場合、集約エンドポイントを明示的に設定する必要があります。推測するホストされたスクリプトアドレスがないためです。

domain は window.location.hostname から推測されるため、SDK はあなたのサイトのプロジェクトの登録に対して記録されます。優先させるには、{ domain: "example.com" } を渡してオーバーライドしてください。例として、ステージングオリジンからプロダクションと同じプロジェクトにイベントを送信する場合です。

カスタムイベント、例えばサインアップを記録するには：

glossia.track("signup");

明示的な言語選択を追跡します

訪料者の選択をブラウザのプリファレンスと区別するには、言語選択機能のユーザーアクションハンドラーで SDK を呼び出し、ナビゲーションする前に実行してください：

glossia.selectLanguage("zh-Hans");

このメソッドは、glossia.init() 後のインポートされた SDK にも利用でき、ホストされたスクリプトを使用する場合は glossia グローバルにもあります。

代わりに、同じオリジンの言語切り替えリンクにアノテーションを追加してください：

<a href="/zh-hans/docs" data-glossia-language="zh-Hans">简体中文</a>

アクションごとに一度のインテグレーションを使用し、両方を使用しないこと。アノテーション済みリンクは、キーボードアクティベーションを含む本物のユーザーアクティベーションを記録します。スクリプトクリック、ダウンロード、変更されたクリック、クロスオリジン先、別のタブまたはフレームを開くリンクが無視されますが、ナビゲーションは防止されません。

SDK はすぐに language_selection イベントを送信し、以降のイベントで選択した言語（cl）を含めます。選択は現在のタブとオリジンに対して sessionStorage に保存され、別の選択が差し替えるまで続きます。ストレージが利用できない場合、のみページが読み込まれるまで続きます。リダイレクト、URL、または <html lang> への変更から選択が推測されない場合、選択は適用されません。

選択は意図を記録し、成功したナビゲーションを記録しません。ブラウザのプリファレンス、実際のページ言語、明示的な選択は別々のままです。コレクターは選択を取得します；ダッシュボードの現在のブラウザベースのギャップ計算は変更されません。

ドメインを認証します

プロジェクトの アナリティクス設定 のサイトドメインを保存します。ドメインの所有権を確認 カードはプロジェクトの正確なレコード名と値を示します。ドメインプロバイダーを使用してテキストレコードを追加します：

設定に表示のドメインとトークンを使用します。一部のプロバイダーはドメインを自動的に追加するので、この場合は名前としてのみ _glossia-verify を入力してください。レコードを公開した後、ドメインの確認 をクリックします。変更には時間がかかるため、レコードが見つからない場合はもう一度試してください。

ドメインレコードを編集できない場合、代替：本家ページのメタタグで認証する を拡大してください。生成されたタグを本家ページの <head> にコピーし、公開してください：

<meta name="glossia-site-verification" content="YOUR_VERIFICATION_TOKEN">

どちらの手順も設定済みのドメインの制御権を確認します。Glossia はそのドメインのレコードまたは本家ページを確認するため、トークンを別のウェブサイトにコピーしても所有権の検証にはなりません。トークンは公開された証拠であり、パスワードではありません。

ドメインの検証が完了すると、Glossia はあなたの追跡スニケットからイベントを記録します。スニケット自体は所有権を検証しません。設定済みドメインの変更は再確認が必要です。

動作を確認します

1. ブラウザでサイトをオープンします。
2. ネットワークタブを開放し、https://glossia.ai/v1/collect に POST リクエストが 202 Accepted を返すことを確認してください。
3. 収集と処理後、ページビューはプロジェクトのダッシュボードの 分析 ファイルの下の集約として表示されます。オーバービューページで実行される翻訳はウェブサイトトラフィックと別になります。

202 Accepted レスポンスがリクエストが集約サーバーに到達したことを確認します。不明または検証されていないドメインも受け付けますが、イベントを記録しないため、設定済みのドメインがプロジェクトのアナリティクス設定で検証されていることを確認してください。

何が収集されますか

ブラウザはページ URL、リファラー、navigator.languages、実際のページ言語（<html lang>）、提供された翻訳（hreflang リンク）、観察された明示的な言語、タイムゾーン、および画面幅、さらにタブごとのセッション ID を送信します。サーバーは国（GeoIP から）を追加し、あなたのプロジェクトのターゲット言語、提供された翻訳、および実際のページ言語に対してローカリゼーションギャップを計算します。セッション ID と明示的な選択は sessionStorage を使用して保存されます；クッキーは設定されず、指紋化もされません。