@emagineurs/tarteauxquetsches

🥧 TarteAuxQuetsches 🥧

Un outil complet pour la gestion RGPD des services et du tracking dans vos projets Next.js (Next.js 15+).

@emagineurs/tarteauxquetsches est conçu pour intégrer facilement des services (comme Matomo) dans vos projets Next.js tout en respectant les préférences utilisateur (RGPD-friendly).

---

🚀 Installation

Ajoutez le package à votre projet via npm ou yarn :

npm install @emagineurs/tarteauxquetsches
# ou
yarn add @emagineurs/tarteauxquetsches

---

🛠️ Utilisation

Exemple basique

Implémentez le composant ServicesProvider pour gérer les préférences utilisateur. Les services, comme un tracker Matomo, doivent être créés et ajoutés via la liste initialServices.

"use client";

import { ServicesProvider } from "@emagineurs/tarteauxquetsches";
import MatomoTracker from "./MatomoTracker"; // Exemple fourni ci-dessous

export default function App() {
    const services = [
        {
            label: "Matomo Analytics",
            description: "Statistiques anonymes pour optimiser notre site.",
            cookieIdentifier: "matomo_enabled",
            Component: () => <MatomoTracker />,
        },
    ];

    return (
        <ServicesProvider initialServices={services} rgpdLink="/privacy-policy" />
    );
}

---

Exemple : Création d'un tracker Matomo

Voici un exemple de composant MatomoTracker que vous pouvez ajouter à votre projet. Il utilise les outils natifs de Next.js pour injecter le script Matomo et gérer le tracking :

"use client";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import Script from "next/script";

function MatomoTracker() {
    const pathname = usePathname();
    const [scriptAdded, setScriptAdded] = useState(false);

    useEffect(() => {
        if (!scriptAdded) {
            const existingScript = document.getElementById("matomo-script");
            if (!existingScript) {
                setScriptAdded(true);
            }
        } else {
            if (window._paq) {
                window._paq.push(["setCustomUrl", pathname]);
                window._paq.push(["setDocumentTitle", document.title]);
                window._paq.push(["trackPageView"]);
            }
        }
    }, [pathname, scriptAdded]);

    if (!scriptAdded) return null;

    return (
        <Script
            id="matomo-script"
            dangerouslySetInnerHTML={{
                __html: `
                    var _paq = window._paq || [];
                    _paq.push(['enableLinkTracking']);
                    (function() {
                        var u = "//localhost/matomo/"; // Remplacez par votre URL Matomo
                        _paq.push(['setTrackerUrl', u + 'matomo.php']);
                        _paq.push(['setSiteId', '2']); // Remplacez par votre ID de site Matomo
                        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
                        g.type = 'text/javascript'; g.async = true; g.defer = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
                    })();
                `,
            }}
        />
    );
}

export default MatomoTracker;

---

📦 Fonctionnalités

• Gestion des préférences utilisateur via cookies personnalisés.
• Support RGPD-friendly pour activer/désactiver les services.
• Intégration facile dans les projets Next.js 15+.
• Architecture extensible pour ajouter des services.

---

📝 Licence

Ce projet est distribué sous licence MIT. Consultez le fichier LICENSE pour plus de détails.