Ajouter un bandeau d’information sur l’utilisation des Cookies

Aujourd’hui, la team WebAcappella vous invite à mettre en place de manière assez simple et efficace, un bandeau d’information sur les cookies.

En effet, vous étiez nombreux à nous réclamer cela et c’est donc avec plaisir que nous vous proposons ce mini tutoriel qui sera utile notamment pour les utilisateurs du E-commerce (politique d’utilisation des cookies par WebAcappella disponible ici : http://download.intuisphere.com/Blog/Cookies/cookie.pdf)

Mais qu’est qu’un cookie en informatique ? il s’agit d’un simple fichier texte qui va enregistrer des données personnelles comme le nom du serveur qui l’a déposé, une date de creation et d’expiration mais surtout un identifiant unique qui permettra à celui qui l’a déposé de reconnaître un internaute (très pratique pour ne pas re-saisir des informations deja données).

Pour rappel, la directive 2009/136/CE implique que l’éditeur d’un site Web demande un consentement préalable de l’utilisateur avant le stockage d’informations sur l’ordinateur ou le smartphone d’un visiteur ou l’accès à des informations déjà stockées sauf, si ces actions sont strictement nécessaires pour la délivrance d’un service de la société de l’information expressément demandé par l’abonné ou l’utilisateur.

En application de la loi informatique et libertés, les traceurs (cookies ou autres) nécessitant un recueil du consentement de l’utilisateur ne peuvent donc être déposés ou lus sur son terminal, tant qu’il n’a pas donné son consentement (source : http://fr.wikipedia.org/wiki/Cookie_(informatique)#Directive_2009.2F136.2FCE).

Maintenant que la situation est plus claire, intéressons nous à la mise en place de ce bandeau d’informations :

Il vous suffira simplement de déposer le fichier suivant cookie.zip (après l’avoir décompressé) dans WebAcappella, pour cela :

– Cliquez sur le menu « Ressources »

– Ajoutez le fichier décompressé nommé « cookiebanner.min.js » dans votre bibliothèque de ressources (bouton « Ajouter des fichiers depuis votre ordinateur ») puis Fermer

Ressources

– Allez dans le menu « Insérer » puis ajoutez un « code HTML » que vous disposez en haut à gauche de votre page d’accueil

– Cliquez sur ce bouton  Capture d’écran 2014-09-30 à 11.44.13 puis double-cliquez sur « cookiebanner.min.js » et ajoutez ces caractères <!– et –> au début et à la fin , au final, vous devriez avoir cela dans le code HTML

<!- – WA_INTERN_URL[cookiebanner_min.js] – -> (voir capture ci-dessous) puis publiez votre projet.

Capture d’écran 2014-10-16 à 16.23.35

Ensuite, dans WebAcappella, menu « Site Web » puis « Propriétés du site Web » et 4ème onglet « Code HTML » , vous devez utiliser le script ci-dessous (désolé pour le format image car WordPress modifie l’encodage de certains caractères) :

Capture d’écran 2014-10-28 à 17.12.19

Dans cet exemple, vous pouvez modifier la hauteur et l’emplacement du bandeau (data-height et data-position) data-position en « top » pour avoir le bandeau en haut et « bottom » pour l’avoir en bas de page, vous pouvez également modifier la couleur de la police du texte (data-fg) ou encore la couleur de fond du bandeau (data-bg),…

Voici les principales options pouvant être modifiées dans ce script :

data-height --> hauteur du bandeau (défaut : 32 pixels)

data-fg --> couleur du texte (défaut : #ddd)

data-bg --> couleur de fond (défaut : #000)

data-link --> couleur du lien (défaut : #aaa)

data-position --> position du bandeau, top (haut) ou bottom (bas) (défaut : bottom)

data-message --> le texte du message d’information

data-linkmsg --> le texte du lien vers la page d’information (défaut : Learn more)

data-effect --> les effets à utiliser

data-cookie --> nom du cookie permettant de stocker le consentement de l’utilisateur (défaut : cookiebanner-accepted)

data-expires --> date d’expiration du cookie (défaut  configuré sur l’infini Fri, 31 Dec 9999 23:59:59 GMT)

Une fois les modifications faites et votre projet publié, vous aurez ce type de résultat :

cookie-banner

En savoir plus renvoi vers un fichier pdf contenant des explications sur l’utilisation de ces cookies faites avec WebAcappella (hors ajout de codes extérieurs au programme).

En cliquant sur « OK », l’internaute accepte l’utilisation de ce système de cookies.

En espérant que cet article vous soit utile et clair !

A bientôt pour de nouveaux articles.