Client Analytics (#9023)

* start to refactor analytics and some mixins

* wip

* wip

* wip

* more analytics

* more analytics

* more anlytics

* fix analytics module

* finish analytics

* fix env

* vue casing

website/client/components/static/groupPlans.vue

@@ -19,6 +19,7 @@
       .row.row-margin(style="font-size: 2rem;")
         span {{ $t('enterprisePlansDescription') }}
       .row.row-margin
+        // TODO 
         a.btn.btn-primary.btn-lg.btn-block(:href="'mailto:vicky@habitica.com?subject=' + $t('enterprisePlansEmailSubject')") {{ $t('enterprisePlansButton') }}
 
       br
@@ -28,3 +29,22 @@
       .row.row-margin
         a.btn.btn-primary.btn-lg.btn-block(href="https://docs.google.com/forms/d/e/1FAIpQLSerMKkaCg3UcgpcMvBJtlNgnF9DNY8sxCebpAT-GHeDAQASPQ/viewform?usp=sf_link") {{ $t('familyPlansButton') }}
 </template>
+
+<script>
+import * as Analytics from 'client/libs/analytics';
+
+export default {
+  methods: {
+    contactUs () {
+      Analytics.track({
+        hitType: 'event',
+        eventCategory: 'button',
+        eventAction: 'click',
+        eventLabel: 'Contact Us (Plans)',
+      });
+
+      window.location.href = `mailto:vicky@habitica.com?subject=${this.$t('enterprisePlansEmailSubject')}`;
+    },
+  },
+};
+</script>

website/client/components/static/header.vue

@@ -91,20 +91,29 @@
 </style>
 
 <script>
-  import logo from 'assets/svg/logo.svg';
+import logo from 'assets/svg/logo.svg';
+import * as Analytics from 'client/libs/analytics';
 
-  export default {
-    data () {
-      return {
-        icons: Object.freeze({
-          logo,
-        }),
-      };
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        logo,
+      }),
+    };
+  },
+  methods: {
+    playButtonClick () {
+      // @TODO duplicate of code in home.vue
+      Analytics.track({
+        hitType: 'event',
+        eventCategory: 'button',
+        eventAction: 'click',
+        eventLabel: 'Play',
+      });
+
+      this.$router.push('/register');
     },
-    methods: {
-      playButtonClick () {
-        this.$router.push('/register');
-      },
-    },
-  };
+  },
+};
 </script>

website/client/components/static/home.vue

@@ -602,6 +602,7 @@
 <script>
   import AppFooter from 'client/components/appFooter';
   import StaticHeader from './header.vue';
+  import * as Analytics from 'client/libs/analytics';
 
   export default {
     components: {
@@ -614,10 +615,21 @@
       };
     },
     mounted () {
-      // Analytics.track({"hitType":"pageview","eventCategory":"page","eventAction":"landing page","page":"/home"});
+      Analytics.track({
+        hitType: 'pageview',
+        eventCategory: 'page',
+        eventAction: 'landing page',
+        page: '/home',
+      });
     },
     methods: {
       playButtonClick () {
+        Analytics.track({
+          hitType: 'event',
+          eventCategory: 'button',
+          eventAction: 'click',
+          eventLabel: 'Play',
+        });
         this.$router.push('/register');
       },
     },