Bonjour à toutes et à tous,

Je vous présente Orejime, un gestionnaire de cookies open source et gratuit. Si vous avez besoin de recueillir le consentement de vos internautes sur vos sites internet, voici un outil que j'ai enfin réussi à mettre en place pour Silex v3.
Dans cette exemple a adapter pour votre utilisation gestion pour ( GA4 Analytics, Pixel facebook et Hotjar )

Voici deux codes à intégrer dans Silex v3 :

Le JavaScript à insérer dans la balise HTML head de votre site.
Un bouton pour appeler le gestionnaire de consentement, par exemple dans votre politique de confidentialité.

J'espère que ce travail vous sera utile et vous fera gagner un temps précieux pour l'optimisation de votre site.

Hello everyone,

I'd like to introduce you to Orejime, a free open source cookie manager. If you need to collect your visitors' consent on your websites, here's a tool that I've finally managed to implement for Silex v3.

Here are two codes to integrate into Silex v3:

The JavaScript to be inserted into the HTML head tag on your site.
A button to call up the consent manager, for example in your privacy policy.

I hope you find this work useful and that it saves you valuable time in optimising your site.

In this example to be adapted for your use management for ( GA4 Analytics, Pixel facebook and Hotjar )

Here's to pleasure

HTML head

    <script>
        // Charger le script Orejime
        function loadScript(src, callback) {
            var script = document.createElement('script');
            script.src = src;
            script.defer = true;
            script.onload = callback;
            document.head.appendChild(script);
        }

        // Configuration d'Orejime
        window.orejimeConfig = {
            privacyPolicy: "/privacy-policy",
            apps: [
                {
                    name: "google-analytics",
                    title: "Google Analytics GA4",
                    purposes: ["analytics"],
                    cookies: [
                        "_ga",
                        "_gid"
                    ],
                    required: false,
                    optOut: false,
                    onlyOnce: true,
                    description: "Google Analytics est utilisé pour analyser le trafic sur notre site."
                },
                {
                    name: "facebook-pixel",
                    title: "Facebook Pixel",
                    purposes: ["marketing"],
                    cookies: [
                        "_fbp",
                        "fr"
                    ],
                    required: false,
                    optOut: false,
                    onlyOnce: true,
                    description: "Facebook Pixel est utilisé pour le marketing et le suivi des conversions."
                },
                {
                    name: "hotjar",
                    title: "Hotjar",
                    purposes: ["analytics"],
                    cookies: [
                        "_hjIncludedInSample"
                    ],
                    required: false,
                    optOut: false,
                    onlyOnce: true,
                    description: "Hotjar est utilisé pour comprendre comment les utilisateurs interagissent avec notre site."
                },
                {
                    name: "orejime",
                    title: "Orejime",
                    purposes: ["functionality"],
                    cookies: [
                        "orejime"
                    ],
                    required: true,
                    optOut: false,
                    onlyOnce: true,
                    description: "Orejime est utilisé pour gérer le consentement des cookies."
                }
            ],
            translations: {
                fr: {
                    consentModal: {
                        title: "Cookies utilisés sur le site web!",
                        description: "Ici, vous pouvez voir et personnaliser les informations que nous collectons sur vous.",
                        acceptAllBtn: "Tout accepter",
                        acceptSelectedBtn: "Accepter la sélection",
                        closeBtnLabel: "Fermer"
                    },
                    consentNotice: {
                        description: "Nous collectons et traitons vos informations personnelles dans les buts suivants : {purposes}.",
                        learnMore: "En savoir plus",
                        viewDetails: "Voir les détails",
                        changePreferences: "Modifier vos préférences",
                        accept: "Accepter",
                        decline: "Refuser"
                    },
                    purposes: {
                        analytics: "analyse",
                        marketing: "marketing",
                        functionality: "fonctionnalité"
                    },
                    app: {
                        disableAllBtn: "Tout désactiver",
                        enableAllBtn: "Tout activer",
                        optOut: {
                            title: "(opt-out)",
                            description: "Les cookies de ce service sont utilisés pour des analyses anonymisées."
                        },
                        purposes: {
                            analytics: "analyse",
                            marketing: "marketing",
                            functionality: "fonctionnalité"
                        }
                    }
                }
            }
        };

        // Charger Orejime et initialiser
        loadScript('https://unpkg.com/orejime@latest/dist/orejime.js', function() {
            document.addEventListener("DOMContentLoaded", function () {
                if (window.orejimeConfig && typeof orejime !== 'undefined' && typeof orejime.init === 'function') {
                    const orejimeInstance = orejime.init(window.orejimeConfig);

                    // Charge les scripts uniquement si le consentement est donné
                    orejimeInstance.on('consent:changed', function (consent) {
                        if (consent.preferences['google-analytics']) {
                            // Google Analytics GA4
                            window.dataLayer = window.dataLayer || [];
                            function gtag(){dataLayer.push(arguments);}
                            gtag('js', new Date());
                            gtag('config', 'YOUR_GOOGLE_ANALYTICS_MEASUREMENT_ID');
                        }

                        if (consent.preferences['facebook-pixel']) {
                            !function(f,b,e,v,n,t,s)
                            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                            n.queue=[];t=b.createElement(e);t.async=!0;
                            t.src=v;s=b.getElementsByTagName(e)[0];
                            s.parentNode.insertBefore(t,s)}(window, document,'script',
                            'https://connect.facebook.net/en_US/fbevents.js');
                            fbq('init', 'YOUR_FACEBOOK_PIXEL_ID');
                            fbq('track', 'PageView');
                        }

                        if (consent.preferences['hotjar']) {
                            (function(h,o,t,j,a,r){
                                h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
                                h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
                                a=o.getElementsByTagName('head')[0];
                                r=o.createElement('script');r.async=1;
                                r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
                                a.appendChild(r);
                            })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
                        }
                    });
                } else {
                    console.error("Orejime n'a pas pu être initialisé.");
                }
            });
        });
    </script> ```