✨ Adds cookie consent layer

package-lock.json

@@ -15840,6 +15840,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-analytics": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.16.4.tgz",
+      "integrity": "sha512-M67cUqpPeyk2rftrvlx2uU+BQ/C4E8SkF2Ct9LizOYUoTccZtCCJwhMJfQ3XL8xep6p3K8KYz58FzRWvx5zlPw=="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "stylelint-processor-html": "^1.0.0",
     "stylelint-webpack-plugin": "^0.10.5",
     "vue": "^2.6.6",
+    "vue-analytics": "^5.16.4",
     "vue-feather-icons": "^4.10.0",
     "vue-i18n": "^8.9.0",
     "vue-markdown": "^2.2.4",

public/index.html

@@ -50,21 +50,6 @@
     <!-- built files will be auto injected -->
 
     <script>
-      /* eslint-disable */
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-      ga('create', 'UA-83519650-2', 'auto');
-      ga('send', 'pageview');
-
-      window.addEventListener('beforeinstallprompt', e => {
-        e.userChoice.then(choiceResult => {
-          ga('send', 'event', 'A2H', choiceResult.outcome);
-        });
-      });
-
       window.fbAsyncInit = () => {
         FB.init({
           appId: '766231516835034',
@@ -81,7 +66,6 @@
       js.src = "//connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
-      /* eslint-enable */
     </script>
   </body>
 </html>

src/app/app.vue

@@ -19,11 +19,27 @@
     <footer>
       <app-footer :menu="subMenu" :social="socialMedia" />
     </footer>
+
+    <section v-if="showConsentLayer" id="analytics-consent">
+      <div class="consent-content">
+        <p>Let's track a bit?</p>
+        <div class="consent-actions">
+          <button @click="updateConsent(false)">
+            Decline
+          </button>
+          <button @click="updateConsent(true)">
+            Allow
+          </button>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
   import '@/assets/icons/european-stars'
+  import { GA_COOKIE_NAME } from '@/config/analytics'
+  import { setCookie, getCookie } from '@/helper/cookies'
 
   export default {
     name: 'App',
@@ -75,6 +91,7 @@
 
     data () {
       return {
+        showConsentLayer: getCookie(GA_COOKIE_NAME) === null,
         euromatLogo: require('@/assets/svg/euromat-logo.svg'),
         logoSize: 220,
         languages: [
@@ -142,6 +159,13 @@
           }
         ]
       }
+    },
+
+    methods: {
+      updateConsent (consent) {
+        setCookie(GA_COOKIE_NAME, consent)
+        this.showConsentLayer = false
+      }
     }
   }
 </script>
@@ -294,4 +318,38 @@
       margin-top: $base-gap;
     }
   }
+
+  #analytics-consent {
+    position: fixed;
+    z-index: 4;
+    bottom: 0;
+    width: 100vw;
+    max-width: $app-width;
+    background: $background-secondary;
+    color: $text-color-secondary;
+    display: flex;
+    justify-content: center;
+    padding: $small-gap;
+    margin-bottom: $base-gap;
+    border-radius: $border-radius;
+    box-shadow: $button-shadow;
+
+    @media (max-width: $app-width) {
+      margin-bottom: 0;
+      border-radius: 0;
+      box-shadow: 0;
+    }
+
+    .consent-content {
+      max-width: $app-width;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & button {
+        margin-left: $small-gap;
+      }
+    }
+  }
 </style>

src/config/analytics.js

@@ -0,0 +1,2 @@
+export const GA_KEY = 'UA-83519650-2'
+export const GA_COOKIE_NAME = '_euromat-ga'

src/helper/cookies.js

@@ -0,0 +1,30 @@
+export function setCookie (name, value = '') {
+  if (!name) {
+    throw new Error(`Cookie needs a valid name, you passed "${name}".`)
+  }
+  document.cookie = `${name}=${value}`
+}
+
+export function getCookie (name) {
+  const nameEQ = name + '='
+  const cookies = document.cookie.split(';')
+
+  for (var i = 0; i < cookies.length; i++) {
+    let cookie = cookies[i]
+    while (cookie.charAt(0) === ' ') {
+      cookie = cookie.substring(1, cookie.length)
+    }
+    if (cookie.indexOf(nameEQ) === 0) {
+      return cookie.substring(nameEQ.length, cookie.length)
+    }
+  }
+
+  return null
+}
+
+export function deleteCookie (name) {
+  if (!name) {
+    throw new Error(`Cookie needs a valid name, you passed "${name}".`)
+  }
+  document.cookie = `${name}=; Max-Age=-99999999;`
+}

src/main.js

@@ -1,10 +1,13 @@
 import Vue from 'vue'
 import VueSVGIcon from 'vue-svgicon'
+import VueAnalytics from 'vue-analytics'
 
 import App from '@/app/app'
 import router from '@/router'
 import i18n from '@/i18n'
 import storage from '@/helper/storage'
+import { getCookie } from '@/helper/cookies'
+import { GA_KEY, GA_COOKIE_NAME } from '@/config/analytics'
 
 import '@/registerComponents'
 import '@/registerServiceWorker'
@@ -12,6 +15,11 @@ import '@/registerServiceWorker'
 Vue.config.productionTip = false
 Vue.use(VueSVGIcon)
 Vue.use(storage)
+Vue.use(VueAnalytics, {
+  id: GA_KEY,
+  disabled: getCookie(GA_COOKIE_NAME) !== 'true',
+  router
+})
 
 new Vue({
   router,

src/router/index.js

@@ -34,11 +34,6 @@ router.beforeEach((to, from, next) => {
     window.document.title = getPageTitle(to.meta.title)
   }
 
-  if (window.ga && to.path) {
-    window.ga('set', 'page', to.path)
-    window.ga('send', 'pageview')
-  }
-
   window.scrollTo(0, 0)
   next()
 })