Mise en place consent RGPD via Orejime Open source

baguetteagile Messages postés 106 Statut Membre -  
baguetteagile Messages postés 106 Statut Membre -
Bonjour a tous et toutes,

je travail actuellement sur la problématique de la conformité RGPD des sites internet.

J'utilise un CMS français Open source pour créer mes sites:

https://editor.silex.me/

J'aimerai utiliser cette solution sur mes sites

https://github.com/empreinte-digitale/orejime

https://orejime.empreintedigitale.fr/

ceci dit, je ne comprend pas comment mettre en place cette partie de l'explication

API et Orejime instance

https://github.com/empreinte-digitale/orejime#api

Merci d'avance pour votre aide.





Configuration: Linux / Chrome 87.0.4280.141

2 réponses

Réponse 1 / 2
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Bonjour,

A part te dire d'appliquer ce qui est marqué dans le lien que tu nous donnes ( tout y est...) je ne vois pas ce qu'on pourrait te dire d'autre...
A la limite, montre ce que tu as déjà fait et expliquer sur quel point précis tu bloques...

0
baguetteagile Messages postés 106 Statut Membre 7
 
Bonjour jordane45,

en faite comme dit au premier message, je ne sais pas mettre en place la partie

API et Orejime instance:

https://github.com/empreinte-digitale/orejime#api

Je n'ai pas de retour graphique sur mon site comme dans cette exemple:

https://orejime.empreintedigitale.fr/
0
jordane45 Messages postés 40050 Statut Modérateur 4 757 > baguetteagile Messages postés 106 Statut Membre
 
Bonjour,

Et comme je te l'ai moi même dit, sans nous montrer ce que tu as déjà fait... impossible de te venir en aide.
par ce que, avant le chapitre API ..il y a déjà pas mal de choses à mettre en place.....

Et aussi, pense à regarder dans la console javascript de ton navigateur si il n'y aurait pas des erreurs d'affichées.

Dernier point.. pour nous montrer ton code, tu devras utiliser les balises de code;
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
0
Réponse 2 / 2
baguetteagile Messages postés 106 Statut Membre 7
 
Voici le code pour la partie " Head" 

<!-- Library Orejime -->
<link rel="stylesheet" href="https://unpkg.com/orejime@1.2.3/dist/orejime.css" />
<script src="https://unpkg.com/orejime@1.2.3/dist/orejime.js"></script>

<!-- end library Orejime -->

<!-- Third-party script tags -->

 <script
   type="opt-in"
   data-type="application/javascript"
   data-name="google-tag-manager"
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push [...]></script>


 <script
   type="opt-in"
   data-type="application/javascript"
   data-name="google-analytics"
   data-src="https://www.googletagmanager.com/gtag/js?id=UA-137580905-2"></script>


 <script
     type="opt-in"
     data-type="application/javascript"
     data-name="bouton-facebook"
     data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FCaliceBluesRock%2F%3Fmodal%3Dadmin_todo_tour&width=180&layout=button_count&action=like&size=large&share=true&height=46&appId"></script>

 <script
   type="opt-in"
   data-type="application/javascript"
   data-name="lecteur-videas"
   data-src="https://videas.fr/embed/3860669b-405b-4419-83b3-056a74d811c4/"></script>

<!-- end Third-party script tags -->




<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137580905-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-137580905-2');
</script>


la partie " variantes" dans laquelle j'ai ajouté le pixel Facebook et le cookie du lecteur vidéo
( vidéas) 

/* initialization auto */
window.orejimeConfig = {
}


/* variable consent */
var orejimeConfig = {
    // Optional. You can customize the ID of the <div> that Orejime will create when starting up.
    // The generated <div> will be inserted at the beginning of the <body>.
    // If there is already a DOM element with this id, Orejime will use it instead of creating a new element.
    // defaults to "orejime".
    elementID: "orejime",

    // Optional. For accessibility's sake, the Orejime modal must know what is the element
    // containing your app or website. Orejime should *not* be in this element.
    // The idea is your DOM could look like this after Orejime is initialized:
    // <body>
    //      <div id="orejime">...</div>
    //      <div id="app">your actual website</div>
    // </body>
    //
    // It is highly recommended to set this option, even though it's not required.
    // defaults to undefined.
    appElement: "#app",

    // Optional. You can customize the name of the cookie that Orejime uses for storing
    // user consent decisions.
    // defaults to "orejime".
    cookieName: "orejime",

    // Optional. You can set a custom expiration time for the Orejime cookie, in days.
    // defaults to 365.
    cookieExpiresAfterDays: 365,

    // Optional. You can provide a custom function to serialize the cookie contents.
    stringifyCookie: (contents) => JSON.stringify(contents),

    // Optional. You can provide a custom function to unserialize the cookie contents.
    parseCookie: (cookie) => JSON.parse(cookie),

    // You must provide a link to your privacy policy page
    privacyPolicy: "http://www.calicebluesrock.be/politiquedecokkies.html",

    // Optional. Applications configured below will be ON by default if default=true.
    // defaults to true
    default: true,

    // Optional. If "mustConsent" is set to true, Orejime will directly display the consent
    // manager modal and not allow the user to close it before having actively
    // consented or declined the use of third-party apps.
    // defaults to false
    mustConsent: false,

    // Optional. If "mustNotice" is set to true, Orejime will display the consent
    // notice and not allow the user to close it before having actively
    // consented or declined the use of third-party apps.
    // Has no effect if mustConsent is set to true.
    // defaults to false
    mustNotice: false,

    // Optional. If "implicitConsent" is set to true, Orejime will automatically accept
    // cookies if the user continues his navigation on the website after the
    // first page. If you enable this, you must warn the user
    // of this behavior in the notice window. You can do that easily by overriding
    // translation strings (see below).
    // defaults to false
    implicitConsent: false,

    // Optional. You can define the UI language directly here. If undefined, Orejime will
    // use the value given in the global "lang" variable, or fallback to the value
    // in the <html> lang attribute, or fallback to "en".
    lang: "fr",

    // Optional. You can pass an image url to show in the notice.
    // If the image is not exclusively decorative, you can pass an object
    // with the image src and alt attributes: `logo: {src: '...', alt: '...'}`
    // defaults to false
    logo: false,

    // Optional. Set Orejime in debug mode to have a few stuff
    // logged in the console, like warning about missing translations.
    // defaults to false
    debug: false,

    // You can overwrite existing translations and add translations for your
    // app descriptions and purposes. See `src/translations.yml` for a full
    // list of translations that can be overwritten
    translations: {
        en: {
            consentModal: {
                description: "This is an example of how to override an existing translation already used by Orejime",
            },
            inlineTracker: {
                description: "Example of an inline tracking script",
            },
            externalTracker: {
                description: "Example of an external tracking script",
            },
            purposes: {
                analytics: "Analytics",
                security: "Security"
            }
        },
    },

    // The list of third-party apps that Orejime will manage for you.
    // The apps will appear in the modal in the same order as defined here.
    apps: [
        {
            // The name of the app, used internally by Orejime.
            // Each name should match a name of a <script> tag defined in the
            // "Changing your existing third-party scripts" documentation step.
            name: "google-tag-manager",

            // The title of you app as listed in the consent modal.
            title: "Google Tag Manager",

            // A list of regex expressions, strings, or arrays, giving the names of
            // cookies set by this app. If the user withdraws consent for a
            // given app, Orejime will then automatically delete all matching
            // cookies.
            //
            // See a different example below with the inline-tracker app
            // to see how to define cookies set on different path or domains.
            cookies: [
                "_ga",
                "_gat",
                "_gid",
                "__utma",
                "__utmb",
                "__utmc",
                "__utmt",
                "__utmz",
                "_gat_gtag_" + GTM_UA,
                "_gat_" + GTM_UA
            ],

            
            
            // Optional. The purpose(s) of this app. Will be listed on the consent notice.
            // Do not forget to add translations for all purposes you list here.
            purposes: ["analytics"],

            name: "Facebook",
            title: "bouton-facebook",
            cookies: [
                "wd"
                ],
            

            name: "videas",
            title: "lecteur-videas",
            cookies [
                "__stripe_mid"
                ],

            purpose: ["Required app"],

            // Optional. A callback function that will be called each time
            // the consent state for the app changes. Passes
            // the `app` config as the second parameter as well.
            callback: function(consent, app){
                // This is an example callback function.
                console.log("User consent for app " + app.name + ": consent=" + consent)
            },

            // Optional. If "required" is set to true, Orejime will not allow this app to
            // be disabled by the user.
            // default to false
            required: false,

            // Optional. If "optOut" is set to true, Orejime will load this app even before
            // the user gave explicit consent.We recommend always leaving this "false".
            // defaults to false
            optOut: false,

            // Optional. If "default" is set to true, the app will be enabled by default
            // Overwrites the global "default" setting.
            // defaults to the value of the gobal "default" setting
            default: true,

            // Optional. If "onlyOnce" is set to true, the app will only be executed
            // once regardless how often the user toggles it on and off.
            // defaults to false
            onlyOnce: true,
        },
        {
            name: "inline-tracker",
            title: "Inline Tracker",
            purposes: ["analytics"],
            cookies: [
                "inline-tracker"
                // When deleting a cookie, Orejime will try to delete a cookie with the given name,
                // the "/" path, and multiple domains (the current domain and `"." + current domain`).
                // If an app sets a cookie on a different path or domain than that, Orejime won't be
                // able to delete it by itself without more info.
                // In this case, you can explicitely define a cookie, a path and domain:
                ["cookieName", "/blog", "." + location.hostname],
                ["cookieName", "/", "test.mydomain.com"],
            ]
        },
        {
            name: "external-tracker",
            title: "External Tracker",
            purposes: ["analytics", "security"],
            cookies: ["external-tracker"],
            required: true
        }
    ],
}
/* end variable consent */


Voici un lien sur Netlify:

https://calice-orejime.netlify.app/
0