nafann-cookie-manager

Package npm de tracking first-party pour n’importe quelle boutique e-commerce.
Les autres l’installent, collent une ligne, et tes événements arrivent sur cookie-backend / le dashboard.

Compatible React, Next.js, Vite, Shopify (Hydrogen / thème via script), WooCommerce, Magento, sites custom.

Installation (ce que tes utilisateurs font)

npm install nafann-cookie-manager

React / Next / Vite — 1 ligne

Dans main.tsx, main.jsx ou app/layout.tsx :

import 'nafann-cookie-manager/auto';

Rien d’autre. Pas de Provider, pas d’appels track().

Script CDN (sans bundler, thème Shopify / HTML)

<script>
  window.NAFANN = {
    adminApiUrl: 'https://TON-COOKIE-BACKEND/api',
    siteName: 'Ma Boutique'
  };
</script>
<script src="https://unpkg.com/nafann-cookie-manager/dist/auto.iife.js"></script>

Config optionnelle

<meta name="nafann-api" content="https://TON-COOKIE-BACKEND/api" />

ou :

window.NAFANN = {
  adminApiUrl: 'https://TON-COOKIE-BACKEND/api',
  siteName: 'Ma Boutique',
  debug: false
};

Par défaut : https://marketingbackend.bingsepicerie.com/api.

Ce qui est tracké automatiquement

| Événement | Déclencheur | |-----------|-------------| | Session | chargement de la page | | Page vue | navigation (SPA comprise) | | Vue produit | URL /product/:id, /produit/:id ou data-product-id | | Durée de vue | temps passé sur la fiche (dashboard live) | | Ajout panier | bouton « Ajouter », formulaires Woo, POST /cart | | Achat | POST /order, /checkout, /payment |

Pour un tracking plus fiable, ajoute sur tes cartes :

<article data-product-id="123" data-product-name="Riz 5kg" data-product-price="4500">
  <button>Ajouter au panier</button>
</article>

API manuelle (facultatif)

import { useEcommerceTracking, useTracker, TrackerEvents } from 'nafann-cookie-manager';

const { trackProductView, trackAddToCart, trackPurchase } = useEcommerceTracking();
const { identify, setConsent } = useTracker();

identify(user.id, { email: user.email, firstName: user.firstName });
setConsent({ analytics: true, marketing: false });
trackPurchase({ orderId: 'ORD-1', items: [{ id: '123', name: 'Riz', price: 4500, quantity: 1 }] });

Pricing dynamique, panier abandonné avancé et notifications : enveloppe l’app avec AutoCookieManagerProvider (voir les exports du package).

Publier ce package (mainteneur)

npm run build
npm publish --access public

Le fichier dist/auto.iife.js est autonome (tracker inclus).
import 'nafann-cookie-manager/auto' est un bundle ESM autonome.

Licence

MIT