تخطَّ إلى المحتوى الرئيسي

واجهات البرمجة

RESTGraphQLالوقت الفعليMCP

المرجع

مرجع API

تكاملات أطر العمل

لا تحتاج حزمة SDK إلى طبقة خاصة بكل إطار عمل: يلتقط autocapture واجهة History، فتُتتبع تغييرات المسار تحت أي راوتر. أنشئ عميلًا واحدًا للصفحة وشاركه كما يشارك إطارك أي شيء آخر. هل تعرض على الخادم أيضًا؟ أنشئ العميل في المتصفح فقط، كما تفعل المقتطفات أدناه.

المفتاح في هذه المقتطفات يأتي من وحدة التحكم: احصل على مفتاح 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 هو الاستثناء الوحيد: دورة حياته تحتاج المحوّل المخصص، مزوّد وخطاف يثبّتان العميل مرة واحدة بأمان مع 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');