Inserire il banner per i cookies nel tuo sito :: Iperdigital

Iperdigital > Inserire il banner per i cookies nel tuo sito

10.06.2015 22:01

Oggi vi spieghiamo come inserire un banner carino in alto nel tuo sito per avvisare i tuoi visitatori che per proseguire verranno tempestati di "cookies" come prevede l'inutile normativa europea.

Innanzitutto dovrete trovare un cms, un widget, o uno spazio previsto dal vostro editor nelle pagine del vostro sito dove "incollare" le righe di codice che seguono e dopo verificare se l'indirizzo punti alla pagina dove avete le norme sulla privacy.

<script type='text/javascript'> (function(window) { if (!!window.cookieChoices) { return window.cookieChoices; } var document = window.document; var supportsTextContent = 'textContent' in document.body; var cookieChoices = (function() { var cookieName = 'displayCookieConsent'; var cookieConsentId = 'cookieChoiceInfo'; var dismissLinkId = 'cookieChoiceDismiss'; function _createHeaderElement(cookieText, dismissText, linkText, linkHref) { var butterBarStyles = 'position:absolute;width:100%;background-color:#eee;' + 'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;'; var cookieConsentElement = document.createElement('div'); cookieConsentElement.id = cookieConsentId; cookieConsentElement.style.cssText = butterBarStyles; cookieConsentElement.appendChild(_createConsentText(cookieText)); if (!!linkText && !!linkHref) { cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref)); } cookieConsentElement.appendChild(_createDismissLink(dismissText)); return cookieConsentElement; } function _createDialogElement(cookieText, dismissText, linkText, linkHref) { var glassStyle = 'position:absolute;width:100%;height:100%;z-index:999;' + 'top:0;left:0;opacity:0.5;filter:alpha(opacity=50);' + 'background-color:#ccc;'; var dialogStyle = 'z-index:1000;position:absolute;left:50%;top:50%'; var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' + 'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;'; var cookieConsentElement = document.createElement('div'); cookieConsentElement.id = cookieConsentId; var glassPanel = document.createElement('div'); glassPanel.style.cssText = glassStyle; var content = document.createElement('div'); content.style.cssText = contentStyle; var dialog = document.createElement('div'); dialog.style.cssText = dialogStyle; var dismissLink = _createDismissLink(dismissText); dismissLink.style.display = 'block'; dismissLink.style.textAlign = 'right'; dismissLink.style.marginTop = '8px'; content.appendChild(_createConsentText(cookieText)); if (!!linkText && !!linkHref) { content.appendChild(_createInformationLink(linkText, linkHref)); } content.appendChild(dismissLink); dialog.appendChild(content); cookieConsentElement.appendChild(glassPanel); cookieConsentElement.appendChild(dialog); return cookieConsentElement; } function _setElementText(element, text) { if (supportsTextContent) { element.textContent = text; } else { element.innerText = text; } } function _createConsentText(cookieText) { var consentText = document.createElement('span'); _setElementText(consentText, cookieText); return consentText; } function _createDismissLink(dismissText) { var dismissLink = document.createElement('a'); _setElementText(dismissLink, dismissText); dismissLink.id = dismissLinkId; dismissLink.href = '#'; dismissLink.style.marginLeft = '24px'; return dismissLink; } function _createInformationLink(linkText, linkHref) { var infoLink = document.createElement('a'); _setElementText(infoLink, linkText); infoLink.href = linkHref; infoLink.target = '_blank'; infoLink.style.marginLeft = '8px'; return infoLink; } function _dismissLinkClick() { _saveUserPreference(); _removeCookieConsent(); return false; } function _showCookieConsent(cookieText, dismissText, linkText, linkHref, isDialog) { if (_shouldDisplayConsent()) { _removeCookieConsent(); var consentElement = (isDialog) ? _createDialogElement(cookieText, dismissText, linkText, linkHref) : _createHeaderElement(cookieText, dismissText, linkText, linkHref); var fragment = document.createDocumentFragment(); fragment.appendChild(consentElement); document.body.appendChild(fragment.cloneNode(true)); document.getElementById(dismissLinkId).onclick = _dismissLinkClick; } } function showCookieConsentBar(cookieText, dismissText, linkText, linkHref) { _showCookieConsent(cookieText, dismissText, linkText, linkHref, false); } function showCookieConsentDialog(cookieText, dismissText, linkText, linkHref) { _showCookieConsent(cookieText, dismissText, linkText, linkHref, true); } function _removeCookieConsent() { var cookieChoiceElement = document.getElementById(cookieConsentId); if (cookieChoiceElement != null) { cookieChoiceElement.parentNode.removeChild(cookieChoiceElement); } } function _saveUserPreference() { var expiryDate = new Date(); expiryDate.setFullYear(expiryDate.getFullYear() + 1); document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString(); } function _shouldDisplayConsent() { return !document.cookie.match(new RegExp(cookieName + '=([^;]+)')); } var exports = {}; exports.showCookieConsentBar = showCookieConsentBar; exports.showCookieConsentDialog = showCookieConsentDialog; return exports; })(); window.cookieChoices = cookieChoices; return cookieChoices; })(this); document.addEventListener('DOMContentLoaded', function(event) { cookieChoices.showCookieConsentBar('Questo sito utilizza i cookie per migliorare servizi ed esperienza dei lettori. Se decidi di continuare la navigazione consideriamo che accetti il loro uso.', 'OK', '+Info', 'https://www.iperdigital.com/politica-della-privacy/'); }); </script>

Ovviamente la parte di testo può essere riscritta come meglio preferite, così come il background color, che potete scegliere utilizzando i codici colore previsti dal linguaggio html. Per vederere tutti i codici un'utile risorsa è questo sito.

Duccio