Merge pull request #121 from zirreal/master

added matomo analytics + privacy policy page

package.json

@@ -40,6 +40,7 @@
     "vue": "^3.2.38",
     "vue-highcharts": "^0.2.0",
     "vue-i18n": "9",
+    "vue-matomo": "^4.1.0",
     "vue-router": "^4.1.5",
     "vue3-clipboard": "^1.0.0"
   },

src/assets/styles/base.css

@@ -47,7 +47,7 @@ li, dd {
   background: #A5A5A5; 
 }
 
-#app {
+#app .sensors-screen {
   position: relative;
   width: 100vw;
   height: 100vh;

src/components/header/Header.vue

@@ -2,7 +2,9 @@
   <header class="header">
     <div class="container header__container">
       <div class="header__wrapper">
-        <h1 class="title">{{ $t("header.title") }}</h1>
+        <h1 class="title">
+          <router-link to="/">{{ $t("header.title") }}</router-link>
+        </h1>
         <div class="title">{{ city }}</div>
       </div>
 
@@ -70,7 +72,7 @@ export default {
 </script>
 
 <style scoped>
-h1 {
+h1.title > a {
   color: var(--color-middle-gray);
 }
 

src/components/header/MenuPopup.vue

@@ -48,6 +48,11 @@
                 {{ $t("header.fork") }}
               </a>
             </li>
+            <li class="nav__item">
+              <router-link class="nav__link" :to="{ name: 'privacy-policy' }">
+                {{ $t("header.policy") }}
+              </router-link>
+            </li>
           </ul>
         </div>
       </nav>

src/components/matomo/OptOutForm.vue

@@ -0,0 +1,87 @@
+<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: 1.5rem 0.8rem;
+  border: 2px solid #333;
+}
+
+.optout-form strong {
+  padding-left: 10px;
+}
+</style>

src/main.js

@@ -1,13 +1,17 @@
 import { Buffer } from "buffer";
 import { createApp } from "vue";
+import VueMatomo from "vue-matomo";
 import App from "./App.vue";
 import { usePlugins } from "./plugins";
 
 import "./assets/styles/main.css";
 
 window.Buffer = Buffer;
 
-const app = createApp(App);
+const app = createApp(App).use(VueMatomo, {
+  host: "https://matomo.robonomics.network/",
+  siteId: 5,
+}); // matomo analytics
 usePlugins(app);
 
 app.mount("#app");

src/router.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Main from "./views/Main.vue";
+import PrivacyPolicy from "./views/PrivacyPolicy.vue";
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -14,6 +15,11 @@ const router = createRouter({
         );
       },
     },
+    {
+      path: "/privacy-policy/",
+      name: "privacy-policy",
+      component: PrivacyPolicy,
+    },
   ],
 });
 

src/translate.js

@@ -11,6 +11,7 @@ export default {
       city: {
         togliatti: "Togliatti",
       },
+      policy: "Privacy policy",
     },
     measures: {
       PM10: "Suspended particles (PM - particulate matter) of a substance with a diameter of less than 10 micrometers (μm). They are a widespread air pollutant. They are able to penetrate deep into the lungs, irritate the respiratory tract and mucous surface. The source of PM10 is usually construction sites, highways, dust storms, dry land without vegetation. PM10 can affect mortality rates, statistics on the occurrence of respiratory, cardiovascular diseases and other health indicators. According to WHO, the daily average concentration is not allowed to exceed the threshold level of 50 µg/m3 more than 35 times during the year, the average annual concentration should not exceed the level of 40 µg/m3.",
@@ -64,6 +65,7 @@ export default {
       city: {
         togliatti: "Тольятти",
       },
+      policy: "Политика конфиденциальности",
     },
     measures: {
       PM10: "Взвешенные частицы (РМ — particulate matter) того или иного вещества диаметром менее 10 микрометра (мкм). Представляют собой широко распространенный загрязнитель атмосферного воздуха. Способны проникать глубоко в легкие, раздражать дыхательные пути, слизистую поверхность. Источником PM10 обычно являются стройки, автомобильные трассы, пыльные бури, сухая земля без растительности. РМ10 могут влиять на показатели смертности, статистику возникновения респираторных, сердечно-сосудистых заболеваний и другие показатели здоровья. Согласно ВОЗ для среднесуточной концентрации не допускается превышения порогового уровня 50 мкг/м3 более чем 35 раз в течение года, среднегодовая концентрация не должна превышать уровня в 40 мкг/м3.",

src/views/Main.vue

@@ -181,6 +181,10 @@ export default {
           }
         });
     });
+
+    // matomo analytics
+    this.$matomo && this.$matomo.disableCookies();
+    this.$matomo && this.$matomo.trackPageView();
   },
 
   watch: {

src/views/PrivacyPolicy.vue

@@ -0,0 +1,168 @@
+<template>
+  <Header :localeCurrent="$i18n.locale" />
+  <section class="privacy-policy">
+    <h1>Privacy Policy</h1>
+
+    <p class="privacy-policy__descr">
+      This Policy describes the information we collect from you, how we use that
+      information and our legal basis for doing so. It also covers whether and
+      how that information may be shared and your rights and choices regarding
+      the information you provide to us.
+    </p>
+
+    <div class="privacy-policy__wrapper">
+      <h2 class="privacy-policy__subtitle">
+        Where are those annoying cookie consent pop-ups?
+      </h2>
+      <p class="privacy-policy__descr">
+        We don't need cookie consent is needed because:
+      </p>
+      <ul>
+        <li>Tracking cookies are not used</li>
+        <li>The data is not used for any other purpose than analytics</li>
+        <li>Visitors aren’t tracked across websites</li>
+        <li>A user cannot be tracked across days within the same website</li>
+      </ul>
+    </div>
+
+    <div class="privacy-policy__wrapper">
+      <h2 class="privacy-policy__subtitle">What We Collect and Receive</h2>
+      <p class="privacy-policy__descr">
+        In order for us to provide you the best possible experience on our
+        websites, we need to collect and process certain information. Depending
+        on your use of the Services, that may include:
+      </p>
+
+      <ul>
+        <li>
+          <b>Contact us via email</b> — for example, when you submit our forms,
+          send us questions or comments, or report a problem, we will collect
+          your name, email address, message, etc. We use this data solely in
+          connection with answering the queries we receive.
+        </li>
+        <li>
+          <b>Usage data</b> — when you visit our website, we will store: the URL
+          from which you visited us from, web pages of our website you visit,
+          the date and duration of your visit, your anonymized IP address, the
+          device specifications (device type, operating system, screen
+          resolution, language, country you are located in, and web browser
+          type) you used during your visit, and
+          <a target="_blank" href="https://matomo.org/faq/general/faq_18254/"
+            >other</a
+          >
+          non-personal data. We process this usage data only on our server, not
+          passing it to third-parties with
+          <a
+            target="_blank"
+            href="https://matomo.org/privacy-policy/#:~:text=usage%20data%20in-,Matomo%20Analytics,-for%20statistical%20purposes"
+            >Matomo</a
+          >
+          web analytics platform that gives us 100% data ownership. This
+          analytics helps us to improve user experience with our website and to
+          recognize and stop any misuse.
+        </li>
+        <li>
+          <b>Non-personalized cookies</b> — we use non-tracking cookies (small
+          data files transferred onto computers or devices by sites) for
+          record-keeping purposes and to enhance functionality on our website.
+          You may deactivate or restrict the transmission of these cookies by
+          changing the settings of your web browser or by opt-out on this page
+          in the form below. Cookies that are already stored may be deleted at
+          any time.
+        </li>
+      </ul>
+    </div>
+
+    <div class="privacy-policy__wrapper">
+      <h2 class="privacy-policy__subtitle">Opt-out of website tracking</h2>
+      <p class="privacy-police__descr">
+        You can opt out of being tracked by our Matomo Analytics instance below:
+      </p>
+
+      <OptOutForm />
+    </div>
+
+    <div class="privacy-policy__wrapper">
+      <h2 class="privacy-policy__subtitle">Your Rights</h2>
+      <p class="privacy-police__descr">
+        You have the right to be informed of Personal Data processed by Matomo,
+        a right to rectification/correction, erasure and restriction of
+        processing. You also have the right to ask from us a structured, common
+        and machine-readable format of Personal Data you provided to us.
+      </p>
+      <p class="privacy-police__descr">
+        We can only identify you via your email address and we can only adhere
+        to your request and provide information if we have Personal Data about
+        you through you having made contact with us directly and/or you using
+        our site and/or service. We cannot provide, rectify or delete any data
+        that we store on behalf of our users or customers.
+      </p>
+      <p class="privacy-police__descr">
+        To exercise any of the rights mentioned in this Privacy Policy and/or in
+        the event of questions or comments relating to the use of Personal Data
+        you may contact us.
+      </p>
+      <p class="privacy-police__descr">
+        In addition, you have the right to lodge a complaint with the data
+        protection authority in your jurisdiction.
+      </p>
+    </div>
+
+    <div class="privacy-policy__wrapper">
+      <h2 class="privacy-policy__subtitle">Retention of data</h2>
+      <p class="privacy-police__descr">
+        We will retain your information as long as necessary to provide you with
+        the services or as otherwise set forth in this Policy. We will also
+        retain and use this information as necessary for the purposes set out in
+        this Policy and to the extent necessary to comply with our legal
+        obligations, resolve disputes, enforce our agreements and protect
+        Robonomics Cloud legal rights.
+      </p>
+      <p class="privacy-police__descr">
+        We also collect and maintain aggregated, anonymized or pseudonymized
+        information which we may retain indefinitely to protect the safety and
+        security of our Site, improve our Services or comply with legal
+        obligations.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script>
+import Header from "../components/header/Header.vue";
+import OptOutForm from "../components/matomo/OptOutForm.vue";
+
+export default {
+  components: {
+    Header,
+    OptOutForm,
+  },
+
+  mounted() {
+    // matomo analytics
+    this.$matomo && this.$matomo.disableCookies();
+    this.$matomo && this.$matomo.trackPageView();
+  },
+};
+</script>
+
+<style scoped>
+.privacy-policy {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.privacy-policy h1 {
+  margin-bottom: 10px;
+}
+
+.privacy-policy ul {
+  padding-left: 20px;
+  list-style: disc;
+}
+
+.privacy-policy__wrapper:not(:last-of-type) {
+  margin-bottom: 3rem;
+}
+</style>