Added analytics to front. Fixed group plan tracking (#10262)

website/client/app.vue

@@ -373,6 +373,11 @@ export default {
       document.title = title;
     });
 
+    this.$nextTick(() => {
+      // Load external scripts after the app has been rendered
+      Analytics.load();
+    });
+
     if (this.isUserLoggedIn && !this.isStaticPage) {
       // Load the user and the user tasks
       Promise.all([
@@ -395,7 +400,6 @@ export default {
         this.$nextTick(() => {
           // Load external scripts after the app has been rendered
           setupPayments();
-          Analytics.load();
         });
       }).catch((err) => {
         console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console

website/client/components/auth/authForm.vue

@@ -73,7 +73,6 @@
 </style>
 
 <script>
-import * as Analytics from 'client/libs/analytics';
 import hello from 'hellojs';
 import { setUpAxios } from 'client/libs/auth';
 
@@ -104,13 +103,6 @@ export default {
       // windows: WINDOWS_CLIENT_ID,
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
-
-    Analytics.track({
-      hitType: 'event',
-      eventCategory: 'group-plans-static',
-      eventAction: 'view',
-      eventLabel: 'view-auth-form',
-    });
   },
   methods: {
     async socialAuth (network) {

website/client/components/group-plans/createGroupModalPages.vue

@@ -126,14 +126,6 @@ export default {
       return Boolean(this.newGroup.name);
     },
   },
-  mounted () {
-    Analytics.track({
-      hitType: 'event',
-      eventCategory: 'group-plans-static',
-      eventAction: 'view',
-      eventLabel: 'create-group',
-    });
-  },
   methods: {
     changePage (page) {
       Analytics.track({

website/client/components/static/groupPlans.vue

@@ -195,6 +195,7 @@
 </style>
 
 <script>
+  import * as Analytics from 'client/libs/analytics';
   import { setup as setupPayments } from 'client/libs/payments';
   import amazonPaymentsModal from 'client/components/payments/amazonModal';
   import StaticHeader from './header.vue';
@@ -227,10 +228,24 @@
     },
     methods: {
       goToNewGroupPage () {
+        Analytics.track({
+          hitType: 'event',
+          eventCategory: 'group-plans-static',
+          eventAction: 'view',
+          eventLabel: 'view-auth-form',
+        });
+
         this.$root.$emit('bv::show::modal', 'group-plan');
       },
       authenticate () {
         this.modalPage = 'purchaseGroup';
+
+        Analytics.track({
+          hitType: 'event',
+          eventCategory: 'group-plans-static',
+          eventAction: 'view',
+          eventLabel: 'create-group',
+        });
       },
     },
   };