このページでは

ブラウザ統合SDK

npmv1.1.29110.0 kB gzip

AmplitudeはブラウザSDKをインストールする方法を複数用意しており、それぞれに異なるプロダクトサポートとバージョン管理オプションがあります。このガイドでは、3つの主なインストール方法を比較しています。

手動設定を省略するには、Amplitude Wizard CLI を使用します。 本ツールはコードベースを読み取り、トラッキングイベントを提案し、お客様の承認を得たうえで自動的にSDKを組み込みます。

インストール方法を選択してください

AmplitudeはブラウザSDKをインストールする方法を3つ提供しています：

メソッド概要バージョン管理最適な用途
統合SDK（npm）Amplitudeのすべての機能を備えた単一のnpmパッケージ顧客による管理再現性のあるビルドと厳格な変更管理が必要なチーム
統合スクリプト (CDN)Amplitudeの機能をロードする単一のスクリプトタグAmplitude管理型自動更新と適切なデフォルト設定による迅速なセットアップ
GTM テンプレートGoogle タグマネージャーテンプレートテンプレートのバージョン管理GTM をタグ管理に使用しているチーム

インストール方法別のプロダクトサポート

インストール方法ごとにサポートされるAmplitude製品の種類が異なります：

プロダクト統合スクリプト (CDN)統合SDK（npm）GTM テンプレート
アナリティクス (@amplitude/analytics-browser)✅ 込み✅ 込み✅ 込み
セッションリプレイ✅ 込み✅ 込み✅ オプション（チェックボックス）
ガイドとサーベイ⚠ 個別のスクリプト✅ 込み✅ オプション（チェックボックス）
ウェブ実験 (@amplitude/experiment-tag)✅ 込み❌ 含まれていません❌ 非対応
機能実験 (@amplitude/experiment-js-client)❌ 含まれていません✅ 込み❌ 非対応

Web 実験と機能実験の比較

  • ウェブ実験：ウェブページ上でノーコードのA/Bテストを行うためにビジュアル編集を使用します。 Unified Scriptにはこれが自動的に含まれています。
  • 機能実験: Experiment JavaScript SDK でコードベースの機能フラグを使用します。 Unified npm パッケージにはこれが含まれています。

統合SDK（npm）

Unified SDKは単一のnpmパッケージ (@amplitude/unified) を提供しており、これにより、単一のAPIを通じてアナリティクス、セッションリプレイ、機能実験、ガイドとサーベイにアクセスできます。ITを npm または yarn を使用してインストールし、バージョンを package.json内で制御します。

主な特徴：

  • バージョンを完全に制御できる、お客様によるパッケージインストール管理。
  • 機能実験（コードベースの機能フラグ）が含まれていますが、ウェブ実験（ビジュアルエディタ）は含まれていません。
  • アップグレードするには、依存関係ファイル内のパッケージバージョンを更新してください。
  • 再現可能なビルドと厳格な変更管理を必要とするチームに最適です。

製品の個別インストール

バンドルサイズが気になり、特定の製品のみが必要な場合は、それらを個別にインストールしてください。

Unified SDK をインストールする

依存関係を npm または yarn でインストールしてください。

bash
npm install @amplitude/unified

Unified SDKの初期化

Unified SDKは、Amplitudeのすべての機能を初期化する単一の初期化メソッドを提供します。

typescript
import { initAll } from "@amplitude/unified";
initAll("AMPLITUDE_API_KEY");

SDK機能にアクセスする

Unified SDKは、単一のインターフェイスを通じてAmplitudeのすべての機能にアクセスできるようにします。

機能ドキュメント

各製品の機能と API の詳細については、次のドキュメントを参照してください。

typescript
import { track, identify, experiment, sessionReplay } from "@amplitude/unified";
// Track events
track("Button Clicked", { buttonName: "Sign Up" });
// Identify users
identify(new Identify().set("userType", "premium"));
// Access Experiment features
const variant = await experiment.fetch("experiment-key");
// Access Session Replay features
sessionReplay.flush();

設定

Unified SDKは、Amplitudeのすべての機能の設定オプションをサポートしています。 いくつかの共通オプションを共有しながら、各プロダクトを個別に設定します。

typescript
import { initAll } from "@amplitude/unified";
initAll("AMPLITUDE_API_KEY", {
  // Shared options for all SDKs (optional)
  serverZone: "US", // or 'EU'
  instanceName: "my-instance",
  // Analytics options
  analytics: {
    // Analytics configuration options
  },
  // Session Replay options
  sessionReplay: {
    // Session Replay configuration options
    sampleRate: 1, // To enable session replay
  },
  // Experiment options
  experiment: {
    // Experiment configuration options
  },
  // Guides and Surveys options
  engagement: {
    // Guides and Surveys configuration options
  },
});

共有オプション

名前タイプデフォルト概要
serverZone'US'または'EU''US'すべてのSDKに使用するサーバーゾーン。
instanceNamestring$default_instanceこのSDKインスタンスに対する一意の名前です。

アナリティクスオプション

Unified Browser SDKは@amplitude/analytics-browserのすべてのオプションをサポートしています。 詳細については、アナリティクス Browser SDKのドキュメントを参照してください。

セッションリプレイオプション

Unified Browser SDKは@amplitude/plugin-session-replay-browserのすべてのオプションをサポートしています。 詳細については、セッションリプレイ プラグインのドキュメントを参照してください。 セッションリプレイを有効にするには、config.sessionReplay.sampleRateを 0 以外の値に設定します。

サンプルレートは、Amplitudeがセッションリプレイをキャプチャするレートを制御します。 たとえば、config.sessionReplay.sampleRateを0.5に設定した場合、セッションリプレイは全セッションの約半分をキャプチャします。

実験オプション

Unified Browser SDKは@amplitude/plugin-experiment-browserのすべてのオプションをサポートしています。 詳細については、実験のドキュメントを参照してください。

ガイドとサーベイのオプション

Unified Browser SDKは、すべてのガイドとサーベイオプションをサポートしています。エンゲージメントプラグインはデフォルトで初期化されます。

ガイドとサーベイの初期化をオプトアウトする

ガイドとサーベイはデフォルトで@amplitude/unifiedで初期化されます。ガイドとサーベイを使用しておらず、エンゲージメントSDKがロードされないようにしたい場合は、engagementブロック内でskip: trueを渡してください。これにより、ガイドとサーベイを使用していないプロパティに amplitude.engagement.*localStorage エントリが作成されることがなくなります。

要件: @amplitude/engagement-browser1.0.10 以降が必要です。

typescript
initAll("AMPLITUDE_API_KEY", {
  // ... other options
  engagement: {
    skip: true,
  },
});

skip: trueの時点で、エンゲージメントプラグインは、ストレージやネットワークの設定、あるいはガイドとサーベイに関連する副作用を一切引き起こすことなく、即座に処理を終了します。

ガイドとサーベイを後で有効にするには、skip: trueオプションを削除（またはfalseに設定）してから、再度初期化してください。

統合スクリプト(CDN)

Unified Scriptは、AmplitudeのCDNからAmplitudeブラウザ機能をロードする単一のスクリプトタグです。 Amplitudeは、基盤となるSDKのバージョンをリモートで管理し、適切なデフォルト設定とオプションのリモートまたは手動設定を備えた「1行のコード」での体験を提供します。

主な特徴：

  • AmplitudeはSDKのバージョンを管理し、カスタマーのリリースを必要とせずに、バグのパッチを適用したりパフォーマンスを中央で向上させたりすることができます。
  • ウェブ実験（ビジュアルエディタ）をデフォルトで含んでいます。
  • セッションリプレイとウェブ実験は、デフォルト設定で自動的に有効になります。
  • ガイドとサーベイではサイズの問題があるため、別のスクリプトが必要です。

統合スクリプトをインストールする

次のスクリプトタグをサイトの<head>に追加してください：

html
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>

AMPLITUDE_API_KEYをプロジェクトのAPIキーに置き換えます。

統合スクリプトの初期化

Unified Scriptは、デフォルトでセッションリプレイとウェブ実験を有効にします。 手動設定の場合：

html
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
  window.amplitude.init("AMPLITUDE_API_KEY", {
    defaultTracking: true,
    autocapture: true,
    fetchRemoteConfig: true,
  });
  // Enable Session Replay with custom sample rate
  window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
</script>

ガイドとサーベイを統合スクリプトに追加する

サイズの問題のため、ガイドとサーベイには別のスクリプトが必要です。統合スクリプトの後にITを追加します。

html
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.engagement.js"></script>
<script>
  window.amplitude.add(window.engagement.plugin());
  window.amplitude.init("AMPLITUDE_API_KEY", {
    fetchRemoteConfig: true,
    autocapture: true,
  });
</script>

その他の設定オプションについては、ガイドとサーベイ SDK のドキュメントを参照してください。

Googleタグマネージャー

Amplitude GTMテンプレートは、アナリティクス Browser 2.0 SDKを直接ラップしています（@amplitude/analytics-browser）。このツールは Unified SDK や Unified Script を使用しません。

主な特徴：

  • テンプレートのバージョン管理はGTMで行われます。
  • アナリティクス、セッションリプレイ、ガイドとサーベイをサポートしています。
  • ウェブ実験や機能実験はサポートしていません。
  • セッションリプレイとガイドとサーベイはデフォルトでは無効になっており、チェックボックスを手動で選択する必要があります。

GTM でセッションリプレイとガイドとサーベイを有効にする

これらの機能を有効にするには:

  1. GTMでAmplitudeタグに移動します。
  2. タグ設定で、［セッションリプレイ］ チェックボックスを選択すると、セッションリプレイが有効になります。
  3. **「ガイドとサーベイ」**チェックボックスを選択すると、製品内メッセージングを有効にできます。
  4. 変更内容を保存して公開します。

詳細な設定オプションについては、Google タグマネージャーのドキュメントを参照してください。

これは役に立ちましたか？