fix cookies banner

Author: qwtel

CHANGELOG.md

@@ -3,6 +3,20 @@ layout: page
 title: CHANGELOG
 ---
 
+## v7.4.1
+Nov 27 2017
+{:.heading.post-date}
+
+### Fixed
+* Fixed storing user-related data before accepting cookies.
+* Fixed tab order of cookie banner, so keyboard users can access it more easily.
+* Accepting cookies no longer causes a page reload in some browsers.
+* Fixed appearance of the okay button in the free version.
+* Menu icon now useable while the cookies banner is active.
+* Loading icon is now visible while the cookies banner is active.
+* Removed cookies banner from print layout.
+* Removed inline styles from cookie banner.
+
 ## v7.4.0
 Nov 25 2017
 {:.heading.post-date}

_config.yml

@@ -134,8 +134,8 @@ hydejack:
   # Set to `true` when building with the `--lsi` option
   use_lsi:             false
 
-  # Set to `true` if you want to display a cookie notice banner.
-  # You can change the text of the banner in `_data/strings.yml`.
+  # When using Google Analytics, set to `true` to display a cookie notice banner.
+  # When enabled, no user-related data will be stored until the user gives consent.
   cookies_banner:      false
 
 

_includes/body/scripts.html

@@ -1,18 +1,33 @@
 {% unless page.redirect %}
   {% if site.google_analytics %}
-  <script>
-    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-    ga('create', '{{ site.google_analytics }}', 'auto');
-    ga('send', 'pageview');
-    loadJSDeferred('https://www.google-analytics.com/analytics.js');
-  </script>
+    <script>
+      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+      {% if site.hydejack.cookies_banner %}
+        if (navigator.CookiesOK) {
+          ga('create', '{{ site.google_analytics }}', 'auto');
+        } else if (localStorage && localStorage.getItem('hy:cookiesOK')) {
+          ga('create', '{{ site.google_analytics }}', {
+            'storage': 'none',
+            'clientId': localStorage.getItem('ga:clientId')
+          });
+        } else {
+          ga('create', '{{ site.google_analytics }}', {
+            'storage': 'none'
+          });
+          ga('set', 'forceSSL', true);
+          ga('set', 'anonymizeIp', true);
+        }
+      {% else %}
+        ga('create', '{{ site.google_analytics }}', 'auto');
+      {% endif %}
+      ga('send', 'pageview');
+      loadJSDeferred('https://www.google-analytics.com/analytics.js');
+    </script>
   {% endif %}
 
   <!--[if gt IE 9]><!---->
   {% capture js_url %}{% link assets/js/hydejack-7.4.0.js %}{% endcapture %}
   <script>loadJSDeferred('{{ js_url | relative_url }}');</script>
-
   {% include my-scripts.html %}
-
   <!--<![endif]-->
 {% endunless %}

_includes/styles/style.scss

@@ -88,7 +88,7 @@
     font-family: {{ font | default:"serif" }};
   }
 
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading { 
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading {
     font-family: {{ font_heading | default:"serif" }};
   }
 {% endunless %}

_includes/templates.html

@@ -35,14 +35,14 @@ <h1 class="page-title">{{ strings.error.title | default:"Error" }}</h1>
   </a>
 </template>
 
-{% if site.hydejack.cookies_banner %}
+{% if site.google_analytics and site.hydejack.cookies_banner %}
 <template id="_cookies-banner-template">
   <div id="_cookies-banner" class="navbar fixed-top CookiesOK">
     <div class="content">
-      <div class="nav-btn-bar" style="background: rgba(255,255,255,0.9);">
-        <small class="nav-btn" style="padding: .875rem;">
+      <div class="nav-btn-bar">
+        <small class="nav-btn">
           <span>{{ site.data.strings.cookies_banner.text | default:'This site uses Cookies.' | markdownify | replace:'<p>','' | replace:'</p>','' }}</span>
-          <a href="#" id="_cookies-ok" class="btn btn-primary btn-sm">{{ site.data.strings.cookies_banner.okay | default:'Okay' }}</a>
+          <button id="_cookies-ok" class="btn btn-primary btn-sm">{{ site.data.strings.cookies_banner.okay | default:'Okay' }}</button>
         </small>
       </div>
     </div>

_js/src/cookies-banner.js

@@ -14,17 +14,22 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-if (!navigator.CookiesOK && !(localStorage && localStorage.getItem('cookies-ok'))) {
+if (window.ga && !navigator.CookiesOK && !(localStorage && localStorage.getItem('hy:cookiesOK'))) {
   const template = document.getElementById('_cookies-banner-template');
   if (template) {
-    document.getElementsByTagName('hy-push-state')[0]
-      .appendChild(document.importNode(template.content, true));
+    const parent = document.getElementsByTagName('hy-push-state')[0];
+    parent.insertBefore(document.importNode(template.content, true), parent.firstChild);
 
-    document.getElementById('_cookies-ok').addEventListener('click', (e) => {
-      e.preventDefault();
-      if (localStorage) localStorage.setItem('cookies-ok', true);
-      const cookiesBanner = document.getElementById('_cookies-banner');
-      cookiesBanner.parentNode.removeChild(cookiesBanner);
+    document.getElementById('_cookies-ok').addEventListener('click', () => {
+      if (localStorage) localStorage.setItem('hy:cookiesOK', true);
+
+      const banner = document.getElementById('_cookies-banner');
+      banner.parentNode.removeChild(banner);
+
+      window.ga((tracker) => {
+        window.ga('set', 'anonymizeIp', undefined);
+        if (localStorage) localStorage.setItem('ga:clientId', tracker.get('clientId'));
+      });
     }, { once: true });
   }
 }

_js/src/push-state.js

@@ -93,7 +93,7 @@ const DURATION = 250;
 const FADE_DURATION = 600;
 
 // Time a user has to stay on the site before we send word to Google Analytics.
-const GA_DELAY = 1000;
+const GA_DELAY = 500;
 
 // Details of the fade-out animation.
 const FADE_OUT = [

_sass/hydejack/__inline/_menu.scss

@@ -63,3 +63,5 @@
   }
 //   @media print { display: none; } 
 }
+
+

_sass/hydejack/__link/_menu.scss

@@ -38,7 +38,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  padding: 1.75rem 1.5rem;
+  padding: 1.75rem 1rem;
 }
 
 
@@ -50,3 +50,16 @@
   }
   @media print { display: none; } 
 }
+
+
+#_cookies-banner  {
+  .nav-btn { padding: 1.75rem 0 }
+  .nav-btn-bar {
+    margin: 0 2rem;
+    @media screen and (min-width: $break-point-3) {
+      margin: 0 2rem 0 0;
+    }
+  }
+  @media print { display: none; }
+}
+

_sass/hydejack/_menu.pre.scss

@@ -54,7 +54,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  padding: 1.75rem 1.5rem;
+  padding: 1.75rem 1rem;
 }
 // >>>>
 
@@ -66,3 +66,16 @@
   }
   @media print { display: none; } // link
 }
+
+// <<<< LINK
+#_cookies-banner  {
+  .nav-btn { padding: 1.75rem 0 }
+  .nav-btn-bar {
+    margin: 0 2rem;
+    @media screen and (min-width: $break-point-3) {
+      margin: 0 2rem 0 0;
+    }
+  }
+  @media print { display: none; }
+}
+// >>>>