Aller au contenu principal

Référence

Référence API

Intégrations de frameworks

Le SDK n'a besoin d'aucune couche par framework : l'autocapture patche l'API History, donc les changements de route sont suivis sous chaque routeur. Créez un client pour la page et partagez-le comme votre framework partage tout le reste. Vous rendez aussi côté serveur ? Créez le client uniquement dans le navigateur, comme le fait chaque extrait ci-dessous.

La clé de ces extraits vient de la console : Obtenir une clé 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 est la seule exception : son cycle de vie nécessite l'adaptateur dédié, un provider et un hook qui installent le client une seule fois, à l'épreuve du 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');