Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:bootstrap:snippets:cookie [11/05/2020 15:24] – 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 68: / Zeile 72: @@
 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.
+{{programmieren:bootstrap:snippets:cookie_scr2.png}}
+Dazu muss zusätzlich folgenes Script eingebaut werden:
+\\
+Wichtig: in  gaProperty muss eure Analytics ID eingesetzt werden! \\
+\\
+<code java| 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
-Auszug der Datenschutzseite zur Nutzung von Google Analytics der Internetwarriors GmbH
-ansonsten stellt bitte noch sicher, dass euer Analytics Code folgendermaßen ausschaut:
-<code | download>
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-39383946-1"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'UA-39383946-1');
-</script>
-<script>
-var gaProperty='UA-24606645-1';
 var disableStr='ga-disable-'+gaProperty;
-if(document.cookie.indexOf(disableStr+'=true')>-1){
+function gaOptout(){
-    window[disableStr]=true;
+	document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
-} else {
+	window[disableStr]=true;
-    var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-24606645-1']);
+	//alert('Das Tracking ist jetzt deaktiviert');
-    _gaq.push(['_gat._anonymizeIp']);
+}
-    _gaq.push(['_trackPageview']);
-    (function(){
-        var ga=document.createElement('script'),s;
-        ga.type='text/javascript';
-        ga.async=true;ga.src=('https:'===document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
-        s=document.getElementsByTagName('script')[0];
-        s.parentNode.insertBefore(ga,s);
-    })
-();}
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-39383946-1"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'UA-39383946-1');
+// Analytics akzeptieren
-</script>
+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');
+}
-function gaOptout(){
+// prüfen ob Cookie activ / deactiv ist
-     document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
+if(document.cookie.indexOf(disableStr+'=true')>-1){    // wenn Cookie deaktivert ist, dann nicht Analytics nicht ausführen
-     window[disableStr]=true;
+	window[disableStr]=true;
-     alert('Das Tracking ist jetzt deaktiviert')
+}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>
+</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>