Richtlinie zur Zustimmung der Nutzer in der EU

[heinrich]

Das geht nicht so einfach im Code, sondern da musst du z.B. über css den container definieren, wo deine Infos rein sollen, wobei man natürlich @media spezifizieren solltest, damit das auch in Mobles funktioniert!

[Hulkster]

OK, dann muss ich mich wohl da durcharbeiten, danke.

[heinrich]

OK, dann muss ich mich wohl da durcharbeiten, danke.

Das alles ersparst du dir, wenn du den von mir genannten Download nutzt und nur die styles anpasst, die du brauchst! Dann den script-Aufruf auf alle Seiten in den Header und fertig!
Wenn man deren Wizard nutzt, dann braucht man das nicht einmal auf seinem Server installieren, aber ich hab lieber die Kontrolle über meine Daten und Scripts! Was ich gut finde ist die Möglichkeit, dass das OK dann für alle Seiten eines Servers gilt!

[Hanzo2012]

Was ich gut finde ist die Möglichkeit, dass das OK dann für alle Seiten eines Servers gilt!

Wie funktioniert das technisch?
Und ist das rechtlich OK? Woher soll der Nutzer wissen, dass zwei Seiten, die er besucht, auf demselben Server gehostet sind?

[Melegrian]

Ich bleibe lieber bei dem Google Code. Wie gesagt, ich würde den Google Code gerne nehmen, möchte aber, dass die Leiste unten gezeigt wird. Weiss jemand, was man bei diesem Script Code da einfügen muss?

<script src="/cookiechoices.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
cookieChoices.showCookieConsentBar('Your message for visitors here',
'close message', 'learn more', 'https://example.com');
});
</script>

Die Styles sind in der Datei "/cookiechoices.js" enthalten und sollten sich leicht anpassen lassen. Die müsstest Du Dir nur herunterladen, so lange noch der Link zum Download im Cache vorhanden ist. Auch mit position:fixed, ganz nebenbei bemerkt.

Code: Alles auswählen

var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';

[heinrich]

Wie funktioniert das technisch?
Und ist das rechtlich OK? Woher soll der Nutzer wissen, dass zwei Seiten, die er besucht, auf demselben Server gehostet sind?

War vielleicht etwas ungenau: Indem man die Domain in das Script eingibt, für die das OK gekommen ist. Dann wird der Hinweis für diese Domain nicht mehr angezeigt. Ich denke nicht, dass man den Hinweis auf jeder einzelnen Seite einer Domain geben muss! Dann kommt der Nutzer ja nicht mehr aus dem Wegklicken heraus ...

[Melegrian]

Indem man die Domain in das Script eingibt, für die das OK gekommen ist. Dann wird der Hinweis für diese Domain nicht mehr angezeigt. Ich denke nicht, dass man den Hinweis auf jeder einzelnen Seite einer Domain geben muss! Dann kommt der Nutzer ja nicht mehr aus dem Wegklicken heraus ...

Ob mein Beispiel oder wie in dem Script mit der cookiechoices.js, es wird ja bei OK ein Cookie gesetzt und ein Cookie ist dann für die ganze Domain gültig, falls keine Begrenzung für einzelne Verzeichnisse vorgenommen wird. Jedoch halt nur für die Domain und für die eingegebene Zeit. So lange das Cookie gültig ist, erfolgt keine weitere Einblendung. Ein Cookie ist immer für die Domain gültig, unter welcher das Script liegt bzw. unter der das Script ausgeführt und ein Cookie gesetzt wurde.

Bei dem anderen Script mit der cookieconsent.js werden wohl gleich zwei Cookies gesetzt.

[Hanzo2012]

War vielleicht etwas ungenau: Indem man die Domain in das Script eingibt, für die das OK gekommen ist. Dann wird der Hinweis für diese Domain nicht mehr angezeigt. Ich denke nicht, dass man den Hinweis auf jeder einzelnen Seite einer Domain geben muss! Dann kommt der Nutzer ja nicht mehr aus dem Wegklicken heraus ...

Ja, das ist klar, aber du hattest ja von Server gesprochen, nicht Domain.

[Hulkster]

[quote="Melegrian"][quote="Hulkster"]Ich bleibe lieber bei dem Google Code. Wie gesagt, ich würde den Google Code gerne nehmen, möchte aber, dass die Leiste unten gezeigt wird. Weiss jemand, was man bei diesem Script Code da einfügen muss?

Code: Alles auswählen

(function(window) { 

if (!!window.cookieChoices) { 
return window.cookieChoices; 
} 

var document = window.document; 
// IE8 does not support textContent, so we should fallback to innerText. 
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:fixed;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:fixed;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:fixed;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() { 
// Set the cookie expiry to one year after today. 
var expiryDate = new Date(); 
expiryDate.setFullYear(expiryDate.getFullYear() + 1); 
document.cookie = cookieName + '=y; expires=' + expiryDate.toGMTString(); 
} 

function _shouldDisplayConsent() { 
// Display the header only if the cookie has not been set. 
return !document.cookie.match(new RegExp(cookieName + '=([^;]+)')); 
} 

var exports = {}; 
exports.showCookieConsentBar = showCookieConsentBar; 
exports.showCookieConsentDialog = showCookieConsentDialog; 
return exports; 
})(); 

window.cookieChoices = cookieChoices; 
return cookieChoices; 
})(this); 

Wo genau muss ich hier die Änderungen vornehmen?

[heinrich]

Bei dem anderen Script mit der cookieconsent.js werden wohl gleich zwei Cookies gesetzt.

Finde ich ohnehin pikant, dass man um eine Cookie-Warnung loszuwerden ein Cookie akzeptieren muss

[Hanzo2012]

Es geht ja um Cookies, die persönliche Informationen bzw. eindeutige IDs enthalten. Ein Cookie, das bei jedem Besucher immer nur "1" enthält, ist in jeder Hinsicht harmlos.

[Melegrian]

Wo genau muss ich hier die Änderungen vornehmen?

Warum setzt Du denn das nicht in

Code: Alles auswählen

 ... 

damit man etwas erkennen kann. Ich habe es ja selbst nicht einmal getestet, weil ich mir meistens nur das Innenleben von den Dateien anschaue.
Aber Du hast doch zwei Script-Schnipsel zum Einbinden, einmal mit showCookieConsentDialog und einmal mit showCookieConsentBar.
Und es sind doch nicht mehr Styles enthalten als butterBarStyles, glassStyle, dialogStyle und contentStyle. Du musst nur aufpassen, dass Dir keine Fehler bei der Syntax unterlaufen, sonst funktioniert weder CSS noch JavaScript. Somit die Syntax von beiden beachten.

[Hulkster]

Wo genau muss ich hier die Änderungen vornehmen?

Warum setzt Du denn das nicht in

Code: Alles auswählen

 ... 

damit man etwas erkennen kann. Ich habe es ja selbst nicht einmal getestet, weil ich mir meistens nur das Innenleben von den Dateien anschaue.
Aber Du hast doch zwei Script-Schnipsel zum Einbinden, einmal mit showCookieConsentDialog und einmal mit showCookieConsentBar.
Und es sind doch nicht mehr Styles enthalten als butterBarStyles, glassStyle, dialogStyle und contentStyle. Du musst nur aufpassen, dass Dir keine Fehler bei der Syntax unterlaufen, sonst funktioniert weder CSS noch JavaScript. Somit die Syntax von beiden beachten.

Habe es nun in Code gesetzt. Alles was ich hier ändern möchte ist, dass die Leiste nicht oben erscheint, sondern unten.

[Melegrian]

Und was passiert, wenn Du beide top:0; in bottom:0; umschreibst?

Code: Alles auswählen

      var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
          'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';

...
...

      var glassStyle = 'position:fixed;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:fixed;left:50%;top:50%';
      var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
          'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';

So, nun habe ich es ausprobiert, wenn Du den Schnipsel mit showCookieConsentBar verwenden möchtest, brauchst Du nur in der Zeile top in bottom wandeln.

Code: Alles auswählen

      var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
          'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';

[Hulkster]

Und was passiert, wenn Du beide top:0; in bottom:0; umschreibst?

Code: Alles auswählen

      var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
          'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';

...
...

      var glassStyle = 'position:fixed;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:fixed;left:50%;top:50%';
      var contentStyle = 'position:relative;left:-50%;margin-top:-25%;' +
          'background-color:#fff;padding:20px;box-shadow:4px 4px 25px #888;';

So, nun habe ich es ausprobiert, wenn Du den Schnipsel mit showCookieConsentBar verwenden möchtest, brauchst Du nur in der Zeile top in bottom wandeln.

Code: Alles auswählen

      var butterBarStyles = 'position:fixed;width:100%;background-color:#eee;' +
          'margin:0; left:0; top:0;padding:4px;z-index:1000;text-align:center;';

Hat geklappt, vielen Dank! Komischer weise wird die Infobar jedoch nicht mobil angezeigt.