À l'ère du RGPD, faut-il expliquer le besoin d'une bannière de cookies ? Cookie law vous permet d'ajouter une bannière invitant le visiteur à accepter ou refuser certains cookies sur votre site.
Ajoutez le package à votre projet. Rendez-vous à la racine du projet où se trouve votre package.json et exécutez :
yarn add @wavenet/cookie-lawAppeler le composant <wvn-cookie-law> dans votre code.
Voici un exemple :
import "@wavenet/cookie-law/dist/cookielaw";
export function CookieLaw() {
return (
<wvn-cookie-law>
<script type="application/json">
{`{
"locale": "fr",
"links": {
"cookiePolicy": "/cookies/"
},
"licence": true,
"changePreferences": "#cookie-preferences",
"isOptOut": false,
"defaultCheckboxState": false,
"categories": [
"introduction",
"strictly-necessary",
"more_information"
],
"storage": "cookie"
}`}
</script>
</wvn-cookie-law>
);
}À l'intérieur de la balise <script>, vous devez fournir un json avec les paramètres de votre bannière.
Vous pouvez aussi travailler avec un fichier json au lieu d'injecter le json dans le <script>.
Plus d'informations sur comment configurer dans la partie Configuration ci-dessous.
Plusieurs variables sont mises à votre disposition, mais il est possible aussi d'atteindre certains tags HTML via
des part.
Sur chaque balise <script>, veillez à :
- donner le type de catagorie concerné via
data-consent; - mettre le type du script à
text/plain.
Cookie law va alors transformer les scripts en js dès que le visiteur aura accepter la catégorie associée.
Exemple avec Google analytics :
<script type="text/plain" data-consent="tracking" async src="https://www.googletagmanager.com/gtag/js?id=123"></script>
<script type="text/plain" data-consent="tracking">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ domainConfig.field_t_ga.0.value }}');
</script>Dans ce cas-ci, il faut que le visiteur accepte les cookies de tracking.
| Nom du paramètre | Type | Description |
|---|---|---|
| categories | object | Ce sont les catégories des cookies. Ils sont listés dans la modal des préférences et sont utilisés pour sélectionner les scritps à autoriser/bloquer en fonction des préférences du visiteur. Plus d'info ci-dessous. |
| changePreferences | string | Cette option accueille un sélecteur css. N'importe quel tag HTML ayant ce selecteur permettra d'ouvrir au clic la modal des préférences et ainsi permettre au visiteur de changer ses préférences. |
| defaultCheckboxState | boolean | Chaque catégorie de cookies facultatives peuvent être acceptée ou refusée par le visiteur via la modal des préférences où chaque catégorie est (dé)cochable via une checkbox. La valeur à false, cela signifie que par défaut ces catégories non obligatoires sont décochées. |
| isOptOut | boolean | |
| labels | Record<string, string> | Cette option permet de surchager les textes. En effet, une série de textes est présent par défaut en Anglais, Français, Néerlandais et Allemand. Si vous voulez altérer ces textes, vous devez retrouver le nom machine dudit texte et le remplacer. Veillez à utiliser du markdown. L'HTML est autorisé, mais vous risquez de perdre le design des <a> si vous n'ajoutez pas vous-mêmes des part. |
| licence | boolean | Si cette option est à false, on affiche le copyright de Wavenet dans la modal des préférences. |
| links | {cookiePolicy: string} | Cette option permet de surcharger le lien vers la politique des cookies sans surcharger le texte via les labels (cf. ci-dessus). |
| locale | string | La langue du site. A priori vous n'en aurez pas besoin si vous avez fait ceci <html lang="fr">. En effet, Cookie law peut détecter la langue du site. |
| storage | string | On attend local ou cookie. Par défaut, c'est local. Dans le premier cas, les catégories de cookies sélectionnées seront enregistrées dans les localstorage du navigateur du visteur ; dans le second cas, dans ses cookies. |
Voici la liste des catégories existantes :
- introduction
- strictly-necessary
- functionality
- tracking
- more_information
Vous pouvez donc simplement envoyer un array avec ces mots-clés pour choisir les onglets à afficher dans la modal des préférences et leur ordre.
Exemple :
{
"categories": [
"introduction",
"strictly-necessary",
"functionality",
"more_information"
]
}Si vous voulez modifier une des propriétés d'un cookie, vous devrez lui passer non plus une simple string, mais un object contenant le code du cookie et la/les valeurs que vous voulez modifier.
Exemple :
{
"categories": [
"introduction",
{
"code": "strictly-necessary",
"cookies": {
"Coockie #1": "https://www.wavenet.be/cookies/"
}
},
"functionality",
"more_information"
]
}| Nom de la popriété | Type | Description |
|---|---|---|
| code | string | Comme expliqué ci-dessus, cela va permettre d'identifier le cookie à altérer. |
| title | string | Titre de l'onglet dans la modal des préférences. |
| tabTitle | string | Libellé du bouton de l'onglet dans la modal des préférences. |
| description | string[] | Contenu de l'onglet dans la modal des préférences. Veillez à utiliser du markdown. L'HTML est autorisé, mais vous risquez de perdre le design des <a> si vous n'ajoutez pas vous-mêmes des part. |
| cookies | Record<string, string> | Liste des cookies de la catégorie. Chaque cookie est un lien. |
| consent | boolean | Valeur à true, si c'est une catégorie de cookie ; à false, si vous voulez juste avoir un nouvel onglet dans la modal des préférences, comme les onglets introduction ou plus d'informations. |
| required | boolean | Valeur à true, si le visiteur ne peut pas refuser cette catégorie. Typiquement la catégorie Strictement nécessaire. |
| cleaning | string[] | Liste des cookies à supprimer. En effet, si le visiteur change ses préférences, des cookies ont déjà été enregistrés sur son navigateur. |
Remplissez simplement les propriétés ci-dessus avec un code unique.
{
"categories": [
"introduction",
{
"code": "foo-bar",
"title": "Nunc ante nunc, luctus id nisi eget...",
"tabTitle": "Nunc ante nunc",
"description": [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"In in tempus sapien, in tempor libero.",
"Aliquam lobortis venenatis odio sit amet egestas.",
"Ut nibh nulla, feugiat eget commodo id, fermentum sit amet odio."
],
"consent": true,
"required": false
},
"more_information"
]
}Utilisez ensuite ce code unique sur vos scritps.
<script type="text/plain" data-consent="foo-bar">
console.log('Cookie foo bar is allowed.');
</script>