Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:bootstrap:snippets:cookie [11/05/2020 16:04] – 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;
-		<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 44: / 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 57: / 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 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 116: / Zeile 123: @@
 Obiger Punkt 2 muss durch folgendes ersetzt werden:
-<code | download>
+<code php| HTML>
 <!-- START Bootstrap-Cookie-Banner -->
 <div id="cookie_banner" >
@@ Zeile 122: / 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>