Merge pull request #766 from zirreal/robonomics-wiki-test

updated privacy policy

gridsome.config.js

@@ -50,7 +50,6 @@ module.exports = {
       options: {
         host: 'https://matomo.robonomics.network/',
         siteId: 4,
-        requireConsent: true
       }
     },
     {

package.json

@@ -39,7 +39,6 @@
     "prismjs": "^1.27.0",
     "remark-autolink-headings": "^5.2.2",
     "remark-highlight.js": "^5.2.0",
-    "vue-client-actions-tracker-component": "^1.0.2",
     "vue-cookies": "^1.7.4",
     "vue-meta": "^2.4.0",
     "vue-recaptcha": "^1.3.0",

src/assets/style/utils.css

@@ -39,8 +39,4 @@
     vertical-align: middle;
     vertical-align: -moz-middle-with-baseline;
     vertical-align: -webkit-baseline-middle;
-}
-
-.my-tracker .user-tracker__form  {
-  padding-left: 0;
 }

src/components/Footer.vue

@@ -19,6 +19,11 @@
               {{ $t('How to edit Wiki') }}
             </g-link>
           </li>
+          <li class="footer__item">
+            <g-link class="footer__link" to="/privacy-policy/">
+              {{ $t('Privacy Policy') }}
+            </g-link>
+          </li>
         </ul>
 
         <div class="footer-text"  v-if="$locale != 'en'">

src/components/MatomoOptOutForm.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="optout-form">
+    <p>{{optDescr}}</p>
+    <p>{{ optChoice }}</p>
+      <label class="custom-checkbox">
+        <input @change="check($event)" type="checkbox" v-model="optOut" name="optout" value="optout" class="custom-checkbox__field">
+        <span class="custom-checkbox__content"></span>
+        <strong>{{ optText }}</strong>
+      </label>
+  </div>
+</template>
+
+<script>
+export default {
+
+  data() {
+    return {
+      optOut: false,
+      optText: 'You are currently opted out. Click here to opt in',
+      optDescr: "You may choose not to have a unique web analytics cookie identification number assigned to your computer to avoid the aggregation and analysis of data collected on this website.",
+      optChoice: "To make that choice, please click below to receive an opt-out cookie"
+    }
+  },
+
+  methods: {
+    setOptOutText() {
+      if(this.$matomo) {
+        if(this.$matomo && this.$matomo.isUserOptedOut()) {
+        this.optText = this.$t('You are currently opted out. Click here to opt in.')
+        this.optDescr = this.$t("Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.")
+        this.optChoice = this.$t("Please click below to opt in:")
+        } else {
+          this.optText = this.$t('You are currently opted in. Click here to opt out.')
+          this.optDescr = this.$t("You may choose not to have a unique web analytics cookie identification number assigned to your computer to avoid the aggregation and analysis of data collected on this website.")
+          this.optChoice = this.$t("To make that choice, please click below to receive an opt-out cookie")
+        }
+      }
+    },
+
+    check() {
+      if(this.$matomo && this.$matomo.isUserOptedOut()) {
+        this.$matomo && this.$matomo.forgetUserOptOut();
+      } else {
+        this.$matomo && this.$matomo.optUserOut();
+      }
+      this.setOptOutText();
+    }
+  },
+
+  async mounted() {
+
+    setTimeout(async () => {
+      console.log(this.$matomo && this.$matomo.isUserOptedOut())
+      this.optOut = await this.$matomo && !this.$matomo.isUserOptedOut()
+      this.setOptOutText();
+    }, 300)
+
+  }
+
+}
+</script>
+
+<style scoped>
+
+  .optout-form {
+    padding:calc(var(--space) * 0.5);
+    min-height: 220px;
+    border: 2px solid var(--color-dark);
+  }
+
+  .custom-checkbox strong {
+    padding-left: 40px;
+    font-size: var(--base-font-size);
+  }
+
+  .custom-checkbox__field:checked + .custom-checkbox__content::before {
+    background-color:  var(--color-blue);
+  }
+
+  
+</style>

src/data/locales/routes.yaml

@@ -1,3 +1,7 @@
 - path: '/'
   component: './src/pages/Index.vue'
+  typename: 'page'
+
+- path: '/privacy-policy'
+  component: './src/pages/privacy-policy.vue'
   typename: 'page'

src/layouts/Default.vue

@@ -16,15 +16,6 @@
         <Footer/>
       </div>
 
-      <client-only>
-
-        <userTracker
-          classCustom="my-tracker"
-          @activateTracker="activateTracker"
-        />
-
-      </client-only>
-
     </div>
 
 </template>
@@ -65,11 +56,8 @@ export default {
     },
 
     activateTracker() {
-      if(this.$matomo) {
-          this.$matomo && this.$matomo.setConsentGiven();
-          this.$matomo && this.$matomo.enableLinkTracking();
-          this.$matomo && this.$matomo.trackPageView();
-      }
+      this.$matomo && this.$matomo.disableCookies();
+      this.$matomo && this.$matomo.trackPageView();
     }
   },
 
@@ -86,8 +74,11 @@ export default {
     document.querySelectorAll('.all-content ').forEach(item => {
       item.removeEventListener('scroll', this.activateScrollbar)
     })
+    this.activateTracker();
   }
 
+
+
 }
 </script>
 

src/layouts/Sidebar.vue

@@ -22,15 +22,6 @@
       <Footer/>
     </div>
 
-    <client-only>
-
-      <userTracker
-        classCustom="my-tracker"
-        @activateTracker="activateTracker"
-      />
-
-    </client-only>
-
   </div>
 </template>
 
@@ -176,11 +167,8 @@ export default {
     },
 
     activateTracker() {
-      if(this.$matomo) {
-          this.$matomo && this.$matomo.setConsentGiven();
-          this.$matomo && this.$matomo.enableLinkTracking();
-          this.$matomo && this.$matomo.trackPageView();
-      }
+      this.$matomo && this.$matomo.disableCookies();
+      this.$matomo && this.$matomo.trackPageView();
     }
   },
   
@@ -227,6 +215,10 @@ export default {
     });
   },
 
+  mounted() {
+    this.activateTracker();
+  }
+
 }
 
 </script>

src/main.js

@@ -17,10 +17,6 @@ import '~/assets/style/fonts.css'
 
 // import 'gridsome-remark-katex/node_modules/katex/dist/katex.min.css'
 
-// tracker component
-import userTracker from 'vue-client-actions-tracker-component'
-import '../node_modules/vue-client-actions-tracker-component/dist/vue-client-actions-tracker-component.css'
-
 import DefaultLayout from '~/layouts/Default.vue'
 import SidebarLayout from '~/layouts/Sidebar.vue'
 import RoboWikiButton from '~/components/RoboWikiButton.vue';
@@ -119,8 +115,6 @@ export default function (Vue, { router, head, isClient, appOptions }) {
       window.scrollTo(0, 0);
       head.htmlAttrs = { 'lang' : appOptions.store.state.locale }
     })
-
-    Vue.use(userTracker);
   }
 
   // for translations