added piwik opt-in

contact.php

@@ -84,6 +84,10 @@
           <br>
           durch die nutzung dieser seite erklären sie sich mit dem haftungsausschluss einverstanden.
       </p>
+      <p><b>cookies</b></p>
+      <p>
+          cookies (kleine textdateien, gespeichert auf ihrem endgerät) ermöglichen es uns, sie wieder zu erkennen. dadurch können wir unser angebot für sie attraktiver machen. wenn sie dem speichern von cookies widersprechen wollen, können sie cookies in ihrem browser deaktivieren.
+      </p>
       <p><b>datenschutzerklärung</b></p>
       <p>
           wir benutzen die open-source-software piwik zum auswerten der besucherzugriffe. die piwik installation wird den rechtlichen
@@ -115,17 +119,24 @@
     <script src="/js/ie10-viewport-bug-workaround.js"></script>
 
     <!-- Piwik -->
+    <script src="//analytics.mmnx.de/piwik.js"></script>
     <script type="text/javascript">
-        var _paq = _paq || [];
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function() {
-            var u="//analytics.mmnx.de/";
-            _paq.push(['setTrackerUrl', u+'piwik.php']);
-            _paq.push(['setSiteId', 3]);
-            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-        })();
+        var tracker = Piwik.getTracker('https://analytics.mmnx.de/piwik.php', '3' );
+        var info = tracker.getVisitorInfo();
+        var alreadyTracking = info[3] > 0;
+
+        if (!alreadyTracking) {
+            $("body").append("<div class=\"cookie-opt-in\"><div class=\"vertical-center\"><div class=\"container\"><div class=\"cookie-opt-in-text\">Um Ihnen den bestmöglichen Service bieten zu können, benutzen wir Cookies. Wir bitten Sie unseren Cookie-Richtlinien mit einem Klick auf OK zuzustimmen. <button type=\"button\" class=\"btn btn-primary\">ok</button></div></div></div></div>");
+
+            $(".cookie-opt-in-text > button").on("click", function(e) {
+                e.preventDefault();
+
+                tracker.enableLinkTracking();
+                tracker.trackPageView();
+
+                $(".cookie-opt-in").remove();
+            });
+        }
     </script>
     <noscript><p><img src="//analytics.mmnx.de/piwik.php?idsite=3" style="border:0;" alt="" /></p></noscript>
     <!-- End Piwik Code -->

css/custom.css

@@ -3,3 +3,28 @@
     margin: 0 !important;
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
+
+.cookie-opt-in {
+    width: 100%;
+    position: fixed;
+    height: 100px;
+    background-color: rgba(248, 248, 248, 0.8); /*rgba(0, 0, 0, 0.2);*/
+    bottom: 0;
+}
+
+.vertical-center {
+    min-height: 100%;
+
+    display: flex;
+    align-items: center;
+}
+
+.cookie-opt-in-text {
+    text-align: center;
+    font-weight: 700;
+    text-transform: lowercase;
+}
+
+.cookie-opt-in-text > button {
+    padding: 3px 6px;
+}

index.php

@@ -90,40 +90,22 @@
     <!-- Piwik -->
     <script src="//analytics.mmnx.de/piwik.js"></script>
     <script type="text/javascript">
-        var _paq = _paq || [];
-        _paq.push(['trackPageView']);
-        _paq.push(['enableLinkTracking']);
-        (function() {
-            var u="//analytics.mmnx.de/";
-            _paq.push(['setTrackerUrl', u+'piwik.php']);
-            _paq.push(['setSiteId', 3]);
-            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-        })();
-
-        /*var piwikTracker = Piwik.getTracker();
-        piwikTracker.setSiteId( 3 );
-        piwikTracker.setTrackerUrl( "" );
-        piwikTracker.trackPageView();*/
-
-        //window.piwikTracker = piwikTracker;
-
-        /*var tracker = Piwik.getTracker( 'https://analytics.mmnx.de/piwik.php', '3' );
+        var tracker = Piwik.getTracker('https://analytics.mmnx.de/piwik.php', '3' );
         var info = tracker.getVisitorInfo();
-        var optin = false;
-        var alreadyTracking = info[0] != '1' || info[3] > 0;
-
-        console.log(info);
-        console.log(alreadyTracking);
+        var alreadyTracking = info[3] > 0;
 
         if (!alreadyTracking) {
-            optin = confirm( 'Opt-in to use cookies?' );
-        }
+            $("body").append("<div class=\"cookie-opt-in\"><div class=\"vertical-center\"><div class=\"container\"><div class=\"cookie-opt-in-text\">Um Ihnen den bestmöglichen Service bieten zu können, benutzen wir Cookies. Wir bitten Sie unseren Cookie-Richtlinien mit einem Klick auf OK zuzustimmen. <button type=\"button\" class=\"btn btn-primary\">ok</button></div></div></div></div>");
+
+            $(".cookie-opt-in-text > button").on("click", function(e) {
+                e.preventDefault();
 
-        if (optin || alreadyTracking) {
-            //tracker.enableLinkTracking();
-            //tracker.trackPageView();
-        }*/
+                tracker.enableLinkTracking();
+                tracker.trackPageView();
+
+                $(".cookie-opt-in").remove();
+            });
+        }
     </script>
     <noscript><p><img src="//analytics.mmnx.de/piwik.php?idsite=3" style="border:0;" alt="" /></p></noscript>
     <!-- End Piwik Code -->