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 ou à nous contacter en ouvrant un billet d'assistance ou notre fonction de clavardage en direct.

  • site Web, Website, cookie
  • 7 Utilisateurs l'ont trouvée utile
Cette réponse était-elle pertinente?

Articles connexes

 Un guide complet des systèmes de gestion de contenu (CMS)

Un système de gestion de contenu (CMS) permet la création, la modification et le...

 URL conviviales pour le référencement

L'optimisation des moteurs de recherche (SEO) est le processus qui affecte la...

 Différence entre Single, Multiple et SSL Wildcard

Secure Sockets Layer (également connu sous le nom de SSL) est la norme industrielle connue...

 10 façons de rendre votre site web accessible

Chaque propriétaire de site Web veut attirer autant de visiteurs que...

 Ajout et modification des photos de votre site web

Les premières impressions sont faites en aussi peu que sept secondes. Mais sur votre site...