Widget bandeau cookies

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Bandeau Cookies » ?

Le widget « Bandeau Cookies » permet d'afficher, en en-tête, sur votre site, un bandeau d'information relatif aux cookies. Il s'adresse à vos visiteurs et les informe de la finalité des cookies utilisés sur votre site, de la possibilité de s'y opposer et de changer les paramètres, et du fait que la poursuite de leur navigation vaut acceptation de ces cookies.
Il inclut également un lien "En savoir plus", qui, lorsque vos visiteurs cliquent dessus, affiche un texte explicatif complémentaire à la mention d'information préalable, et permet aux visiteurs de connaître les modalités de paramétrage des cookies, pour les accepter ou les refuser.
Vous pouvez personnaliser l'ensemble des contenus informatifs de ce widget, en suivant, pour cela, la procédure décrite dans la rubrique "Personnalisation du widget".

En pratique, ce widget répond à l'obligation de mise en conformité de votre site avec la règlementation relative aux Cookies et aux autres traceurs visés par l'article 32-II de la loi du 6 janvier 1978 (Délibération n°2013-378 du 5 décembre 2013). Veillez à adapter et personnaliser l’ensemble des contenus de ce widget en fonction des types de cookies émis sur votre site.

N.B. : dès lors que le visiteur donne expressément son consentement ("OK"), le bandeau disparaît. Il ne s'affichera à nouveau qu'une fois le cache du navigateur nettoyé.
N.B. : l'utilisation de la navigation privée (sur PC, tablettes et mobiles) ne permet pas au visiteur de désafficher le bandeau cookies, même s'il clique sur "OK".

Voir l'exemple

Voir le site démo Exemple du widget « Bandeau Cookies » affiché en haut de page.


Caractéristiques

Version minimale requise : PowerBoutique© V4.7.0
Technologies utilisées : HTML / CSS / JS
Navigateurs compatibles : Firefox.gif Chrome.gif Ie.gif Safari.gif Opera.gif

Versions : Francais.gif   Anglais.gif   Iphone ipad.jpg
Dernières modifications : le 03 avril 2015

La procédure suivante a été conçue pour vous permettre d'installer ce widget de façon autonome.
L'intégration et le fonctionnement de ce widget sont conditionnés aux intitulés des dossiers et des fichiers précisés dans cette procédure. Nous vous recommandons de ne pas les renommer.
N.B. : un widget est une extension technique d'une ou plusieurs fonctionnalités du logiciel PowerBoutique©. Les procédures de mise en place et de personnalisation ne sont pas couvertes par l’Assistance Utilisateurs.

Étapes d'intégration

  • Étape 2
    Via la fonction "Import/Export" > "Espace de stockage", créez un nouveau dossier "bandeaucookie" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /bandeaucookie, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 3 fichiers que vous avez téléchargé dans l'étape 1 et cliquez sur "OK".

    - Intégration sur votre site en version FR et/ou en version US :

  • Étape 4
    Créez un espace promotionnel* via la fonction "Apparence" > "Modèles de site". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" puis cliquez sur le bouton "Personnaliser". Dans l'écran suivant, cliquez sur le bouton "Nouvel espace promotionnel". Positionnez ensuite ce nouvel espace promotionnel le plus bas possible à l'aide du bouton Deplacer code dev.gif (cela n'a pas d'impact sur son affichage). Enregistrez son emplacement en cliquant sur le bouton Enregistrer position des blocs.png. Enfin, activez-le en cliquant sur le bouton Off.gif (qui passera alors en On.gif ).
    N.B. : renouvelez l'étape 4 si vous possédez un site multilingue, en prenant soin de sélectionner "site US" dans la fonction "Apparence" > "Modèles de site".
    N.B. : dans le cas où vous utilisez votre propre gabarit html pour personnaliser l'apparence de votre site, créez votre espace promotionnel via la fonction "Apparence" > "Outils Experts - Web-design" > "Intégration gabarits html" > bouton "Espaces promotionnels", puis éditez-le dans la fonction "Animation" > "Bloc libre - cms". Pour finir, appelez ce nouveau cms dans votre gabarit, le plus bas possible.
    *vous pouvez également utiliser un cms existant.

  • Étape 5
    Insérez ensuite le code de la Version Française dans l'espace promotionnel créé dans la Version Française* à l'aide du bouton Style edit fo.gif. Placez ce code dans l'onglet HTML puis cliquez sur "Enregistrer".
    N.B. : renouvelez l'étape 5 si vous possédez un site multilingue, en prenant soin de copier-coller le code dans l'espace promotionnel créé dans la Version Anglaise cette fois-ci.
    N.B. : l'espace promotionnel contenant ce code doit impérativement être appelé sur toutes vos pages pour que le widget fonctionne sur l'ensemble du site.
    N.B. : le positionnement de l'espace promotionnel/cms le plus bas possible sur votre site permet d'éviter que Google n'indexe les contenus de votre bandeau cookies.
    *vous pouvez également insérer le code dans un cms existant.

    - Intégration sur votre site en version mobile :

  • Étape 4
    Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site mobile". Ajoutez le code de la Version Française/Version Mobile Française et/ou le code de la Version Anglaise/Version Mobile Anglaise, selon votre besoin, dans un CMS existant. Pour cela, cliquez sur le bouton Bt modifier.gif et copiez-collez le code dans l'onglet HTML..

    Version Française Francais.gif / Version Mobile Française Iphone ipad fr.jpg :
     1  <!-- DEBUT - Widget bandeau cookies -->
     2 <link rel="stylesheet" href="../site/bandeaucookie/bandeaucookie.css" type="text/css">
     3 <script type="text/javascript" src="../site/bandeaucookie/bandeaucookie.js"></script>
     4 
     5 <div style="display: block;" id="BandeauInfoCookie">
     6 	En poursuivant votre navigation sur notre site, vous acceptez l’utilisation de cookies afin de nous permettre d’améliorer votre expérience utilisateur.
     7 	<span id="LienInfosCookie"><a onclick="getInfosCookie(); return false;" title="En savoir plus" alt="En savoir plus" target="_blank">En savoir plus</a></span>
     8 	<a onclick="localStorage['BandeauInfoCookie'] = 1;getConteneurInfoCookie();return false;" title="OK" style="cursor:pointer;"><span id="ConteneurOk">OK</span></a>
     9 </div>
    10 
    11 <div id="ConteneurInfosCookie" style="display: none;">
    12 	<div id="ContenuInfosCookie" class="texte_catalogue">
    13 	<div style="float:right;"><span id="CroixClose" title="Fermer" onclick="getInfosCookie(); return false;">&nbsp;&#10006;</span></div>
    14 		<span style="text-decoration:underline;">Qu'est-ce qu'un cookie ?</span><br/>
    15 Un cookie est une information déposée, par votre navigateur, sur votre ordinateur (ou périphérique portable), à la demande des sites (et autres serveurs Web avec lesquels ils interagissent) que vous visitez.<br/>
    16 Il contient plusieurs données d'identification et de navigation, stockées dans un fichier.<br/>
    17 <br/><br/>
    18 <span style="text-decoration:underline;">Les cookies utilisés sur notre site</span><br/>
    19 Les cookies sont émis par nous-mêmes dans le but de :<br/>
    20 - collecter des informations relatives à votre navigation,<br/>
    21 - mémoriser vos informations d'identification sur notre site,<br/>
    22 - gérer votre panier de commande.<br/>
    23 Lorsque vous accédez à notre site depuis un site partenaire, un cookie spécifique est susceptible d'être émis dans le but d'établir des statistiques de fréquentation en provenance de ce site partenaire.<br/>
    24 <br/><br/>
    25 <span style="text-decoration:underline;">Les cookies tiers</span><br/>
    26 D'autres cookies sont susceptibles d'être émis par des services externes utilisés sur notre site pour l'analyse d'audience et la mesure de performances.<br/>
    27 <br/><br/>
    28 <span style="text-decoration:underline;">Le paramétrage des cookies</span><br/>
    29 En poursuivant votre navigation sur notre site, vous acceptez l'utilisation des cookies.<br/>
    30 Vous pouvez cependant choisir de les désactiver à tout moment en paramétrant votre navigateur.<br/>
    31 Les règles de paramétrage des cookies varient selon les navigateurs. Pour connaître leur fonctionnement et les personnaliser, rendez-vous dans le menu d'aide de votre navigateur.<br/>
    32 Attention : tout paramétrage entrepris sur votre navigateur Web, concernant l’acceptation ou le refus des cookies, sera susceptible de modifier votre navigation sur Internet et sur notre site, ainsi que vos conditions d'accès à certains services nécessitant l'utilisation de ces mêmes cookies. <br/>
    33 	</div>
    34 </div>
    35 <script>getConteneurInfoCookie();</script>
    36 
    37 <!-- FIN - Widget bandeau cookies -->
    
    Version Anglaise Anglais.gif / Version Mobile Anglaise Iphone ipad us.jpg :
     1  <!-- DEBUT - Widget bandeau cookies -->
     2 <link rel="stylesheet" href="../site/bandeaucookie/bandeaucookie.css" type="text/css">
     3 <script type="text/javascript" src="../site/bandeaucookie/bandeaucookie.js"></script>
     4 
     5 <div style="display: block;" id="BandeauInfoCookie">
     6 	Pursuing your navigation on our site, you accept the use of cookies to enable us to improve your user experience.
     7 	<span id="LienInfosCookie"><a onclick="getInfosCookie(); return false;" title="Read more" alt="Read more" target="_blank">Read more</a></span>
     8 	<a onclick="localStorage['BandeauInfoCookie'] = 1;getConteneurInfoCookie();return false;" title="OK" style="cursor:pointer;"><span id="ConteneurOk">OK</span></a>
     9 </div>
    10 
    11 <div id="ConteneurInfosCookie" style="display: none;">
    12 	<div id="ContenuInfosCookie" class="texte_catalogue">
    13 	<div style="float:right;"><span id="CroixClose" title="Close" onclick="getInfosCookie(); return false;">&nbsp;&#10006;</span></div>
    14 <span style="text-decoration:underline;">What is a cookie? </span><br/>
    15 A cookie is a small data stored by your browser on your computer (or mobile device), at the request of the websites (and other Web servers with which they interact) you visit.<br/>
    16 It stores information about users' identification and browsing history in a file.<br/>
    17 <br/><br/>
    18 <span style="text-decoration:underline;">Cookies used on our Website</span><br/>
    19 We use cookies in order to :<br/>
    20 - collect information about your browsing actions,<br/>
    21 - remember your login details on our website,<br/>
    22 - manage your shopping cart.<br/>
    23 When you access our website from one of our partners' sites, a special cookie may be used in order to collect statistical analysis from the partner site.<br/>
    24 <br/><br/>
    25 <span style="text-decoration:underline;">Third party cookies</span><br/>
    26 Some cookies may be placed by external services used on our website for statistical and performance analysis.<br/>
    27 <br/><br/>
    28 <span style="text-decoration:underline;">Cookies settings</span><br/>
    29 By using and browsing our website, you authorize the use of these cookies.<br/>
    30 You can however choose to disable or delete the cookies at any time by setting your browser.<br/>
    31 Instructions for cookies settings can usually be found in the browser 'Help' menu.<br/>
    32 Please be aware that you may no longer be able to use all the functions and features of our website (and your Web browser in general) if cookies are disabled.
    33 	</div>
    34 </div>
    35 <script>getConteneurInfoCookie();</script>
    36 
    37 <!-- FIN - Widget bandeau cookies -->
    


Personnalisation du widget (facultatif)

Il est possible de personnaliser l'apparence de ce widget.

Remarques concernant les extraits de codes :
Les numéros de lignes sont précisés à titre indicatif sur la base des fichiers téléchargés dans l'étape 1 d'intégration. Ces numéros peuvent varier, en fonction des modifications apportées aux fichiers ou du logiciel utilisé pour les éditer.
Les textes entourés de /* ... */ ou <! -- ... --> ou encore // ... // sont des commentaires. Ils sont là pour vous aider dans la compréhension du code. Une partie de code commentée ne sera pas visible sur votre site.

Modifier l'emplacement du bandeau cookies
  • Par défaut, le bandeau cookies est affiché en-tête de votre site. Il est possible de le positionner en pied de page.
    Il faut, pour cela, éditer le fichier "bandeaucookie.css".
    Ouvrez ce fichier (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce fichier, éditez la dernière version pour ne pas perdre vos modifications précédentes. Cherchez, sur la ligne 11, le code "top: 0px;". Modifiez le "top" qui correspond à la position haut par "bottom" qui correspond à la position bas.
    Ensuite, sur la ligne 38, cherchez le code "top: 35px;". Modifiez le "top" qui correspond à la position haut par "bottom" qui correspond à la position bas.

    Enregistrez le fichier (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /bandeaucookie, cliquez sur le bouton "Ajouter", puis sur "Parcourir...". Cherchez le fichier que vous venez de modifier, cliquez sur "Ouvrir" et enfin cliquez sur "OK".

Dans cet exemple, nous avons modifié la position du bandeau en le plaçant en pied de page (modification de la ligne 11 et 38 du fichier bandeaucookie.css) :

11 bottom: 0px; /* top : 0px, pour mettre le bandeau tout en haut / bottom: 0px; pour mettre le bandeau tout en bas */


38 bottom: 35px; /* top : 35px, pour mettre le contenu tout en haut / bottom: 35px; pour mettre le contenu tout en bas */



Éditer les textes
  • Par défaut, le widget Bandeau Cookies est composé des textes suivants :

    - une mention d'information préalable, un lien "En savoir plus", un bouton "OK", des contenus explicatifs complémentaires qui s'affichent à partir du lien "En savoir plus" et un texte "Fermer" au survol du bouton de fermeture des contenus explicatifs, pour la Version Française et la Version Mobile Française.
    - une mention d'information préalable, un lien "Read more", un bouton "OK", des contenus explicatifs complémentaires qui s'affichent à partir du lien "Read more" et un texte "Close" au survol du bouton de fermeture des contenus explicatifs, pour la Version Anglaise et la Version Mobile Anglaise.

    Pour modifier ces textes, il faut éditer le(s) code(s) Version Française/Version Mobile Française et/ou Version Anglaise/Version Mobile Anglaise de l'étape d'intégration. Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" ou "site mobile". Puis cliquez sur le bouton Bt modifier.gif de l'espace promotionnel contenant le code de l'étape d'intégration. Effectuez vos modifications dans l'onglet HTML et cliquez sur "Enregistrer".

N.B. : notez que :
- la mention d'information préalable est présente sur la ligne 6. Modifiez les textes suivants : "En poursuivant votre navigation sur notre site, vous acceptez l’utilisation de cookies afin de nous permettre d’améliorer votre expérience utilisateur." pour la Version Française/Version Mobile Française, et "Pursuing your navigation on our site, you accept the use of cookies to enable us to improve your user experience." pour la Version Anglaise/Version Mobile Anglaise.
- le lien "En savoir plus" est présent sur la ligne 7. Modifiez les 3 "En savoir plus" pour la Version Française/Version Mobile Française, et les 3 "Read more" pour la Version Anglaise/Version Mobile Anglaise.
- le texte du bouton "OK" est présent sur la ligne 8. Modifiez les 2 "OK" pour la Version Française/Version Mobile Française et pour la Version Anglaise/Version Mobile Anglaise.
- les contenus explicatifs complémentaires se trouvent entre la ligne 14 et la ligne 32. Le texte s'affiche une fois que le visiteur a cliqué sur "En savoir plus" pour la Version Française/Version Mobile Française ou "Read more" pour la Version Anglaise/Version Mobile Anglaise.
- le texte "Fermer" est sur la ligne 13. Il apparaît au survol du bouton de fermeture de la page dédiée (croix). Modifiez "Fermer" pour la Version Française/Version Mobile Française, et "Close" pour la Version Anglaise/Version Mobile Anglaise.


Personnaliser le lien "En savoir plus"
  • Par défaut, le lien "En savoir plus" permet d'afficher ou de masquer le contenu explicatif. Il est possible de rediriger ce lien vers une autre page de votre choix.

    Il faut éditer le(s) code(s) de la Version Française/Version Mobile Française et/ou de la Version Anglaise/Version Mobile Anglaise de l'étape d'intégration. Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" ou "site mobile". Puis cliquez sur le bouton Bt modifier.gif de l'espace promotionnel contenant le code de l'étape d'intégration.

    Dans l'onglet HTML, cherchez, sur la ligne 7, le code onclick="getInfosCookie(); return false;" et remplacez-le par href="votrepage.cfm". "votrepage.cfm" correspond à l'URL de la page vers laquelle vous souhaitez rediriger le lien En savoir plus pour la Version Française/Version Mobile Française et Read more pour la Version Anglaise/Version Mobile Anglaise. Cliquez sur "Enregistrer".

Dans cet exemple, nous avons choisi de rediriger notre lien vers la page des Conditions de Vente pour la Version Française/Version Mobile Française et la Version Anglaise/Version Mobile Anglaise :

Francais.gif

/ Iphone ipad fr.jpg

7 <span id="LienInfosCookie"><a href="http://www.ph1.powerboutique.net/L19993/conditions-de-ventes,fr,8,4.cfm#cookie" title="En savoir plus" alt="En savoir plus" target="_blank">En savoir plus</a></span>


Anglais.gif

/ Iphone ipad us.jpg

7 <span id="LienInfosCookie"><a href="http://www.ph1.powerboutique.net/L19993/conditions-de-ventes,fr,8,4.cfm#cookie" title="Read more" alt="Read more" target="_blank">Read more</a></span>



Services d'intégration et de personnalisation des widgets PowerBoutique©

Nos équipes sont à votre disposition pour intervenir depuis l'intégration de ce widget jusqu'à sa personnalisation complète, selon vos besoins et les spécificités de votre site.
Contactez votre consultant e-business pour en savoir plus : cliquez ici.



Cet espace de documentation vise à vous aider dans la personnalisation avancée de votre site PowerBoutique©. L'Assistance Utilisateurs PowerBoutique© ne couvre pas l'utilisation que vous pouvez faire des informations issues de cette documentation. cf. Conditions d'utilisation