
Hier zum Beitrag auch ganz aktuell vom BFDI: https://www.bfdi.bund.de/DE/Infothek/Pressemitteilungen/2019/26_WebtrackingEinwilligung.html
Einrichtung
Diese ist im Video bereits ausgiebig erklärt. Sollten Sie sich dennoch nicht selbst dran trauen, so kann das hier einer unserer Entwickler für Sie übernehmen. Aufwand ca. 15 Minuten. Wenn auch das CSS angepasst werden soll an Ihr CI, dann weitere 15-30 Minuten je nach Wünschen.ACHTUNG! Innerhalb des Codes bitte die "iiiiiiii" durch "i" ersetzen!
Codes:
für T > Seitentexte > Feld 'Cookie Hinweis':#v2#<script>function create2Cookie(typ,value,days){
document.cookie = 'datenschutz_notwendig=; Max-Age=-99999999;';
document.cookie = 'datenschutz_statistiken=; Max-Age=-99999999;';
document.cookie = 'datenschutz_marketing=; Max-Age=-99999999;';
var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));
var expires='; expires='+date.toGMTString();
if(typ=='all'){
$("#cookie2checkboxen :input").each(function(){var name= $(this).attr('name');document.cookie=name+'='+value+expires+'; path=';});}
if(typ=='sel'){
$("#cookie2checkboxen :input").each(function(){var name= $(this).attr('name');var checked = $(this).prop('checked');
if(checked){document.cookie=name+'='+value+expires+'; path=';}
//wenn datenschutz_statistiken ausgeschaltet, dann andere Cookies entfernen:
if(name=='datenschutz_statistiken' && !checked){
var cookieList = (document.cookie) ? document.cookie.split(';') : [];
for (var i = 0, n = cookieList.length; i != n; ++i) {var cookie = cookieList[iiiiiiii];var f = cookie.indexOf('=');if (f >= 0) {
var cookieName = cookie.substring(0, f);if(cookieName.substring(1,4)=='_dc' || cookieName.substring(1,3)=='_g' || cookieName.substring(1,5)=='__cf'){document.cookie = cookieName+'=; Max-Age=-99999999; Domain=.#cookieDomain;';]]
if(name=='datenschutz_marketing' && !checked){
var cookieList = (document.cookie) ? document.cookie.split(';') : [];
for (var i = 0, n = cookieList.length; i != n; ++i) {var cookie = cookieList[iiiiiiii];var f = cookie.indexOf('=');if (f >= 0) {
var cookieName = cookie.substring(0, f);if(cookieName.substring(1,4)=='cto' || cookieName.substring(1,4)=='_fb'){document.cookie = cookieName+'=; Max-Age=-99999999; Domain=.#cookieDomain;';]]
});}
}
function getCookieValue(a) {var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');return b ? b.pop() : '';}
function locationreload(){var ds_aenderung='#ds_aend';if(ds_aenderung!='ja'){location.reload();]
var pg_cookie = window.setInterval(function(){ if(typeof $ != 'undefined'){ window.clearInterval(pg_cookie);
var datenschutz_statistiken_val = getCookieValue("datenschutz_statistiken");
var datenschutz_marketing_val = getCookieValue("datenschutz_marketing");
if(datenschutz_statistiken_val=='1'){$("#datenschutz_statistiken").prop('checked',true);}
if(datenschutz_marketing_val=='1'){$("#datenschutz_marketing").prop('checked',true);}
//$("#cookie2Meldung").addClass("animated slideInDown");
$("#clickcookiedetails").click(function() { $(".cookie2details").show();$("#clickcookiedetailsa").show();$("#clickcookiedetails").hide(); });
$("#clickcookiedetailsa").click(function() { $(".cookie2details").hide();$("#clickcookiedetailsa").hide();$("#clickcookiedetails").show(); });
],10);
</script>
<style>
#cookie2Wrapper {width: 100%;position: fixed;z-index: 10001;left: 50%;transform: translate(-50%,0);top:0;} /*bottom: 0;*/
#cookie2Meldung {background: rgb(255,255,255);text-align:center;width:50%;min-width: 350px;box-sizing:border-box;margin: 0 auto;z-index:100000;width:100%;text-align:center;max-width: 500px;padding-bottom: 1rem;box-shadow: 0 1px 5px 5px rgba(0,0,0,0.2);}
#cookie2Meldung p {font-size:12px;padding-right: 20px;padding-left: 20px;}
#cookie2Hinweis{display:inline;margin-right:50px;font-size:1em;padding-right: 20px;padding-left: 20px;}
#cookie2title{background-color:rgb(222,222,222);padding: 1em;color:rgb(0,0,0);}
.cookie2links {font-size:0.9em;cursor:pointer;margin-left: 4%;margin-right: 4%;}
.cookie2Buttons{background-color:#BBBBBB;cursor:pointer;padding:8px 8px;text-decoration:none;border-radius: 5px;width: 100%;text-align: center;color:white;}
.cookie2ButtonOK{background: rgb(0,113,113)!important;}
.cookie2type {height: 26px;line-height: 26px;display: inline-block;margin-right: 10px;white-space: nowrap;}
.cookie2typed {color:#BBB;}
.cookie2details {font-size: 0.8em;margin-bottom:1em;padding-right: 20px;padding-left: 20px;display:none;}
#clickcookiedetailsa{display:none;}
@media (max-width: 890px) {
#cookie2Meldung {width: 80%;}
#cookie2Meldung .cookie2Buttons {font-size:1em;padding: 15px 20px}
}
@media (max-width: 760px) {
#cookie2Meldung p {font-size:0.8em;}
#cookie2Wrapper {transform: none!important;left: 0!important;}
#cookie2Meldung {width: 100%;min-width: 95%;}
#cookie2Meldung a:last-child:after {width:40px;height:40px;background-size: 40px;}
}
</style>
<div id=cookie2Wrapper><div id=cookie2Meldung><div id=cookie2title><b>Datenschutzeinstellungen</b></div>
<div id=cookie2Hinweis>
<p>Wir nutzen Cookies in unserem Shop. Einige sind notwendig, während andere uns helfen, den Shop und die Besuchererfahrungen zu verbessern. Bitte wählen Sie nachfolgend, welche Cookies gesetzt werden dürfen, und bestätigen Sie dies durch "Auswahl bestätigen" oder akzeptieren Sie alle Cookies durch "alle auswählen":</p>
<div style="margin-top:10px;" id=cookie2checkboxen>
<span class=cookie2type title="Cookies, die für die Grundfunktionen unseres Shops notwendig sind (z.B. Navigation, Warenkorb, Kundenkonto).">
<input type=checkbox name=datenschutz_notwendig id=datenschutz_notwendig value=1 checked=checked disabled=disabled>
<label for=datenschutz_notwendig class=cookie2typed>Notwendig</label>
</span>
<div class=cookie2details>Cookies, die für die Grundfunktionen unseres Shops notwendig sind (z.B. Navigation, Warenkorb, Kundenkonto).</div>
<span class=cookie2type title="Cookies, über die wir Informationen zur Art und Weise der Nutzung unseres Shops sammeln. Mit deren Hilfe können wir den Einkauf für Sie weiter optimieren. Beispiel-Anwendung: Google-Analytics.">
<input type="checkbox" name=datenschutz_statistiken id=datenschutz_statistiken value=1>
<label for=datenschutz_statistiken>Statistiken</label>
</span>
<div class=cookie2details>Cookies, über die wir Informationen zur Art und Weise der Nutzung unseres Shops sammeln. Mit deren Hilfe können wir den Einkauf für Sie weiter optimieren. Beispiel-Anwendung: Google-Analytics.</div>
<span class="cookie2type" title="Über Marketing-Cookies wird es uns ermöglicht, den Inhalt auf unserer Website aber auch die Werbung auf Drittseiten möglichst relevant für Sie zu gestalten. Bitte beachten Sie, dass Daten hierfür teilweise an Dritte übertragen werden. Beispiel-Anwendungen: Criteo oder Facebook.">
<input type=checkbox name=datenschutz_marketing id=datenschutz_marketing value=1>
<label for=datenschutz_marketing>Marketing</label>
</span>
<div class=cookie2details>Über Marketing-Cookies wird es uns ermöglicht, den Inhalt auf unserer Website aber auch die Werbung auf Drittseiten möglichst relevant für Sie zu gestalten. Bitte beachten Sie, dass Daten hierfür teilweise an Dritte übertragen werden. Beispiel-Anwendungen: Criteo oder Facebook.</div>
</div>
<div>
<div style="display: inline-flex;width: 90%;"><input type=text value='Auswahl bestätigen' style="margin-top:10px;" class='cookie2Buttons' onclick="create2Cookie('sel','1',3600);document.getElementById('cookie2Wrapper').style.display = 'none';locationreload();"></div>
<div style="display: inline-flex;width: 90%;"><input type=text value='alle auswählen' style="margin-top:10px;" class='cookie2Buttons cookie2ButtonOK' onclick="create2Cookie('all','1',3600);document.getElementById('cookie2Wrapper').style.display = 'none';locationreload();"></div>
</div>
<br><a id=clickcookiedetails><u class=cookie2links>Cookie Details</u></a><a id=clickcookiedetailsa><u class=cookie2links>Cookie Details ausblenden</u></a><br><br><a href="Datenschutz.html"><u class=cookie2links>Datenschutz</u></a> <a href="Impressum.html"><u class=cookie2links>Impressum</u></a> <a href="AGB.html"><u class=cookie2links>AGB</u></a><br>
</div></div></div>
document.cookie = 'datenschutz_notwendig=; Max-Age=-99999999;';
document.cookie = 'datenschutz_statistiken=; Max-Age=-99999999;';
document.cookie = 'datenschutz_marketing=; Max-Age=-99999999;';
var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));
var expires='; expires='+date.toGMTString();
if(typ=='all'){
$("#cookie2checkboxen :input").each(function(){var name= $(this).attr('name');document.cookie=name+'='+value+expires+'; path=';});}
if(typ=='sel'){
$("#cookie2checkboxen :input").each(function(){var name= $(this).attr('name');var checked = $(this).prop('checked');
if(checked){document.cookie=name+'='+value+expires+'; path=';}
//wenn datenschutz_statistiken ausgeschaltet, dann andere Cookies entfernen:
if(name=='datenschutz_statistiken' && !checked){
var cookieList = (document.cookie) ? document.cookie.split(';') : [];
for (var i = 0, n = cookieList.length; i != n; ++i) {var cookie = cookieList[iiiiiiii];var f = cookie.indexOf('=');if (f >= 0) {
var cookieName = cookie.substring(0, f);if(cookieName.substring(1,4)=='_dc' || cookieName.substring(1,3)=='_g' || cookieName.substring(1,5)=='__cf'){document.cookie = cookieName+'=; Max-Age=-99999999; Domain=.#cookieDomain;';]]
if(name=='datenschutz_marketing' && !checked){
var cookieList = (document.cookie) ? document.cookie.split(';') : [];
for (var i = 0, n = cookieList.length; i != n; ++i) {var cookie = cookieList[iiiiiiii];var f = cookie.indexOf('=');if (f >= 0) {
var cookieName = cookie.substring(0, f);if(cookieName.substring(1,4)=='cto' || cookieName.substring(1,4)=='_fb'){document.cookie = cookieName+'=; Max-Age=-99999999; Domain=.#cookieDomain;';]]
});}
}
function getCookieValue(a) {var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');return b ? b.pop() : '';}
function locationreload(){var ds_aenderung='#ds_aend';if(ds_aenderung!='ja'){location.reload();]
var pg_cookie = window.setInterval(function(){ if(typeof $ != 'undefined'){ window.clearInterval(pg_cookie);
var datenschutz_statistiken_val = getCookieValue("datenschutz_statistiken");
var datenschutz_marketing_val = getCookieValue("datenschutz_marketing");
if(datenschutz_statistiken_val=='1'){$("#datenschutz_statistiken").prop('checked',true);}
if(datenschutz_marketing_val=='1'){$("#datenschutz_marketing").prop('checked',true);}
//$("#cookie2Meldung").addClass("animated slideInDown");
$("#clickcookiedetails").click(function() { $(".cookie2details").show();$("#clickcookiedetailsa").show();$("#clickcookiedetails").hide(); });
$("#clickcookiedetailsa").click(function() { $(".cookie2details").hide();$("#clickcookiedetailsa").hide();$("#clickcookiedetails").show(); });
],10);
</script>
<style>
#cookie2Wrapper {width: 100%;position: fixed;z-index: 10001;left: 50%;transform: translate(-50%,0);top:0;} /*bottom: 0;*/
#cookie2Meldung {background: rgb(255,255,255);text-align:center;width:50%;min-width: 350px;box-sizing:border-box;margin: 0 auto;z-index:100000;width:100%;text-align:center;max-width: 500px;padding-bottom: 1rem;box-shadow: 0 1px 5px 5px rgba(0,0,0,0.2);}
#cookie2Meldung p {font-size:12px;padding-right: 20px;padding-left: 20px;}
#cookie2Hinweis{display:inline;margin-right:50px;font-size:1em;padding-right: 20px;padding-left: 20px;}
#cookie2title{background-color:rgb(222,222,222);padding: 1em;color:rgb(0,0,0);}
.cookie2links {font-size:0.9em;cursor:pointer;margin-left: 4%;margin-right: 4%;}
.cookie2Buttons{background-color:#BBBBBB;cursor:pointer;padding:8px 8px;text-decoration:none;border-radius: 5px;width: 100%;text-align: center;color:white;}
.cookie2ButtonOK{background: rgb(0,113,113)!important;}
.cookie2type {height: 26px;line-height: 26px;display: inline-block;margin-right: 10px;white-space: nowrap;}
.cookie2typed {color:#BBB;}
.cookie2details {font-size: 0.8em;margin-bottom:1em;padding-right: 20px;padding-left: 20px;display:none;}
#clickcookiedetailsa{display:none;}
@media (max-width: 890px) {
#cookie2Meldung {width: 80%;}
#cookie2Meldung .cookie2Buttons {font-size:1em;padding: 15px 20px}
}
@media (max-width: 760px) {
#cookie2Meldung p {font-size:0.8em;}
#cookie2Wrapper {transform: none!important;left: 0!important;}
#cookie2Meldung {width: 100%;min-width: 95%;}
#cookie2Meldung a:last-child:after {width:40px;height:40px;background-size: 40px;}
}
</style>
<div id=cookie2Wrapper><div id=cookie2Meldung><div id=cookie2title><b>Datenschutzeinstellungen</b></div>
<div id=cookie2Hinweis>
<p>Wir nutzen Cookies in unserem Shop. Einige sind notwendig, während andere uns helfen, den Shop und die Besuchererfahrungen zu verbessern. Bitte wählen Sie nachfolgend, welche Cookies gesetzt werden dürfen, und bestätigen Sie dies durch "Auswahl bestätigen" oder akzeptieren Sie alle Cookies durch "alle auswählen":</p>
<div style="margin-top:10px;" id=cookie2checkboxen>
<span class=cookie2type title="Cookies, die für die Grundfunktionen unseres Shops notwendig sind (z.B. Navigation, Warenkorb, Kundenkonto).">
<input type=checkbox name=datenschutz_notwendig id=datenschutz_notwendig value=1 checked=checked disabled=disabled>
<label for=datenschutz_notwendig class=cookie2typed>Notwendig</label>
</span>
<div class=cookie2details>Cookies, die für die Grundfunktionen unseres Shops notwendig sind (z.B. Navigation, Warenkorb, Kundenkonto).</div>
<span class=cookie2type title="Cookies, über die wir Informationen zur Art und Weise der Nutzung unseres Shops sammeln. Mit deren Hilfe können wir den Einkauf für Sie weiter optimieren. Beispiel-Anwendung: Google-Analytics.">
<input type="checkbox" name=datenschutz_statistiken id=datenschutz_statistiken value=1>
<label for=datenschutz_statistiken>Statistiken</label>
</span>
<div class=cookie2details>Cookies, über die wir Informationen zur Art und Weise der Nutzung unseres Shops sammeln. Mit deren Hilfe können wir den Einkauf für Sie weiter optimieren. Beispiel-Anwendung: Google-Analytics.</div>
<span class="cookie2type" title="Über Marketing-Cookies wird es uns ermöglicht, den Inhalt auf unserer Website aber auch die Werbung auf Drittseiten möglichst relevant für Sie zu gestalten. Bitte beachten Sie, dass Daten hierfür teilweise an Dritte übertragen werden. Beispiel-Anwendungen: Criteo oder Facebook.">
<input type=checkbox name=datenschutz_marketing id=datenschutz_marketing value=1>
<label for=datenschutz_marketing>Marketing</label>
</span>
<div class=cookie2details>Über Marketing-Cookies wird es uns ermöglicht, den Inhalt auf unserer Website aber auch die Werbung auf Drittseiten möglichst relevant für Sie zu gestalten. Bitte beachten Sie, dass Daten hierfür teilweise an Dritte übertragen werden. Beispiel-Anwendungen: Criteo oder Facebook.</div>
</div>
<div>
<div style="display: inline-flex;width: 90%;"><input type=text value='Auswahl bestätigen' style="margin-top:10px;" class='cookie2Buttons' onclick="create2Cookie('sel','1',3600);document.getElementById('cookie2Wrapper').style.display = 'none';locationreload();"></div>
<div style="display: inline-flex;width: 90%;"><input type=text value='alle auswählen' style="margin-top:10px;" class='cookie2Buttons cookie2ButtonOK' onclick="create2Cookie('all','1',3600);document.getElementById('cookie2Wrapper').style.display = 'none';locationreload();"></div>
</div>
<br><a id=clickcookiedetails><u class=cookie2links>Cookie Details</u></a><a id=clickcookiedetailsa><u class=cookie2links>Cookie Details ausblenden</u></a><br><br><a href="Datenschutz.html"><u class=cookie2links>Datenschutz</u></a> <a href="Impressum.html"><u class=cookie2links>Impressum</u></a> <a href="AGB.html"><u class=cookie2links>AGB</u></a><br>
</div></div></div>
für Layout > Kopf/Fuß > Feld Fußbereich:
<li>
<a rel="nofollow" href="Datenschutz.html?Datenschutzeinstellungen=1">Datenschutzeinstellungen</a>
</li>
<a rel="nofollow" href="Datenschutz.html?Datenschutzeinstellungen=1">Datenschutzeinstellungen</a>
</li>
für Sonstiges > Sonstige Einstellungen > Feld Javascript/Head:
<!-- Abhängig von den Datenschutzeinstellungen -->
#wenn_datenschutz_statistiken#
<!-- Google Tag Manager --><script>//mein javascript Code, bla bla..</script><!-- End Google Tag Manager -->
#wenn_datenschutz_statistiken_ende#
#wenn_datenschutz_marketing#
<!-- Fötzbök Code --><script>//mein javascript Code, bla bla..</script><!-- Fötzbök Code -->
#wenn_datenschutz_marketing_ende#
#wenn_datenschutz_statistiken#
<!-- Google Tag Manager --><script>//mein javascript Code, bla bla..</script><!-- End Google Tag Manager -->
#wenn_datenschutz_statistiken_ende#
#wenn_datenschutz_marketing#
<!-- Fötzbök Code --><script>//mein javascript Code, bla bla..</script><!-- Fötzbök Code -->
#wenn_datenschutz_marketing_ende#