React መጠቅለያ

በTypeScript ኤስዲኬ ላይ አንድ አቅራቢ እና ሁለት መንጠቆዎች። በአንድ ገጽ አንድ ደንበኛ ብቻ ስለሚጭን የReact ጥብቅ ሁነታ ክስተቶችዎን አያባዛም።

የታተመበት

@prodantix/react on npm. It wraps @prodantix/sdk, so install both.

ጫን

Bash

bun add @prodantix/sdk @prodantix/react

Export	What it is
ProdantixProvider	Creates the client once per page and provides it
useProdantix	The client for the page, or null
useMessenger	A handle that opens and closes the widget, or null
prodantixConfig	The config when both key and host are present, else null
skipReason	Why this mount will send nothing, or null
resetProdantixForTest	Clears the once-per-page install, for tests

አቅራቢው

ProdantixProviderን ከሥሩ አጠገብ አንድ ጊዜ ይጫኑት። በመጀመሪያው መጫን ላይ የድር ደንበኛውን ይፈጥራል፣ ከዚያ በኋላም ያንኑ ይጠቀማል፣ ምክንያቱም ሁለተኛ መፍጠር የHistory ኤፒአይን ሁለት ጊዜ ስለሚያስተካክል እያንዳንዱን በራስ የተቀረጸ ክስተት ያባዛል።

TypeScript

import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => (
  <ProdantixProvider
    options={{
      apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
      host: 'https://eu.api.prodantix.com',
      messengerHost: 'https://eu.edge.prodantix.com',
    }}
  >
    {children}
  </ProdantixProvider>
);

መልእክተኛው የሚታየው messengerHost ሲያስተላልፉ እና ፕሮጀክቱ በኮንሶል ውስጥ አብርቶት ሲሆን ብቻ ነው። ውቅር ከሌለና ማከማቻም ከሌለ ምንም አይሣልም፣ ምክንያቱም ነባሪ ማስጀመሪያ በደንበኛ ገጽ ላይ የተቀባ ግምት ይሆናል።

የገባውን ሰው መሰየም

person ማን እንደገባ ለአቅራቢው ይነግረዋል፣ እንደ ጥሪ ሳይሆን እንደ ባህርይ ነው፣ ስለዚህ መግባትና መውጣት ወደ ደንበኛው እንዳሉት እሴቶች ይደርሳሉ። ሦስት ሁኔታዎች አሉት፣ እያንዳንዱም የተለየ ነገር ይናገራል። undefined ማለት ይህ ገጽ ገና አያውቅም ማለት ነው፣ ማረጋገጫው ገና እየተጫነ ስለሆነ፣ አቅራቢውም ምንም አያደርግም። እሴት መኖሩ ይለያል፦ አቅራቢው በመጀመሪያው እሴት ላይ identify ይጠራል፣ distinctId በተቀየረ ቁጥርም እንደገና ይጠራል፣ የSDKውን ራሱን ባህርያት ማለትም አምሳያ፣ ኢሜይል፣ ስም እና ስልክ ይዞ። null ማለት ገጹ ክፍለ ጊዜውን አማክሮ ማንም አለመኖሩን አወቀ ማለት ነው፣ አቅራቢውም ደንበኛው አሁንም የተለየ ከሆነ ብቻ እና ከሆነ ብቻ ዳግም ያስጀምረዋል፤ ይህም ስም-አልባውን መለያ ያሽከረክራል ስለዚህ በዚያ አሳሽ ላይ ቀጣዩ ጎብኚ የወጣው ሰው አይሆንም። መውጣት ጠንካራ ማዘዋወር በሆነበትና ከእሴት ወደ null የሚደረግ ሽግግር በጭራሽ በማይታይበት ቦታ መውጣትን የሚያጸና ይኸው ነው። null በጭራሽ ለመጫን መቆም የሌለበትም ለዚህ ነው፦ ገጽን የሚያድስ የገባ ሰው ማረጋገጫው ከመጫኑ በፊት ዳግም ይጀመር ነበር። ምንም ክፍለ ጊዜ የማያማክር ገጽ፣ የማረፊያ ገጽ ወይም የሰነድ ገጽ፣ undefined ያስተላልፋል፣ የጎደለ ባህርይም አስቀድሞ undefined ሆኖ ይነበባል።

TypeScript

import { ProdantixProvider } from '@prodantix/react';

export const Providers = ({ children }: { children: ReactNode }) => {
  const { session, status } = useSession();

  // undefined while auth hydrates, null once it has resolved to nobody,
  // the subject once it has resolved to someone.
  const person = status === 'loading' ? undefined : session ? { distinctId: session.sub } : null;

  return (
    <ProdantixProvider
      options={{
        apiKey: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
        host: 'https://eu.api.prodantix.com',
        person,
      }}
    >
      {children}
    </ProdantixProvider>
  );
};

መንጠቆዎቹ

useProdantix የገጹን ደንበኛ ይመልሳል፣ ወይም በአገልጋዩ ላይ፣ ውጤቱ ከመሮጡ በፊት እና ከአቅራቢው ውጭ ባዶ ይመልሳል። useMessenger መግብሩን ለመክፈትና ለመዝጋት እጀታ ይሰጣል፣ የፕሮጀክቱ ውቅር ተነቦ አብርቷል እስኪል ድረስም ባዶ ሆኖ ይቆያል።

TypeScript

import { useMessenger, useProdantix } from '@prodantix/react';

export const HelpButton = () => {
  const prodantix = useProdantix();
  const messenger = useMessenger();

  // Both are null until the provider effect has run, so neither is assumed.
  return (
    <button
      onClick={() => {
        prodantix?.capture('help.opened');
        messenger?.open();
      }}
      type="button"
    >
      Get help
    </button>
  );
};

ምንም በማይልክበት ጊዜ

አንድ መተግበሪያ Prodantix ጠፍቶም ቢሆን በተመሳሳይ ሁኔታ ይላካል፣ ስለዚህ የጠፋ ቁልፍ ወይም አስተናጋጅ ስህተት አይደለም። prodantixConfig ሁለቱም እሴቶች መኖራቸውን ይናገራል፣ skipReason ደግሞ አንድ መጫን ምንም የማይልክበትን ምክንያት በአንድ መስመር ይገልጻል፣ በዝምታ ከመመለስ ይልቅ።

TypeScript

import { prodantixConfig, skipReason } from '@prodantix/react';

const env = {
  host: process.env.NEXT_PUBLIC_PRODANTIX_HOST,
  key: process.env.NEXT_PUBLIC_PRODANTIX_KEY,
};

// null when either value is missing: the app runs with Prodantix switched off.
if (prodantixConfig(env) === null) {
  console.warn(skipReason(env, null));
}

የደንበኛ ቤተ-መጻሕፍት

የማዕቀፍ አስማሚዎች

React መጠቅለያ

የታተመበት

ጫን

አቅራቢው

የገባውን ሰው መሰየም

መንጠቆዎቹ

ምንም በማይልክበት ጊዜ