メインコンテンツへスキップ

クライアントライブラリ

パッケージTypeScript SDKDart SDKPython SDK

フレームワークアダプター

React ラッパーFlutter ラッパー

TypeScript SDK

一つのパッケージに六つのエントリポイント。実行環境に合うものをインポートすれば、ツリーシェイキングされたビルドが残りをバンドルから外します。

公開先

@prodantix/sdk on npm.

インストール

Bash
bun add @prodantix/sdk

エントリポイント

サブパスごとに ESM と CommonJS のビルドと型定義が付属します。ルートは実行環境に依存せず、ほかは特定の実行環境に必要なものを足します。

SubpathWhat it exports
@prodantix/sdkProdantixClient, createClient, evaluateFlag, FlagsClient, MessagesClient
@prodantix/sdk/webcreateWebClient, installAutocapture, installSessionReplay, WebTransport
@prodantix/sdk/nodecreateNodeClient
@prodantix/sdk/cspprodantixConnectSrc, prodantixScriptSrc
@prodantix/sdk/chatmountChat, ChatClient, ChatPanel, resolveAppearance
@prodantix/sdk/messengerfetchMessengerConfig, cachedMessengerConfig, MESSENGER_CACHE_KEY

@prodantix/sdk

クライアント、フラグ評価器、ストレージとトランスポートのインターフェース。ここには DOM に触れるものがないため、独自のストレージ、トランスポート、時計、id ファクトリを渡してどこでも動かせます。

TypeScript
import { createClient, MemoryStorage } from '@prodantix/sdk';

const prodantix = createClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  storage: new MemoryStorage(),
});

prodantix.capture('order.completed', { properties: { amount: 4200, currency: 'XAF' } });
await prodantix.flush();

@prodantix/sdk/web

同じクライアントの上に載るブラウザ配線です。ローカルストレージへの保存、ページが隠れたときのビーコン送信、ページビューとクリックの自動取得。セッションリプレイはリプレイホストを渡すまで無効のままです。

TypeScript
import { createWebClient } from '@prodantix/sdk/web';

const prodantix = createWebClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  flagsHost: 'https://api.prodantix.com',
  autocaptureOptions: { clicks: true, pageviews: true },
});

prodantix.identify('user-42', { set: { plan: 'pro' } });

if (await prodantix.isFeatureEnabled('new-checkout')) {
  // ...
}

// Every per-flag read records one $feature_flag_called exposure.
const variant = await prodantix.getVariant('new-checkout');
if (variant?.key === 'treatment') {
  // ...
}

// A flag targeting a cohort reads this user's memberships from the store;
// pass them yourself to skip the lookup.
if (await prodantix.isFeatureEnabledLocal('members', { cohorts: ['<cohort id>'] })) {
  // ...
}

@prodantix/sdk/node

サーバー向け既定値を備えた同じクライアントです。イベントはバッファに溜められ、バックグラウンドで送信されるため、プロセス終了前に shutdown を呼ばないと最後のバッチは出ていきません。

TypeScript
import { createNodeClient } from '@prodantix/sdk/node';

// A node client streams flag changes over Socket.IO by default and refetches
// the snapshot on push; streamFlags: false leaves only the 30s poll.
const prodantix = createNodeClient({
  apiKey: process.env.PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  streamFlags: true,
});

prodantix.capture('job.completed', { properties: { queue: 'emails' } });
await prodantix.shutdown();

@prodantix/sdk/csp

アプリが Prodantix に到達するために必要なコンテンツセキュリティポリシーのソースです。React からもブラウザからも何も読み込まないため、ビルド設定ファイルが直接読み取れます。

TypeScript
import { prodantixConnectSrc, prodantixScriptSrc } from '@prodantix/sdk/csp';

const hosts = {
  ingest: 'https://eu.api.prodantix.com',
  edge: 'https://eu.edge.prodantix.com',
  replay: 'https://eu.replay.prodantix.com',
};

const policy = [
  `connect-src ${prodantixConnectSrc(hosts)}`,
  `script-src ${prodantixScriptSrc(hosts)}`,
].join('; ');

@prodantix/sdk/chat

サポートウィジェットです。マウントすると、開く、閉じる、破棄する、利用者を名乗らせる操作を持つハンドルが返ります。閉じたシャドウルート内に描画されるため、ホストページのスタイルが届くことはありません。

TypeScript
import { mountChat } from '@prodantix/sdk/chat';

const messenger = mountChat({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
  distinctId: prodantix.distinctId,
});

document.querySelector('#help')?.addEventListener('click', () => messenger.open());

@prodantix/sdk/messenger

ウィジェットの背後にある設定リーダーです。プロジェクトのメッセンジャー設定を取得してキャッシュし、そのプロジェクトでメッセンジャーが有効かどうかを伝えます。自己実行型のスニペットは別途ビルドされ、このサブパスからは到達できません。

TypeScript
import { fetchMessengerConfig } from '@prodantix/sdk/messenger';

const config = await fetchMessengerConfig({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
});

if (config?.enabled) {
  // the project has the messenger switched on
}