GA events

src/common-components/button-question/button-question.vue

@@ -134,7 +134,8 @@ export default {
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], 'Clicked', val.value, undefined, this.$route.query[queryStrings.FMG_PAGE]);
+      
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.analyticsActions.CLICKED, val.value, true);
 
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit

src/constants/analytics-events.js

@@ -0,0 +1,22 @@
+const analyticsPageEvents = {
+  ENTRY: "ENTRY",
+  EVENT: "EVENT"
+};
+
+const analyticsCategories = {
+  API_RESPONSE: 'Api_Response',
+  EVOX: 'Evox'
+};
+
+const analyticsActions = {
+  RESULT: 'Result',
+  CLICKED: 'Clicked',
+  VIF: 'vif'
+};
+
+const analyticsLabels = {
+  SUCCESS: 'Success',
+  ERROR: 'Error'
+};
+
+export { analyticsPageEvents, analyticsCategories, analyticsActions, analyticsLabels};

src/constants/analytics-page-events.js

@@ -1,6 +0,0 @@
-const analyticsPageEvents = {
-  ENTRY: "ENTRY",
-  EVENT: "EVENT"
-};
-
-export { analyticsPageEvents };

src/global-methods.js

@@ -1,16 +1,13 @@
 import axios from "axios";
 import { applicationConfig } from "@/constants/application-config.js";
+import { analyticsCategories, analyticsActions,analyticsLabels} from "@/constants/analytics-events";
+import analyticsMixIn from "@/mixins/analytics-mixin.js";
 import httpStatusCodes from "http-status-codes";
 
 export default {
   callHttpClient({ method, endpoint, payload }) {
     return new Promise((resolve, reject) => {
-      var apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
-
-      if(endpoint.includes('analytics')){
-        apiGatewayUrl = 'https://localhost:44324';
-      }
-
+      const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
       const payloadAndAnalyticsData = Object.assign({}, payload, {
         AppName: "FixMyGlass",
       });
@@ -24,17 +21,24 @@ export default {
       }).then(
         (response) => {
           if (response.status == httpStatusCodes.OK) {
-            if(response.data == undefined) {
-                reject(response);  
-            }else{
-              resolve(response);
+            if (response.data == undefined) {
+              analyticsMixIn.methods.pushEventToGA(analyticsCategories.API_RESPONSE, analyticsActions.RESULT,
+                `${analyticsLabels.ERROR}_${endpoint}`, true);
+
+              return reject(response);
+            } else {
+              analyticsMixIn.methods.pushEventToGA(analyticsCategories.API_RESPONSE, analyticsActions.RESULT,
+                `${analyticsLabels.SUCCESS}_${endpoint}`, true);
+
+              return resolve(response);
             }
-          } else {
-            reject(response);
           }
         },
         (error) => {
           console.error(error);
+          analyticsMixIn.methods.pushEventToGA(analyticsCategories.API_RESPONSE, analyticsActions.RESULT,
+            `${analyticsLabels.ERROR}_${endpoint}`, true);
+            
           return reject(error.response);
         }
       );

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -143,7 +143,8 @@ export default {
   },
   mounted(){
     if(this.$store.getters.vehicle.imageVifNumber){
-      this.pushEventToGA("Evox", `vif_${this.$store.getters.vehicle.imageVifNumber}`, this.$store.getters.vehicle.carId, undefined, this.$route.query[queryStrings.FMG_PAGE]);
+      this.pushEventToGA(this.analyticsCategories.EVOX, `${this.analyticsActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`,
+      this.$store.getters.vehicle.carId, true);
     }
   },
   methods: {

src/mixins/analytics-mixin.js

@@ -1,11 +1,14 @@
 import { storeActions } from "@/constants/store-actions";
-import baseMixin from "@/mixins/base-mixin";
-import { settleAllPromises } from "@/helpers/layout-helper";
 import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
-import { analyticsPageEvents } from "@/constants/analytics-page-events";
+import { analyticsPageEvents, analyticsCategories, analyticsActions, analyticsLabels } from "@/constants/analytics-events";
 import { experimentSettings } from "@/constants/experiments";
 
+import baseMixin from "@/mixins/base-mixin";
+
+// We will need current page name for multiple methods, define it once to re-use.
+const currentPageName = getPageNameByQueryString();
+
 export default {
   methods: {
     logEvent(destinationFmgPageValue, pageEvent, category, action, label, value){
@@ -28,31 +31,33 @@ export default {
       baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOG_ACTIVITY, payload, false);
     },
 
-    pushEventToGA(category, action, label, value, pageName, pushToLogApp) {
+    pushEventToGA(category, action, label, pushToLogApp = false) {
       const eventToBePushed = {
         'event': 'ga_event',
         'category': category,
         'action': action,
         'label': label,
-        'value': value,
-        'path': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`
+        'value': undefined,
+        'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
 
       pushToDataLayerIfDefined(eventToBePushed);
       
       if (pushToLogApp) {
-        this.logEvent(pageName, null, category, action, label, value);
+        this.logEvent(currentPageName, undefined, category, action, label, undefined);
       }
     },
 
-    pushPageViewToGA(pageName) {
+    pushPageViewToGA() {
       const pageViewEvent = {
         'event': 'logPageview',
-        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${pageName}`,
-        'pageTitle': pageName
+        'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
+        'pageTitle': currentPageName
       };
 
       pushToDataLayerIfDefined(pageViewEvent);
+      
+      this.logEvent(currentPageName, analyticsPageEvents.ENTRY);
     },
 
     pushExperimentsToDataLayer(experiments){
@@ -75,19 +80,36 @@ export default {
         // Push to the data layer with the Google Custom Dimension Index.
         pushToDataLayerIfDefined(experimentWithDimension);
       });
-    },
-      this.logEvent(pageName, analyticsPageEvents.ENTRY);
     }
   },
   computed: {
-    storeActions() {
-      return storeActions;
+    analyticsPageEvents() {
+      return analyticsPageEvents;
     },
-  },
+    analyticsCategories() {
+      return analyticsCategories;
+    },
+    analyticsActions() {
+      return analyticsActions;
+    },
+    analyticsLabels() {
+      return analyticsLabels;
+    }
+  }
 };
 
 function pushToDataLayerIfDefined(data) {
   if (window.dataLayer !== undefined) {
     window.dataLayer.push(data);
   }
+}
+
+function getPageNameByQueryString() {
+  const params = new URLSearchParams(location.search);
+
+  if(params.has(queryStrings.FMG_PAGE)) {
+    return params.get(queryStrings.FMG_PAGE);
+  }else{
+    return '';
+  }
 }

src/router/index.js

@@ -5,7 +5,6 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import { globalEvents, globalEventTypes } from "@/constants/events";
 import { queryStrings } from "@/constants/query-strings";
-import { analyticsPageEvents } from "./router-constants/analytics-page-events";
 import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
 
 // Heritage integration