Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:bootstrap:snippets:cookie [11/05/2020 16:17] – conny
+++ programmieren:bootstrap:snippets:cookie [Unbekanntes Datum] (aktuell) – Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
 ===== einfaches Script für Cookie Banner ======
-Hier ein einfaches Script um die Cookie Meldung an zuzeigen.
+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.
-Google Analytics & Google Conversion Tracking
+{{programmieren:bootstrap:snippets:cookie_scr.png}}
 . im Scriptbereich (wahrscheinlich ziemlich am Ende eures Codes) folgendes einfügen
-<code java>
+<code java| JS>
 <!-- Cookie Banner www.Hennweb.de -->
 <script>
@@ Zeile 18: / 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 27: / 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 php| download>
+<code php| HTML>
 <!-- Cookie-Banner by HennWeb.de -->
 <div id="cookie_banner" >
@@ Zeile 34: / 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;
-		<button type="button" class="btn btn-primary btn-sm " onclick="document.cookie = 'cookiebanner=1;path=/';jQuery('#cookie_banner').slideUp()">OK</button>
+		<a type="button" class="btn btn-primary btn-sm " onclick="cookie_ok()">OK</a>
 	</div>
 </div>
@@ Zeile 41: / Zeile 47: @@
 . und zum Schluss in die CSS Datei (oder im Header eingebettet in <Style>)
-<code css| download>
+<code css| CSS>
 /* Cookie-Banner by HennWeb.de */
 #cookie_banner {
@@ Zeile 55: / Zeile 61: @@
 Soll das Cookie wieder sichtbar gemacht werden, dann baut bitte folgenden Reset Button ein:
-<code php| download>
+<code php| HTML>
 <img src="/img/icon/cookie.png" style="height:15px; widht:15px;" id="ResetCookie">
 oder
@@ Zeile 67: / 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 java| download>
+<code java| JS>
 <script type="text/javascript">
 /* Google Analytics */
@@ Zeile 115: / Zeile 123: @@
 Obiger Punkt 2 muss durch folgendes ersetzt werden:
-<code php| download>
+<code php| HTML>
 <!-- START Bootstrap-Cookie-Banner -->
 <div id="cookie_banner" >
@@ Zeile 121: / Zeile 129: @@
 		<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="document.cookie = 'cookiebanner=1;path=/';jQuery('#cookie_banner').slideUp()">ohne Cookies</a>
+		<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="document.cookie = 'cookiebanner=1;path=/';jQuery('#cookie_banner').slideUp()">OK</a>
+		<a href="javascript:gaOpton();"  class="btn btn-secondary btn-sm" onclick="cookie_ok()">OK</a>
 	</div>
 </div>
 <!-- END Bootstrap-Cookie-Banner -->
 </code>