TypeScript SDK

አንድ ጥቅል ከስድስት መግቢያ ነጥቦች ጋር። ከአሠራርዎ ጋር የሚስማማውን ያስመጡ፣ የዛፍ-መንቀጥቀጥ ግንባታውም ቀሪውን ከጥቅልዎ ውጭ ይተዋል።

የታተመበት

@prodantix/sdk on npm.

ጫን

bun add @prodantix/sdk

የመግቢያ ነጥቦች

እያንዳንዱ ንዑስ መንገድ የራሱን የESM እና CommonJS ግንባታ ከራሱ ዓይነቶች ጋር ያቀርባል። ሥሩ ከአሠራር ነጻ ነው፣ ሌሎቹ ደግሞ አንድ አሠራር የሚፈልገውን ይጨምራሉ።

@prodantix/sdk

ደንበኛው፣ የባንዲራ ገማቹ፣ እና የማከማቻና የመጓጓዣ በይነገጾች። እዚህ ምንም ነገር DOMን አይነካም፣ ስለዚህ የራስዎን ማከማቻ፣ መጓጓዣ፣ ሰዓት ወይም መለያ ፋብሪካ አቅርበው በየትም ማሄድ ይችላሉ።

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

በዚያው ደንበኛ ላይ የአሳሽ ዝርጋታ፦ በአካባቢ ማከማቻ ውስጥ መቆየት፣ ገጹ ሲደበቅ በምልክት ማድረሻ ማድረስ፣ እና የገጽ እይታ እንዲሁም የጠቅታ ራስ-ቀረጻ። የክፍለ ጊዜ ድግግሞሽ የድግግሞሽ አስተናጋጅ እስኪሰጡት ድረስ ጠፍቶ ይቆያል።

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

const prodantix = createWebClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  flagsHost: 'https://api.prodantix.com',
  cookieDomain: 'example.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>'] })) {
  // ...
}

በድር ላይ የጎብኚው ስም-አልባ መለያ እና ክፍለ ጊዜ በእርስዎ ሊመዘገብ በሚችል ጎራ ላይ በአንድ የመጀመሪያ ወገን ኩኪ ውስጥ ይኖራሉ፣ ስለዚህ xyz.com፣ app.xyz.com እና console.xyz.com አንድ ሰው ያያሉ፦ የግብይት ጉብኝቱ፣ ምዝገባው እና በመተግበሪያው ውስጥ ያለው የመጀመሪያ ክፍለ ጊዜ መተግበሪያው እነሱን ከለየ በኋላ በተመሳሳይ የጊዜ መስመር ላይ ያርፋሉ። የተለየው መለያ በአካባቢ ማከማቻ ውስጥ በእያንዳንዱ መነሻ ይቆያል እና ወደ ኩኪው በጭራሽ አይገባም፣ ምክንያቱም በጎራው ስር ያለ እያንዳንዱ አስተናጋጅ ሊያነበው ይችላል። ጎራው አሳሹን በመጠየቅ ይገኛል፣ ወይም በ cookieDomain ይቀመጣል፤ ንዑስ ጎራዎቹ ለተለያዩ ተከራዮች የሆኑ ጣቢያ ወደ ራሱ አስተናጋጅ ማቀናበር አለበት። ምንም ኩኪ ላለመጻፍ sharedStorage ያስተላልፉ፣ ለምሳሌ ፈቃድ እስኪሰጥ ድረስ፣ እና ኩኪዎች ሲከለከሉ የአካባቢ ማከማቻ መጠባበቂያ ሆኖ ይቆያል። የክፍለ ጊዜ መለያ በእያንዳንዱ ጉብኝት ይፈጠራል፣ ከሠላሳ ደቂቃ እረፍት ወይም ከሃያ አራት ሰዓት በኋላ ይቀየራል፣ በእያንዳንዱ ክስተት ላይ ይታተማል እና ከክፍለ ጊዜ ድግግሞሽ ጋር ይጋራል።

አንድ ኩኪ ሊመዘገብ የሚችል ጎራን ማቋረጥ አይችልም፣ ስለዚህ ከአንዱ ጣቢያ ወደ ሌላው አገናኝ የተከተለ ጎብኚ ሁለት ጎብኚዎች ይሆን ነበር። linkedDomains ያስተላልፉ፣ በነባሪ ባዶ ነው፣ እና ደንበኛው ወደ እነዚያ ጎራዎች የሚወጡ አገናኞችን በ click እና auxclick ላይ በ _pdx መለኪያ ያስውባቸዋል፤ መለኪያው ሦስት ነገሮች ይይዛል፦ ስም-አልባ መለያውን፣ የክፍለ ጊዜውን መለያ እና ክፍለ ጊዜው የተጀመረበትን ቅጽበት፣ ስለዚህ የሠላሳ ደቂቃው መስኮት እና የሃያ አራት ሰዓቱ ጣሪያ ከዝላዩ በኋላ ይቀጥላሉ። የሚጓዘው ስም-አልባው መለያ ብቻ ነው፣ የተለየ መለያ በጭራሽ አይደለም፣ ምክንያቱም መድረሻው ሰውየውን ራሱ ይለያል። ወደ ተመሳሳይ ሊመዘገብ የሚችል ጎራ የሚወስድ አገናኝ፣ አስቀድሞ _pdx የያዘ አገናኝ፣ እንዲሁም mailto፣ tel፣ javascript እና የhash አገናኞች ሁሉ ሳይነኩ ይቀራሉ። ሲደርሱ createWebClient ማንነት ከመገንባቱ በፊት _pdx ያነባል፣ የተሸከመውን መለያ እና ክፍለ ጊዜ ወደ የጋራ ማከማቻው ይጽፋል፣ እና መለኪያውን በ history.replaceState ያስወግዳል፤ ስለዚህ በ $current_url ውስጥ አይታይም ወደፊትም አይጓዝም። ሦስቱ ክፍሎቹ የማይነበቡ መለኪያ ችላ ይባላል፣ አድራሻውም እንደነበረ ይቀራል። ይህ አስተናጋጅ አስቀድሞ የተለየ ስም-አልባ መለያ ይዞ ከነበረ ደንበኛው $create_alias ይልካል፣ ስለዚህ ቀደም ሲል የመዘገበው ወደ ተሸከመው መለያ ይታጠፋል፤ አስቀድሞ ሰው የለየ አስተናጋጅም ያንን ሰው ይይዛል፦ የተሸከመው መለያ ስም-አልባ መለያቸው ይሆናል፣ የተለየ መለያቸው በጭራሽ አይሆንም።

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

const prodantix = createWebClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  linkedDomains: ['example.com', 'example-app.com'],
});

// A link to example-app.com now leaves as
// https://example-app.com/pricing?_pdx=<anonymousId>~<sessionId>~<startedAt>
// and the arriving page adopts it before it builds an identity of its own.

// The visitor's answer, from your own consent banner.
prodantix.setConsent({ identityLink: false });
prodantix.consent(); // { identityLink: false }

ስለዚያ መቀላቀል የጎብኚው ራሱ መልስ በተመሳሳይ የጋራ ማከማቻ ውስጥ፣ በ pdx..consent ስር ይጓዛል፣ ስለዚህ እያንዳንዱ ንዑስ ጎራ እና ኩኪውን የሚያነብ አገልጋይ አንድ መልስ ያያሉ። በ setConsent({ identityLink: false }) ይመዝግቡት፣ በ consent() መልሰው ያንብቡት፣ እና መተግበሪያዎ መልሱን አስቀድሞ ሲይዝ በ consent አማራጭ ይዘሩት፦ የፈቃድ ማሳወቂያው የእርስዎ ነው የሚገነባው፣ prodantix ደግሞ የሰበሰበውን ያከብራል። identityLink false በሆነ ጊዜ፣ identify ከሰውየው ጋር የሚቀላቀል ስም-አልባ መለያ አይልክም፣ ወደ ተያያዘ ጎራ የሚወስድ አገናኝም ሳይስተካከል ይቀራል፣ ምክንያቱም መለያውን ማሻገር ያው መቀላቀል በሌላ መንገድ ነው። ያልተቀመጠ ወይም true ሁለቱንም ይፈቅዳል፣ ነገር ግን በኮንሶሉ ውስጥ ላለው የፕሮጀክቱ ራሱ ቅንብር ተገዢ ሆኖ፤ ያንን ቅንብር አሳሹ የሚልከው ሳይሆን የሁኔታ ሠራተኛው ያስፈጽማል። መልሱን መቀየር በሚቀጥለው identify እና በሚቀጥለው ጠቅታ ላይ ተግባራዊ ይሆናል፤ አስቀድሞ የተቀላቀለ ምንም ነገር አይለያይም።

@prodantix/sdk/node

ተመሳሳዩ ደንበኛ በአገልጋይ ነባሪዎች። ክስተቶች ተከማችተው በጀርባ ይላካሉ፣ ስለዚህ ሂደቱ ከመውጣቱ በፊት shutdown ይጥሩ፣ አለበለዚያ የመጨረሻው ጥቅል ፈጽሞ አይወጣም።

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();

በአገልጋይ ማዘዋወር የሚጠናቀቅ መግቢያ ምንም ገጽ አያሳይም፣ ስለዚህ የአሳሹ ራሱ identify እዚያ በጭራሽ አይሠራም። readSharedIdentity(cookieHeader, apiKey) የድር ደንበኛው የጻፈውን ኩኪ አንብቦ ስም-አልባውን መለያ፣ ያለበትን ክፍለ ጊዜ እና የጎብኚውን ፈቃድ ይመልሳል፣ ወይም ኩኪው ከሌለ ወይም የዚህ SDK ካልሆነ null ይመልሳል። ከዚያ link(distinctId, anonymousId, traits) አሳሹ ይልከው የነበረውን አንድ $identify ለተሰጡት መለያዎች ይልካል፣ የዚህን ደንበኛ ራሱን ማንነት ሳይነካ። የBomdisoft መግቢያ ሁለቱንም በመግቢያ ማጠናቀቂያ ላይ ይጠራል፣ ስምንቱም የመግቢያ ቦታዎቹ አስቀድሞ በሚጠሩት አንድ ተግባር ውስጥ፦ የሰውየው subject በአገልጋዩ በኩል መጀመሪያ የሚታወቅበት እና ኩኪው ገና በጥያቄው ላይ ያለበት ቦታ ያ ነው። ከእነዚያ ቦታዎች ስድስቱ የጥያቄ ነገር የሌላቸው የአገልጋይ ድርጊቶች ናቸው፣ ተግባሩም ጥያቄ ሳይሆን የኩኪ ራስጌ ሕብረቁምፊ የሚወስደው ለዚህ ነው። መልሶ የተነበበው መልስ identityLink false ሲሆን link ይዝለሉ።

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

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

// At sign-in completion, where the person is known and the browser's
// cookie is still on the request.
export const completeSignIn = (sub: string, cookieHeader: string): void => {
  const shared = readSharedIdentity(cookieHeader, PRODANTIX_PUBLIC_KEY);
  if (shared !== null && shared.consent?.identityLink !== false) {
    prodantix.link(sub, shared.anonymousId);
  }
};

@prodantix/sdk/csp

አንድ መተግበሪያ Prodantixን ለመድረስ የሚያስፈልጉት የይዘት ደህንነት ፖሊሲ ምንጮች። ከReact ወይም ከአሳሽ ምንም አያስመጣም፣ ስለዚህ የግንባታ ውቅር ፋይል በቀጥታ ሊያነበው ይችላል።

import { prodantixConnectSrc, prodantixImgSrc, 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)}`,
  `img-src ${prodantixImgSrc(hosts, ["'self'", 'data:'])}`,
].join('; ');

የድጋፍ መግብሩ የቡድንዎን ፎቶዎች ከedge ያሳያል፤ ጎብኚዎች የሚልኳቸውን ፋይሎች ደግሞ ከblob: አድራሻዎች ይስላል። ስለዚህ የፖሊሲው img-src ሁለቱንም ይፈልጋል። prodantixImgSrc እነዚህን አስቀድመው በሚፈቅዷቸው የምስል ምንጮች ላይ ይጨምራል። ያለነሱ አሳሹ እነዚያን ምስሎች ያግዳል፣ ይህንንም የሚናገረው በራሱ ኮንሶል ውስጥ ብቻ ነው።

@prodantix/sdk/chat

የድጋፍ መግብር። ይጫኑት እና የሚከፍት፣ የሚዘጋ፣ የሚያጠፋ እና የሚለይ እጀታ ያገኛሉ። በተዘጋ የጥላ ሥር ውስጥ ስለሚሣል የአስተናጋጁ ገጽ ቅጦች ፈጽሞ አይደርሱበትም።

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());

እያንዳንዱ የጎብኚ መልእክት የተጻፈበትን ቦታ ይይዛል። ፓነሉ በሚላክበት ቅጽበት location እና document.title ያነብና host፣ path እና title ይልካል፤ path ማለት የመንገዱ ስም ብቻ ነው፦ በጭራሽ ጥያቄው አይደለም፣ በጭራሽ ቁርጥራጩም አይደለም፣ ምክንያቱም የይለፍ ቃል ዳግም ማስጀመሪያ አገናኝ፣ የአስማት አገናኝ ወይም የክፍያ መመለሻ ማስመሰያውን እዚያ ይይዛል፣ የወኪልም መልእክት ሳጥን ለዚያ ቦታ አይደለም። ፓነሉ ከዚህ ምንም አይስልም፣ ስለዚህ የጎብኚው ውይይት የራሱ ቃላት ብቻ ሆኖ ይቀራል፤ የጠርዙ መልስ ወደ SDK ተመልሶም ይህን አይይዝም፣ ስለዚህ የራሱን ውይይት የሚያነብ ገጽ ኮንሶሉ የሚያየውን ማየት አይችልም። የሚታየው በመልእክት ሳጥኑ ውስጥ ነው፣ ከገባ ተራ በታች እንደ ደብዛዛ መስመር።

@prodantix/sdk/messenger

ከመግብሩ ጀርባ ያለው የቅንብር አንባቢ፦ የአንድ ፕሮጀክት የመልእክተኛ ውቅር ያመጣል፣ ያከማቻል፣ እና ፕሮጀክቱ መልእክተኛውን አብርቶት እንደሆነ ይነግርዎታል። በራሱ የሚሠራው የቁራጭ ግንባታ ለብቻው ይገነባል፣ በዚህ ንዑስ መንገድም አይደረስም።

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
}