Zum Hauptinhalt springen

TypeScript-SDK

Ein Paket mit sechs Einstiegspunkten. Importieren Sie den, der zu Ihrer Laufzeit passt, und der Tree-Shaking-Build lässt den Rest aus Ihrem Bundle.

Wo es veröffentlicht ist

@prodantix/sdk on npm.

Installation

Bash
bun add @prodantix/sdk

Einstiegspunkte

Jeder Unterpfad liefert seinen eigenen ESM- und CommonJS-Build mit eigenen Typen. Die Wurzel ist laufzeitunabhängig, die übrigen ergänzen, was eine bestimmte Laufzeit braucht.

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

Der Client, der Flag-Auswerter sowie die Speicher- und Transportschnittstellen. Nichts davon fasst das DOM an, Sie können also eigenen Speicher, Transport, eine eigene Uhr oder ID-Fabrik übergeben und es überall ausführen.

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

Browser-Verdrahtung über demselben Client: Persistenz im lokalen Speicher, Zustellung per Beacon, wenn die Seite ausgeblendet wird, sowie Autocapture von Seitenaufrufen und Klicks. Session Replay bleibt aus, bis Sie einen Replay-Host angeben.

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

Derselbe Client mit Server-Voreinstellungen. Ereignisse werden gepuffert und im Hintergrund gesendet, rufen Sie also shutdown auf, bevor der Prozess endet, sonst geht der letzte Stapel nie hinaus.

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

Die Content-Security-Policy-Quellen, die eine App braucht, um Prodantix zu erreichen. Es importiert nichts aus React oder dem Browser, eine Build-Konfigurationsdatei kann es also direkt lesen.

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

Das Support-Widget. Hängen Sie es ein, und Sie erhalten einen Handle zum Öffnen, Schließen, Zerstören und Identifizieren. Es rendert in einer geschlossenen Shadow Root, die Stile der Gastseite erreichen es also nie.

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

Der Einstellungsleser hinter dem Widget: Er holt die Messenger-Konfiguration eines Projekts, legt sie im Cache ab und meldet, ob das Projekt den Messenger aktiviert hat. Das selbstausführende Snippet wird separat gebaut und ist über diesen Unterpfad nicht erreichbar.

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
}