Merge pull request #57 from FreeOurKnowledge/cookie_consent

Edits to make cookies optional v1

_config.yml

@@ -134,7 +134,7 @@ footer-link-col: "#404040"
 #gtag: ""
 
 # Fill in your Google Analytics ID to track your website using Google Analytics
-google_analytics: "UA-125339405-1"
+google_analytics: "UA-125339405-1" #MUST ALSO BE UPDATED IN analytics.js
 
 # Google Tag Manager ID
 #gtm: ""

_includes/analytics.js

@@ -0,0 +1,27 @@
+/*This function will load script and call the callback once the script has loaded*/
+
+function loadScriptAsync(scriptSrc, callback) {
+if (typeof callback !== 'function') {
+    throw new Error('Not a valid callback for async script load');
+}
+var script = document.createElement('script');
+script.onload = callback;
+script.src = scriptSrc;
+document.head.appendChild(script); }
+
+/* This is the part where you call the above defined function and "calls back" your code which gets executed after the script has loaded */
+
+// loadScriptAsync('https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX', function () {
+// window.dataLayer = window.dataLayer || [];
+// function gtag() { dataLayer.push(arguments); }
+// gtag('js', new Date());
+// gtag('config', 'G-XXXXXXXXXX', { 'anonymize_ip': true }); 
+// })
+
+window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+ga('create', 'UA-125339405-1', 'auto');
+ga('send', 'pageview');
+
+loadScriptAsync(src='https://www.google-analytics.com/analytics.js')
+
+

_includes/cookie-consent.html

@@ -0,0 +1,58 @@
+<style>
+    #cookie-notice {padding: 0.5rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: #222; color: rgba(255,255,255,0.8);}
+    #cookie-notice a {display: inline-block; cursor: pointer; margin-left: 0.5rem;}
+    @media (max-width: 767px) {
+        #cookie-notice span {display: block; padding-top: 3px; margin-bottom: 1rem;}
+        #cookie-notice a {position: relative; bottom: 4px;}
+    }
+</style>
+<div id="cookie-notice"><span>We would like to use Google Analtics cookies and scripts to improve the functionality of this website.</span>
+    <a id="cookie-notice-accept" class="btn btn-primary btn-sm">Approve</a>
+    <a id="cookie-notice-deny" class="btn btn-primary btn-sm">Deny</a>
+    <!-- <a href="/privacy" class="btn btn-primary btn-sm">More info</a></div> -->
+<script>
+    function createCookie(name,value,days) {
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days*24*60*60*1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + value + expires + "; path=/";
+    }
+    function readCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for(var i=0;i < ca.length;i++) {
+            var c = ca[i];
+            while (c.charAt(0)==' ') c = c.substring(1,c.length);
+            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+        }
+        return null;
+    }
+    function eraseCookie(name) {
+        createCookie(name,"",-1);
+    }
+
+    if(readCookie('cookie-notice-option')=='true') {
+        {% if jekyll.environment == "production" and site.google_analytics %}
+            {% include analytics.js %}
+        {% endif %}
+    } else if (readCookie('cookie-notice-option')!='false'){
+        document.getElementById('cookie-notice').style.display = 'block';
+    }
+
+    document.getElementById('cookie-notice-accept').addEventListener("click",function() {
+        createCookie('cookie-notice-option','true',31);
+        document.getElementById('cookie-notice').style.display = 'none';
+        location.reload();
+    });
+
+    document.getElementById('cookie-notice-deny').addEventListener("click",function() {
+        createCookie('cookie-notice-option','false',31);
+        document.getElementById('cookie-notice').style.display = 'none';
+        location.reload();
+    });
+
+</script>
+

_includes/head.html

@@ -43,7 +43,8 @@
 
   {% include gtag.html %}
   {% include gtm_head.html %}
-  {% include google_analytics.html %}
+  <!-- {% include google_analytics.html %} -->
+  {% include cookie-consent.html %}
 
   {% if layout.common-ext-css %}
     {% for css in layout.common-ext-css %}