HennWeb

Hier ein einfaches Scriptfür die Cookie Meldung. Wenn Ihr Cookies wie z.B. Google Tracking einsetzt, dann schaut euch den zweiten Teil des Beitrages an.

Die rechtliche Seite solltet ihr bitte trotzdem klären.

1. im Scriptbereich (wahrscheinlich ziemlich am Ende eures Codes) folgendes einfügen

JS

<!-- Cookie Banner www.Hennweb.de -->
<script>
if( document.cookie.indexOf('cookiebanner=1') != -1 ){	// wenn Cookie vorhanden 
	jQuery('#cookie_banner').hide();					// dann Banner ausblenden
} else {
	jQuery('#cookie_banner').prependTo('body');			// an den Body anhängen und anzeigen
}
/* für OK Button - blendet Cookie aus */
function cookie_ok() {
	document.cookie = 'cookiebanner=1;path=/';
	jQuery('#cookie_banner').slideUp();
}
 
/* Reset Button - löscht das Cookie und zeigt das Banner wieder an */
$('#ResetCookie').click(()=>{
	document.cookie = 'cookiebanner' + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';  // delete Cookie 
	jQuery('#cookie_banner').show(); // show Banner
})
</script>
<!-- Cookie Banner -->

2. Am Ende eures html Scripts, aber vor „</body>“ folgenes einfügen:

HTML

<!-- Cookie-Banner by HennWeb.de -->
<div id="cookie_banner" >
	<div class="col-12 text-center">
		<a>Es werden nur für den Betrieb der Seite notwendige Cookies verwendet </a> 
		<a href="datenschutz.php" class="btn btn-secondary btn-sm " role="button" type="button">Datenschutz</a>&nbsp;
		<a type="button" class="btn btn-primary btn-sm " onclick="cookie_ok()">OK</a>
	</div>
</div>
<!-- END Cookie-Banner -->

3. und zum Schluss in die CSS Datei (oder im Header eingebettet in <Style>)

CSS

/* Cookie-Banner by HennWeb.de */
#cookie_banner { 
	background: lightgray;
	position:fixed;
	bottom:0px; 
	z-index:10000; 
	width:100%; 
	opacity: 0.8;
}
/* END Cookie-Banner */

Soll das Cookie wieder sichtbar gemacht werden, dann baut bitte folgenden Reset Button ein:

HTML

<img src="/img/icon/cookie.png" style="height:15px; widht:15px;" id="ResetCookie">
oder
<button type="button" class="btn btn-primary btn-sm" id="ResetCookie" >Reset Cookie</button>

Beim Einsatz von Webanalyse ist es unerlässlich, den Datenschutz Ihrer Webseite regelmäßig zu kontrollieren und aktuell zu halten.

Google Analytics darf nur nach Einwilligung des User benutzt werden.

Dazu muss zusätzlich folgenes Script eingebaut werden:
Wichtig: in gaProperty muss eure Analytics ID eingesetzt werden!

JS

<script type="text/javascript">
/* Google Analytics */
var gaProperty='UA-XXXXXXXXX';			// hier die Google Analytics ID eintragen
 
/* ab hier nichts mehr ändern */
// Function deaktiviert Cookie 
var disableStr='ga-disable-'+gaProperty;
function gaOptout(){
	document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
	window[disableStr]=true;
	//alert('Das Tracking ist jetzt deaktiviert');
}
 
// Analytics akzeptieren
function gaOpton(){
	document.cookie=disableStr+'=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
	window[disableStr]=false;
	// alert('Das Tracking ist jetzt aktiviert');
}
 
// prüfen ob Cookie activ / deactiv ist
if(document.cookie.indexOf(disableStr+'=true')>-1){    // wenn Cookie deaktivert ist, dann nicht Analytics nicht ausführen
	window[disableStr]=true;
}else{
	if (document.cookie.indexOf(disableStr+'=false')>-1){		// Analytics wurde erlaubt
		 var _gaq = _gaq || [];
		_gaq.push(['_setAccount', gaProperty]);
		_gaq.push(['_gat._anonymizeIp']);
		_gaq.push(['_trackPageview']);
		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	};
}
</script>

Obiger Punkt 2 muss durch folgendes ersetzt werden:

HTML

<!-- START Bootstrap-Cookie-Banner -->
<div id="cookie_banner" >
	<div class="col-12 text-center">
		<a>Es werden Cookies für besseren Betrieb der Seite verwendet </a> 
		<a href="datenschutz.php" class="btn btn-secondary btn-sm " role="button" type="button">Datenschutz</a>&nbsp;
		<a href="javascript:gaOptout();" class="btn btn-secondary btn-sm" onclick="cookie_ok()">ohne Cookies</a>
		<a href="javascript:gaOpton();"  class="btn btn-secondary btn-sm" onclick="cookie_ok()">OK</a>
	</div>
</div>
<!-- END Bootstrap-Cookie-Banner -->