ወደ ዋናው ይዘት ዝለል

የፍሬምወርክ ውህደቶች

SDKው በየፍሬምወርኩ የተለየ ንብርብር አይፈልግም፦ አውቶካፕቸር የHistory APIን ስለሚጠቀም የመንገድ ለውጦች በማንኛውም ራውተር ስር ይመዘገባሉ። ለገጹ አንድ ደንበኛ ይፍጠሩ እና ፍሬምወርክዎ ሌላውን ነገር እንደሚያጋራ ያጋሩት። በአገልጋይ ላይም ይሳላሉ? ከታች ያሉት ቅንጣቢዎች እንደሚያደርጉት ደንበኛውን በአሳሹ ውስጥ ብቻ ይፍጠሩ።

በእነዚህ ቅንጣቢዎች ውስጥ ያለው ቁልፍ ከኮንሶሉ ይመጣል፦ የAPI ቁልፍ ያግኙ

At a glance

Route tracking
None needed: autocapture patches the History API, every router is covered
Pattern
One createWebClient per page, shared via your framework
React
@prodantix/react, the one lifecycle that needs an adapter

React

React ብቸኛው ልዩ ሁኔታ ነው፦ የእሱ የህይወት ዑደት የተለየውን አስማሚ ይፈልጋል፣ ደንበኛውን አንድ ጊዜ የሚጭኑ provider እና hook፣ ለStrictMode ደህንነታቸው የተጠበቀ።

Bash
bun add @prodantix/sdk @prodantix/react

Vue

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

export const prodantixPlugin = {
  install(app, options) {
    const client = createWebClient(options);
    app.provide('prodantix', client);
  },
};

// main.js (in a Nuxt app: a .client.js plugin)
app.use(prodantixPlugin, {
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  flagsHost: 'https://api.prodantix.com',
});

// any component
import { inject } from 'vue';
const prodantix = inject('prodantix');
prodantix.capture('order.completed');

Svelte

JavaScript
// $lib/prodantix.js
import { browser } from '$app/environment';
import { createWebClient } from '@prodantix/sdk/web';

export const prodantix = browser
  ? createWebClient({
      apiKey: PRODANTIX_PUBLIC_KEY,
      host: 'https://eu.api.prodantix.com',
      flagsHost: 'https://api.prodantix.com',
    })
  : null;

// any component
import { prodantix } from '$lib/prodantix';
prodantix?.capture('order.completed');

Angular

JavaScript
// prodantix.service.ts (Angular Universal: create only when isPlatformBrowser)
import { Injectable } from '@angular/core';
import { createWebClient } from '@prodantix/sdk/web';

@Injectable({ providedIn: 'root' })
export class ProdantixService {
  readonly client = createWebClient({
    apiKey: PRODANTIX_PUBLIC_KEY,
    host: 'https://eu.api.prodantix.com',
    flagsHost: 'https://api.prodantix.com',
  });
}

// any component
constructor(private prodantix: ProdantixService) {}
this.prodantix.client.capture('order.completed');