मुख्य सामग्री पर जाएँ

संदर्भ

API संदर्भ

फ़्रेमवर्क इंटीग्रेशन

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