CSR-762 Wrap up GA events

src/common-components/base-input-button/base-input-button.vue

@@ -26,9 +26,9 @@ import { queryStrings } from "@/constants/query-strings";
 import { useField } from "vee-validate";
 import { toRef } from "vue";
 import { gaStoreActions } from "../../constants/store-actions";
-import store from "../../store";
 
-// TODO KO Bug: select a chip via radio button, hit continue - doesn't fire the chip number
+// TODO KO Bug: select crack via keyboard, continue - doesn't fire
+// TODO KO Bug: select a chip via keyboard, hit continue - doesn't fire the chip number
 export default {
     name: "base-input-button",
     emits: ["change"],
@@ -100,7 +100,7 @@ export default {
                     case eventTypes.CLICK:
                     case eventTypes.KEYPRESS_SUBMIT:
                         this.handleClick(e);
-                        this.test();
+                        this.pushClickEventToGAIfReady();
                         break;
                     case eventTypes.CHANGE:
                         this.selectOnKeypress
@@ -143,7 +143,7 @@ export default {
         },
         pushClickEventToGA(value) {
             const lastFocusedInputGroup =
-                store.getters.gaClickInformation.lastFocusedInputGroup;
+                this.$store.getters.gaClickInformation.lastFocusedInputGroup;
             this.dispatchStoreAction(
                 gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
                 {
@@ -173,10 +173,10 @@ export default {
             );
         },
         handleKeyboardNavigation(key) {
-            this.test(key);
+            this.pushClickEventToGAIfReady(key);
         },
-        test(event) {
+        pushClickEventToGAIfReady(event) {
-            const gaClickInformation = store.getters.gaClickInformation;
+            const gaClickInformation = this.$store.getters.gaClickInformation;
             const firedGaClickEventValues =
                 gaClickInformation.firedGaClickEventValues;
             const currentlySelectedValues =

src/common-components/funnel-sub-header/button-back/button-back.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     @click="handleClick"
+    @focus="pushRadioClickEventIfNecessary"
     class="back-button-wrapper"
     :aria-label="backButtonAccessibleText"
   >

src/mixins/base-mixin.js

@@ -6,12 +6,12 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import { routerParams } from "@/router/router-constants/router-params";
 import { queryStrings } from "@/constants/query-strings";
 import { dynamicStrings } from "@/constants/dynamic-strings";
-import { settleAllPromises } from "@/helpers/layout-helper";
+import { gaStoreActions } from "../constants/store-actions";
 
 export default {
   data() {
     return {
-      cmsContentByWidget: {}
+      cmsContentByWidget: {},
     };
   },
   methods: {
@@ -19,7 +19,9 @@ export default {
       this.$root.cmsContentByWidget = cmsContent;
     },
     getCmsContent(widgetName, fieldName) {
-      return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
+      return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName]
+        ? this.$root.cmsContentByWidget[widgetName][fieldName]
+        : "";
     },
     dispatchStoreAction(type, payload, encodePayload = true) {
       // Encode the payload if required
@@ -32,7 +34,7 @@ export default {
     savePageDataToStore(page, data) {
       store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
     },
-    onSubmit() { }, // DO NOT REMOVE; needed to prevent default form submit behavior. Cannot use .prevent modifier for vee-validate Form
+    onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior. Cannot use .prevent modifier for vee-validate Form
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       // get error names array
@@ -49,14 +51,52 @@ export default {
       return footerInfoBox ? footerInfoBox.offsetHeight : 0;
     },
     async getZipCodeData(zipCode) {
-      const serviceZipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: zipCode });
+      const serviceZipValidationResponse = await this.dispatchStoreAction(
+        storeActions.VALIDATE_ZIP,
+        { zip: zipCode }
+      );
 
       return {
         isValid: serviceZipValidationResponse.data.isValid,
         isServiceable: serviceZipValidationResponse.data.isServiceable,
-        state: serviceZipValidationResponse.data.state
+        state: serviceZipValidationResponse.data.state,
       };
-    }
+    },
+    pushRadioClickEventIfNecessary() {
+      const gaClickInformation = this.$store.getters.gaClickInformation;
+      const firedGaClickEventValues =
+        gaClickInformation.firedGaClickEventValues;
+      const currentlySelectedValues =
+        gaClickInformation.currentlySelectedValues;
+      const lastFocusedInputGroup = gaClickInformation.lastFocusedInputGroup;
+      const wasLastFocusedInputMultiselect =
+        gaClickInformation.wasLastFocusedInputMultiselect;
+
+      // Keyboard navigation
+      if (
+        !wasLastFocusedInputMultiselect &&
+        currentlySelectedValues[lastFocusedInputGroup] &&
+        firedGaClickEventValues[lastFocusedInputGroup] !=
+          currentlySelectedValues[lastFocusedInputGroup]
+      ) {
+        const value =
+          currentlySelectedValues[lastFocusedInputGroup]?.toString();
+        this.dispatchStoreAction(
+          gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+          {
+            groupName: lastFocusedInputGroup,
+            value: value,
+          }
+        );
+
+        this.pushEventToGA(
+          this.$route.query[queryStrings.FMG_PAGE],
+          this.GaActions.CLICKED,
+          value,
+          true
+        );
+      }
+    },
   },
   computed: {
     storeActions() {
@@ -74,13 +114,13 @@ export default {
     routerParams() {
       return routerParams;
     },
-    queryStrings(){
+    queryStrings() {
       return queryStrings;
     },
-    dynamicStrings(){
+    dynamicStrings() {
       return dynamicStrings;
     },
-    cssClassNameForCmsWidget(){
+    cssClassNameForCmsWidget() {
       return "widget-name-" + this.cmsWidgetName;
     },
   },

src/ux-components/button-main/button-main.vue

@@ -2,20 +2,25 @@
   <button
     :aria-disabled="isDisabled"
     class="btn d-flex align-items-center py-3 px-4 delay"
-    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
+    :class="[
-    @click="clicked"
+      isPrimary ? 'btn-primary' : 'btn-secondary',
-  >
+      isFloat ? 'float-end' : '',
+      isLoaderDisplayed ? 'has-loader' : '',
+    ]"
+    @focus="pushRadioClickEventIfNecessary"
+    @click="clicked">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
       v-if="isLoaderDisplayed"
-      v-bind:class="[this.loaderColor, this.loaderPosition]"
+      v-bind:class="[this.loaderColor, this.loaderPosition]" />
-    />
   </button>
 </template>
 
 <script>
 import loader from "@/ux-components/loader/loader";
+import { gaStoreActions } from "../../constants/store-actions";
+import { queryStrings } from "../../constants/query-strings";
 
 export default {
   name: "buttonMain",
@@ -33,11 +38,16 @@ export default {
     };
   },
   methods: {
-    removeLoader(){
+    removeLoader() {
       this.isLoaderDisplayed = false;
     },
     clicked() {
-      this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.buttonText, true);
+      this.pushEventToGA(
+        this.$route.query[this.queryStrings.FMG_PAGE],
+        this.GaActions.CLICKED,
+        this.buttonText,
+        true
+      );
       if (!this.isDisabled) {
         this.isLoaderDisplayed = true;
         this.$emit("click-event");
@@ -98,7 +108,8 @@ export default {
       background: $blue-700;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
     }
-    &.delay {// fixes flicker while transitioning between states
+    &.delay {
+      // fixes flicker while transitioning between states
       transition: background 0s 0s ease-in-out;
     }
   }
@@ -137,7 +148,8 @@ export default {
       color: $white;
       @include blue-gradient;
     }
-    &.delay {// fixes flicker while transitioning between states
+    &.delay {
+      // fixes flicker while transitioning between states
       transition: background 0s 0s ease-in-out;
     }
   }

src/ux-components/text-link/text-link.vue

@@ -1,9 +1,9 @@
 <template>
-  <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
+  <a v-if="linkType === 'navigation'" @click="handleClick" @focus="pushRadioClickEventIfNecessary" class="navigation-link" :href="href">{{text}}</a>
-  <a v-else-if="linkType === 'footer'" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
+  <a v-else-if="linkType === 'footer'" @click="handleClick" @focus="pushRadioClickEventIfNecessary" class="footer-link" :href="href" target="_blank">{{text}}</a>
-  <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'textSmall'" @click="handleClick" @focus="pushRadioClickEventIfNecessary" class="small" :href="href">{{text}}</a>
-  <a v-else-if="linkType === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'dashedUnderline'" @click="handleClick" @focus="pushRadioClickEventIfNecessary" class="dashed-underline" :href="href">{{text}}</a>
-  <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">{{text}}</a>
+  <a v-else-if="linkType === 'text'" @click="handleClick" @focus="pushRadioClickEventIfNecessary" :href="href">{{text}}</a>
 </template>
 
 <script>