Trouvez des réponses à vos questions

Documentation

Comment ajouter une barre de cookies

Presque tous les sites utilisent des cookies (des fichiers de données) pour stocker des informations dans les navigateurs Web. Certains sites Web en contiennent des centaines. En mai 2011, de nombreux pays européens ont adopté ce qu'on appelle une Loi de Cookie. La loi sur les cookies est une loi sur la protection de la vie privée qui exige que les sites Web obtiennent le consentement des visiteurs pour stocker ou récupérer des informations sur un ordinateur, un smartphone ou une tablette. Il a été conçu pour protéger la vie privée en ligne, en sensibilisant les consommateurs à la manière dont les informations les concernant sont collectées et utilisées en ligne, et leur donne le choix de le permettre ou non.

Si votre site Web a des consommateurs européens, vous êtes tenu par la loi d'avoir une barre de cookies pour les avertir. Heureusement, il existe un script simple qui peut être ajouté à n'importe quel site Web afin d'ajouter une barre de cookies. Développé par Cookie Info Script, le code suivant est une solution simple pour se conformer à la loi européenne sur les cookies et nécessite une compréhension très basique de la programmation.

 <script type="texte/javascript" id="cookieinfo"
     src="//cookieinfoscript.com/js/cookieinfo.min.js">
 </script>

Ajoutez le code juste avant la balise de fermeture </body> dans votre site Web, dans votre fichier footer.tpl

Le code affichera une bannière flottante au bas du site informant l'utilisateur que le site utilise des cookies et leur donnera un lien vers un autre site Web avec plus d'informations sur les cookies. Lorsque l'utilisateur clique sur le bouton "✖", la bannière va définir un cookie en se souvenant que la bannière a été reconnue afin que le même utilisateur ne soit plus dérangé.

Personnalisation

Le script est hautement personnalisable, vous donnant la liberté de créer une barre de cookies qui s'intègre facilement dans votre site Web. Ajoutez simplement les attributs de données suivants après le code source (src):

  • data-font-size - taille du texte du message et du lien (par défaut: 14px)
  • data-font-family - Famille de police du message et du lien (par défaut: verdana, arial, sans-serif)
  • data-text-align - position du texte (par défaut: centre)
  • data-height - hauteur de la bannière (par défaut: 31 pixels)
  • data-fg - couleur du texte de la bannière (par défaut: # 333)
  • data-bg - couleur d'arrière-plan de la bannière (par défaut: #eee)
  • data-link - couleur du texte du lien (par défaut: # 31A8F0)
  • data-divlink - couleur du texte du bouton (par défaut: # 000)
  • data-divlinkbg - couleur d'arrière-plan du bouton (par défaut: # F1D600)
  • data-position - position de la bannière, haut ou bas (par défaut: bas)
  • data-message - text du message (défaut: Nous utilisons des cookies pour améliorer votre expérience. En continuant à visiter ce site, vous acceptez notre utilisation des cookies.)
  • data-linkmsg - texte du lien (par défaut: Plus d'infos)
  • data-moreinfo - où le visiteur peut en savoir plus sur les cookies (par défaut: https://wikipedia.org/wiki/HTTP_cookie
  • data-close-text - le texte/symbole du bouton de fermeture (par défaut: ✖)
  • data-effect - effet à utiliser (par défaut: null)
  • data-cookie - nom du cookie pour stocker les informations d'acceptation cookiebanner (par défaut: we-love-cookies)
  • data-expires - date/heure d'expiration du cookie (par défaut, Infinity alias "Ven, 31 Dec 9999 23:59:59 GMT").
  • data-cookie-path - Chemin à définir pour le cookie
  • data-mask - s'il faut créer un masque sur la fenêtre (par défaut: false). Cliquer n'importe où sur le masque est considéré comme une acceptation.
  • data-mask-opacity - l'opacité à utiliser pour le masque de fenêtre (par défaut: 0.5)
  • data-mask-background - style d'arrière-plan facultatif que vous souhaitez appliquer au masque (par défaut: # 999)
  • data-zindex - z-index à définir sur l'avis (par défaut: 255). Si masque est utilisé, l'index z de l'avis est automatiquement incrémenté de 1 pour apparaître au-dessus du masque)
  • data-accept-on-scroll - quand est défini true le défilement de la fenêtre est considéré comme acceptation. (par défaut: false)
  • data-tracking - Suivi du pixel (par défaut: Off - Pour activer, vous devrez entrer une url ou un script de suivi (image) Exemple: http://www.votredomaine.com/tracking.php?pixel)


Le code résultant pourrait ressembler à ceci:

 <script type="texte/javascript" id="cookieinfo"
     src="/widgets/cookieinfo.min.js"
     data-message="Nous utilisons des cookies pour une meilleure expérience utilisateur. En continuant à visiter ce site, vous acceptez notre utilisation de cookies."
     data-linkmsg="Plus d'infos"
     data-moreinfo="My-Cookie-Policy.html"
     data-cookie="choisissez-votre-nom-de-cookie"
 </script> 


Si vous voulez en savoir plus sur la loi sur les cookies de l'UE, visitez https://www.cookielaw.org/the-cookie-law/

Pour plus d'informations, n'hésitez pas à visiter le site officiel de Cookie Info Script.

Pour obtenir de l’aide concernant un service Nuagerie, ouvrez une demande d’assistance ou faites-en le suivi depuis votre espace client. Pour toute question générale, utilisez notre formulaire de contact.

Related Articles

Un guide complet des systèmes de gestion de contenu (CMS) Un système de gestion de contenu (CMS) permet à une équipe d’organiser, de modifier et de publier le contenu d’un site au moyen d’une interface d’administration. Son choix doit tenir compte du fonctionnement après le lancement : qui publie, comment les changements sont vérifiés et qui entretient le logiciel. Partez... URL conviviales pour le référencement L'optimisation des moteurs de recherche (SEO) est le processus qui affecte la visibilité en ligne d'un site Web ou d'une page Web dans les résultats impayés d'un moteur de recherche Web. En règle générale, plus le site Web est classé sur un moteur de recherche tel que Google, plus il reçoit de visiteurs de la part... Choisir un certificat SSL/TLS pour vos noms de domaine Un certificat adapté permet à vos visiteurs d’utiliser HTTPS sur les adresses de votre site. Le terme « certificat SSL » reste courant, mais les connexions modernes utilisent TLS. HTTPS protège les données pendant leur transport et permet de vérifier que le certificat présenté correspond au nom demandé. Il ne... 10 façons de rendre votre site web accessible L’accessibilité aide les personnes à lire votre contenu, à naviguer et à accomplir leurs tâches avec différents appareils et technologies d’assistance. Commencez par les parcours utiles à vos clients : trouver un service, demander une soumission ou gérer un compte. Les dix vérifications suivantes permettent de... Ajout et modification des photos de votre site web Une image utile aide le visiteur à comprendre un produit, un service ou une consigne. Sa préparation dépasse la retouche : le cadrage doit convenir aux écrans, le fichier doit être adapté à la diffusion et l’information essentielle doit rester accessible aux personnes qui ne voient pas l’image. Suivez cette démarche...