Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:bootstrap:snippets:cookie [11/05/2020 15:29] – conny
+++ programmieren:bootstrap:snippets:cookie [Unbekanntes Datum] (aktuell) – Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
-==== einfaches Cookie Banner für Boostrap ====
-https://github.com/Wruczek/Bootstrap-Cookie-Alert/blob/gh-pages/cookiealert.js
 ===== einfaches Script für Cookie Banner ======
-Hier ein einfaches Script um die Cookie Meldung an zuzeigen.
+Hier ein einfaches Scriptfür die Cookie Meldung.
-Es enthält auch die Möglichkeit ohne Google Cooies weiter zu machen.
+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.
-Google Analytics & Google Conversion Tracking
+{{programmieren:bootstrap:snippets:cookie_scr.png}}
 . im Scriptbereich (wahrscheinlich ziemlich am Ende eures Codes) folgendes einfügen
-<code | download>
+<code java| JS>
 <!-- Cookie Banner www.Hennweb.de -->
 <script>
@@ Zeile 21: / Zeile 18: @@
 	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(()=>{
@@ Zeile 30: / Zeile 33: @@
 </code>
-. Am Ende eures Scripts, aber vor "</body>" folgenes einfügen:
+. Am Ende eures html Scripts, aber vor "</body>" folgenes einfügen:
-<code | download>
+<code php| HTML>
 <!-- Cookie-Banner by HennWeb.de -->
 <div id="cookie_banner" >
@@ Zeile 37: / Zeile 40: @@
 		<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 href="javascript:gaOptout();" class="btn btn-secondary btn-sm " onclick="alert('Google Analytics wurde deaktiviert');">ohne Cookies</a>
+		<a type="button" class="btn btn-primary btn-sm " onclick="cookie_ok()">OK</a>
-		<button type="button" class="btn btn-primary btn-sm " onclick="document.cookie = 'cookiebanner=1;path=/';jQuery('#cookie_banner').slideUp()">OK</button>
 	</div>
 </div>
@@ Zeile 45: / Zeile 47: @@
 . und zum Schluss in die CSS Datei (oder im Header eingebettet in <Style>)
-<code | download>
+<code css| CSS>
 /* Cookie-Banner by HennWeb.de */
 #cookie_banner {
@@ Zeile 58: / Zeile 60: @@
 </code>
-Wenn Ihr kein Google Analytics benutzt, dann löscht im HTML Teil folgende Zeile:
+Soll das Cookie wieder sichtbar gemacht werden, dann baut bitte folgenden Reset Button ein:
-<code | download>
+<code php| HTML>
-<a href="javascript:gaOptout();" class="btn btn-secondary btn-sm " onclick="alert('Google Analytics wurde deaktiviert');">ohne Cookies</a>
+<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>
 </code>
@@ Zeile 69: / Zeile 73: @@
 Google Analytics darf nur nach Einwilligung des User benutzt werden.
-Dazu ist folgenes Script einzubauen:
+{{programmieren:bootstrap:snippets:cookie_scr2.png}}
+Dazu muss zusätzlich folgenes Script eingebaut werden:
 \\
 Wichtig: in  gaProperty muss eure Analytics ID eingesetzt werden! \\
 \\
-<code | download>
+<code java| JS>
 <script type="text/javascript">
 /* Google Analytics */
@@ Zeile 81: / Zeile 87: @@
 // Function deaktiviert Cookie
 var disableStr='ga-disable-'+gaProperty;
-function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
+function gaOptout(){
-	window[disableStr]=true;alert('Das Tracking ist jetzt deaktiviert');
+	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');
 }
@@ Zeile 89: / Zeile 104: @@
 	window[disableStr]=true;
 }else{
-	 var _gaq = _gaq || [];
+	if (document.cookie.indexOf(disableStr+'=false')>-1){		// Analytics wurde erlaubt
-	_gaq.push(['_setAccount', gaProperty]);
+		 var _gaq = _gaq || [];
-	_gaq.push(['_gat._anonymizeIp']);
+		_gaq.push(['_setAccount', gaProperty]);
-	_gaq.push(['_trackPageview']);
+		_gaq.push(['_gat._anonymizeIp']);
-	(function() {
+		_gaq.push(['_trackPageview']);
-		var ga = document.createElement('script');
+		(function() {
-		ga.type = 'text/javascript';
+			var ga = document.createElement('script');
-		ga.async = true;
+			ga.type = 'text/javascript';
-		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+			ga.async = true;
-		var s = document.getElementsByTagName('script')[0];
+			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-		s.parentNode.insertBefore(ga, s);
+			var s = document.getElementsByTagName('script')[0];
-	})();
+			s.parentNode.insertBefore(ga, s);
+		})();
+	};
 }
 </script>
+</code>
+Obiger Punkt 2 muss durch folgendes ersetzt werden:
+<code php| 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 -->
 </code>