From e546bad283757216b7d50cafaf8efa19f76b7040 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Mon, 3 Oct 2022 13:18:08 -0400
Subject: [PATCH 1/2] CSR-762 GA WIP

---
 src/App.vue                                   |  16 +-
 .../base-input-button/base-input-button.vue   | 198 +++++++++---------
 .../button-question/button-question.vue       |  29 ++-
 src/constants/store-actions.js                |  10 +-
 src/constants/store-mutations.js              |  10 +-
 src/main.js                                   |   2 -
 src/mixins/analytics-mixin.js                 |   2 +
 src/mixins/base-mixin.js                      |  15 +-
 src/store/gaState.js                          |  72 -------
 src/store/index.js                            |  12 +-
 src/ux-components/button-main/button-main.vue |   2 -
 11 files changed, 152 insertions(+), 216 deletions(-)
 delete mode 100644 src/store/gaState.js

diff --git a/src/App.vue b/src/App.vue
index 71b56feaf..501c46fd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,11 +2,25 @@
   <router-view v-slot="{ Component }">
     <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
       <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
-      <component :is="Component" />
+      <component :is="Component" @input-focus="handleFocus" @input-blur="handleBlur"/>
     </transition>
   </router-view>
 </template>
 
+<script>
+  export default {
+    name: "app",
+    methods: {
+      handleFocus(e) {
+        console.log("app focus: ", e)
+      },
+      handleBlur(e) {
+        console.log("app blur: ", e)
+      }
+    }
+  }
+</script>
+
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-styles.scss";
diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue
index 46ad82b6d..d6c63b06c 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -2,8 +2,7 @@
     <label
         :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
         :for="buttonId"
-        @mousedown.left="handleEventAction('click', $event)"
-        @keyup="handleKeyboardNavigation">
+        @mousedown.left="handleEventAction('click', $event)">
         <input
             :type="inputType"
             :id="buttonId"
@@ -13,7 +12,6 @@
             :aria-required="isRequired"
             :value="value"
             :checked="isChecked"
-            @blur="handleBlur"
             @keypress.enter="handleEventAction('keypressSubmit', $event)"
             @change="handleEventAction('change', $event)" />
 
@@ -22,10 +20,10 @@
 </template>
 
 <script>
-import { queryStrings } from "@/constants/query-strings";
+// import { queryStrings } from "@/constants/query-strings";
 import { useField } from "vee-validate";
 import { toRef } from "vue";
-import { gaStoreActions } from "../../constants/store-actions";
+// import { gaStoreActions } from "../../constants/store-actions";
 
 export default {
     name: "base-input-button",
@@ -84,13 +82,13 @@ export default {
                     case eventTypes.KEYPRESS_SUBMIT:
                     case eventTypes.CHANGE:
                         this.handleClick(e);
-                        this.dispatchStoreAction(
-                            gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                            this.groupName,
-                            false
-                        );
+                        // this.dispatchStoreAction(
+                        //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
+                        //     this.groupName,
+                        //     false
+                        // );
                         
-                        this.pushClickEventToGA();
+                        // this.pushClickEventToGA();
                         break;
                 }
             } else {
@@ -98,7 +96,7 @@ export default {
                     case eventTypes.CLICK:
                     case eventTypes.KEYPRESS_SUBMIT:
                         this.handleClick(e);
-                        this.pushClickEventToGAIfReady();
+                        // this.pushClickEventToGAIfReady();
                         break;
                     case eventTypes.CHANGE:
                         this.selectOnKeypress
@@ -125,13 +123,13 @@ export default {
                 this.valueToEmit = this.value;
             }
 
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
-                {
-                    groupName: this.groupName,
-                    value: this.value,
-                },
-            );
+            // this.dispatchStoreAction(
+            //     gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
+            //     {
+            //         groupName: this.groupName,
+            //         value: this.value,
+            //     },
+            // );
 
             this.handleChange(this.valueToEmit);
         },
@@ -139,90 +137,90 @@ export default {
             this.handleSelectionChange(e);
             this.$emit("buttonClicked", this.valueToEmit);
         },
-        pushClickEventToGA(value) {
-            const lastFocusedInputGroup =
-                this.$store.getters.gaClickInformation.lastFocusedInputGroup;
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
-                {
-                    groupName: lastFocusedInputGroup,
-                    value: value ?? this.value,
-                },
-            );
+        // pushClickEventToGA(value) {
+        //     const lastFocusedInputGroup =
+        //         this.$store.getters.gaClickInformation.lastFocusedInputGroup;
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+        //     //     {
+        //     //         groupName: lastFocusedInputGroup,
+        //     //         value: value ?? this.value,
+        //     //     },
+        //     // );
 
-            this.pushEventToGA(
-                this.$route.query[queryStrings.FMG_PAGE],
-                this.GaActions.CLICKED,
-                value?.toString() ?? this.value?.toString(),
-                true,
-                this.valueToLogType
-            );
-        },
-        handleBlur() {
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                this.groupName,
-                false
-            );
-            this.dispatchStoreAction(
-                gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
-                this.isMultiSelect,
-                false
-            );
-        },
-        handleKeyboardNavigation(key) {
-            this.pushClickEventToGAIfReady(key);
-        },
-        pushClickEventToGAIfReady(event) {
-            const gaClickInformation = this.$store.getters.gaClickInformation;
-            const firedGaClickEventValues =
-                gaClickInformation.firedGaClickEventValues;
-            const currentlySelectedValues =
-                gaClickInformation.currentlySelectedValues;
-            const lastFocusedInputGroup =
-                gaClickInformation.lastFocusedInputGroup;
-            const wasLastFocusedInputMultiselect =
-                gaClickInformation.wasLastFocusedInputMultiselect;
+        //     // this.pushEventToGA(
+        //     //     this.$route.query[queryStrings.FMG_PAGE],
+        //     //     this.GaActions.CLICKED,
+        //     //     value?.toString() ?? this.value?.toString(),
+        //     //     true,
+        //     //     this.valueToLogType
+        //     // );
+        // },
+        // handleBlur() {
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
+        //     //     this.groupName,
+        //     //     false
+        //     // );
+        //     // this.dispatchStoreAction(
+        //     //     gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
+        //     //     this.isMultiSelect,
+        //     //     false
+        //     // );
+        // },
+        // handleKeyboardNavigation(key) {
+        //     this.pushClickEventToGAIfReady(key);
+        // },
+        // pushClickEventToGAIfReady(event) {
+        //     const gaClickInformation = this.$store.getters.gaClickInformation;
+        //     const firedGaClickEventValues =
+        //         gaClickInformation.firedGaClickEventValues;
+        //     const currentlySelectedValues =
+        //         gaClickInformation.currentlySelectedValues;
+        //     const lastFocusedInputGroup =
+        //         gaClickInformation.lastFocusedInputGroup;
+        //     const wasLastFocusedInputMultiselect =
+        //         gaClickInformation.wasLastFocusedInputMultiselect;
 
-            const keyCode = event?.code;
-            // Keyboard navigation
-            if (keyCode) {
-                if (
-                    !wasLastFocusedInputMultiselect &&
-                    currentlySelectedValues[lastFocusedInputGroup] &&
-                    firedGaClickEventValues[lastFocusedInputGroup] !=
-                        currentlySelectedValues[lastFocusedInputGroup]
-                ) {
-                    if (keyCode === "Tab") {
-                        this.pushClickEventToGA(
-                            currentlySelectedValues[lastFocusedInputGroup]
-                        );
-                    } else if (keyCode?.includes("Arrow")) {
-                        if (lastFocusedInputGroup != this.groupName) {
-                            this.pushClickEventToGA(
-                                currentlySelectedValues[lastFocusedInputGroup]
-                            );
-                        }
-                    }
-                }
-            } else {
-                // Radio click
-                this.dispatchStoreAction(
-                    gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                    this.groupName,
-                    false
-                );
+        //     const keyCode = event?.code;
+        //     // Keyboard navigation
+        //     if (keyCode) {
+        //         if (
+        //             !wasLastFocusedInputMultiselect &&
+        //             currentlySelectedValues[lastFocusedInputGroup] &&
+        //             firedGaClickEventValues[lastFocusedInputGroup] !=
+        //                 currentlySelectedValues[lastFocusedInputGroup]
+        //         ) {
+        //             if (keyCode === "Tab") {
+        //                 this.pushClickEventToGA(
+        //                     currentlySelectedValues[lastFocusedInputGroup]
+        //                 );
+        //             } else if (keyCode?.includes("Arrow")) {
+        //                 if (lastFocusedInputGroup != this.groupName) {
+        //                     this.pushClickEventToGA(
+        //                         currentlySelectedValues[lastFocusedInputGroup]
+        //                     );
+        //                 }
+        //             }
+        //         }
+        //     } else {
+        //         // Radio click
+        //         // this.dispatchStoreAction(
+        //         //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
+        //         //     this.groupName,
+        //         //     false
+        //         // );
                 
-                if (
-                    firedGaClickEventValues[this.groupName] !=
-                    currentlySelectedValues[this.groupName]
-                ) {
-                    this.pushClickEventToGA(
-                        currentlySelectedValues[this.groupName]
-                    );
-                } 
-            }
-        },
+        //         if (
+        //             firedGaClickEventValues[this.groupName] !=
+        //             currentlySelectedValues[this.groupName]
+        //         ) {
+        //             this.pushClickEventToGA(
+        //                 currentlySelectedValues[this.groupName]
+        //             );
+        //         } 
+        //     }
+        // },
     },
     computed: {
         isChecked() {
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 1346a4f0e..a13cd4663 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -18,7 +18,9 @@
                 :aria-required="isRequired"
                 :class="getFieldSetClasses"
                 :role="isMultiSelect ? 'group' : 'radiogroup'"
-                :aria-labelledby="formatString(groupName)">
+                :aria-labelledby="formatString(groupName)"
+                @focusin="handleFocus"
+                @focusout="handleBlur">
                 <legend
                     class="sr-only"
                     :data-focus-target="formatString(groupName)"
@@ -77,8 +79,9 @@
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
-import { ErrorMessage } from "vee-validate";
 import radio from "@/ux-components/radio/radio";
+import { ErrorMessage } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
 
 export default {
     name: "buttonQuestion",
@@ -219,9 +222,31 @@ export default {
         },
         handleAnswerChange(primaryAnswerValue) {
             this.primaryValue = primaryAnswerValue;
+            console.log("hAC: ", primaryAnswerValue)
             this.$emit("buttonQuestionChange", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
         },
+        pushClickEventToGA(e, value) {
+            this.pushEventToGA(
+                this.$route.query[queryStrings.FMG_PAGE],
+                this.GaActions.CLICKED,
+                value?.toString() ?? this.primaryValue?.toString(),
+                true,
+                this.valueToLogType
+            );
+        },
+        handleFocus() {
+            this.$emit("inputFocus", {
+                groupName: this.groupName,
+                value: this.primaryValue
+            })
+        },
+        handleBlur() {
+            this.$emit("inputBlur", {
+                groupName: this.groupName,
+                value: this.primaryValue
+            })
+        }
     },
     components: {
         listButton,
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index fd2fad8fa..1545a1d61 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -65,12 +65,4 @@ const storeActions = {
   SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
 };
 
-const gaStoreActions = {
-  UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues",
-  UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues",
-  UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup",
-  UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT:
-    "updateWasLastFocusedInputMultiselect",
-};
-
-export { storeActions, gaStoreActions };
+export { storeActions };
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index e1ff971bf..70763c8d0 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -68,12 +68,4 @@ const storeMutations = {
   UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
 };
 
-const gaStoreMutations = {
-    UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues",
-    UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues",
-    UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup",
-    UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT:
-        "updateWasLastFocusedInputMultiselect",
-};
-
-export { storeMutations, gaStoreMutations };
+export { storeMutations };
diff --git a/src/main.js b/src/main.js
index 37c623b0b..01aa5406d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,14 +8,12 @@ import baseMixin from "@/mixins/base-mixin.js";
 import analyticsMixin from "@/mixins/analytics-mixin.js";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
-import gaState from "./store/gaState";
 
 // Vue App Setup
 const vueApp = createApp(App);
 
 vueApp.use(router);
 vueApp.use(store);
-vueApp.use(gaState)
 vueApp.use(LoadScript);
 vueApp.use(Maska);
 vueApp.mixin(baseMixin);
diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js
index 6eb18e462..1f535762b 100644
--- a/src/mixins/analytics-mixin.js
+++ b/src/mixins/analytics-mixin.js
@@ -57,6 +57,8 @@ export default {
         'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
 
+      console.log("PUSHING: ", labelToLog)
+
       pushToDataLayerIfDefined(eventToBePushed);
 
       if (pushToLogApp) {
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index feac379f1..9e99307ee 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -6,7 +6,6 @@ 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 { gaStoreActions } from "../constants/store-actions";
 
 export default {
   data() {
@@ -79,13 +78,13 @@ export default {
       ) {
         const value =
           currentlySelectedValues[lastFocusedInputGroup]?.toString();
-        this.dispatchStoreAction(
-          gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
-          {
-            groupName: lastFocusedInputGroup,
-            value: value,
-          }
-        );
+        // this.dispatchStoreAction(
+        //   gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
+        //   {
+        //     groupName: lastFocusedInputGroup,
+        //     value: value,
+        //   }
+        // );
 
         this.pushEventToGA(
           this.$route.query[queryStrings.FMG_PAGE],
diff --git a/src/store/gaState.js b/src/store/gaState.js
deleted file mode 100644
index ab8e2dff8..000000000
--- a/src/store/gaState.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { gaStoreMutations } from "@/constants/store-mutations";
-
-// Export State
-const getDefaultState = () => {
-  return {
-    gaClickInformation: {
-      currentlySelectedValues: {},
-      firedGaClickEventValues: {},
-      lastFocusedInputGroup: "",
-      wasLastFocusedInputMultiselect: undefined,
-    },
-  };
-};
-
-export const gaState = getDefaultState();
-
-// Export Mutations
-export const gaMutations = {
-  updateCurrentlySelectedValues(state, { groupName, value }) {
-    state.gaClickInformation.currentlySelectedValues[groupName] = value;
-  },
-  updateFiredGaClickEventValues(state, { groupName, value }) {
-    state.gaClickInformation.firedGaClickEventValues[groupName] = value;
-  },
-  updateLastFocusedInputGroup(state, groupName) {
-    state.gaClickInformation.lastFocusedInputGroup = groupName;
-  },
-  updateWasLastFocusedInputMultiselect(state, wasLastFocusedInputMultiselect) {
-    state.gaClickInformation.wasLastFocusedInputMultiselect =
-      wasLastFocusedInputMultiselect;
-  },
-};
-
-// Export Getters
-export const getters = {
-  gaClickInformation: (state) => state.gaClickInformation,
-};
-
-// Export Actions
-export const gaActions = {
-  updateCurrentlySelectedValues(context, { groupName, value }) {
-    context.commit(gaStoreMutations.UPDATE_CURRENTLY_SELECTED_VALUES, {
-      groupName,
-      value,
-    });
-  },
-  updateFiredGaClickEventValues(context, { groupName, value }) {
-    context.commit(gaStoreMutations.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, {
-      groupName,
-      value,
-    });
-  },
-  updateLastFocusedInputGroup(context, groupName) {
-    context.commit(gaStoreMutations.UPDATE_LAST_FOCUSED_INPUT_GROUP, groupName);
-  },
-  updateWasLastFocusedInputMultiselect(
-    context,
-    wasLastFocusedInputMultiselect
-  ) {
-    context.commit(
-      gaStoreMutations.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
-      wasLastFocusedInputMultiselect
-    );
-  },
-};
-
-export default {
-  state: gaState,
-  mutations: gaMutations,
-  getters,
-  actions: gaActions,
-};
diff --git a/src/store/index.js b/src/store/index.js
index 80dbae835..91347de94 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,7 +9,6 @@ import { applicationConfig } from "@/constants/application-config";
 import { experimentTriggers } from "@/constants/experiments";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import gaState from "./gaState";
 
 // Export State
 const getDefaultState = () => {
@@ -1362,16 +1361,7 @@ export const actions = {
 };
 
 export default createStore({
-  plugins: [createPersistedState({
-    reducer: state => {
-      const { gaState, ...rest } = state    // Make sure gaState isn't persisted
-      return rest
-    }
-  })],
-  modules: {
-    gaState,
-  },
-
+  plugins: [createPersistedState()],
   // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
   //    * The CMS can reference the fields by name
   //    * Return users may have a previous "version" of the model, and we don't want
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 7db1dc5bf..ade0a0730 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -19,8 +19,6 @@
 
 <script>
 import loader from "@/ux-components/loader/loader";
-import { gaStoreActions } from "../../constants/store-actions";
-import { queryStrings } from "../../constants/query-strings";
 
 export default {
   name: "buttonMain",

From a6d8a5d8d1f08833c902b10e96baa20f99f6eb90 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 4 Oct 2022 14:43:43 -0400
Subject: [PATCH 2/2] CSR-762 GA WIP, think it's working but needs more testing

---
 .prettierrc                                   |  2 +-
 src/App.vue                                   | 69 ++++++++++++-------
 .../button-question/button-question.vue       | 57 ++++++++++-----
 src/mixins/base-mixin.js                      | 62 ++++++++---------
 4 files changed, 115 insertions(+), 75 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index f1c8e7129..21209f49e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
-    "tabWidth": 2,
+    "tabWidth": 4,
     "bracketSameLine": true
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index e09e04c99..6693b2955 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,36 +1,57 @@
 <template>
-  <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
-      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
-      <component :is="Component" @inputFocus="handleFocus" @input-blur="handleBlur"/>
-    </transition>
-  </router-view>
+    <router-view v-slot="{ Component }">
+        lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
+        <transition
+            :duration="{ enter: 200, leave: 200 }"
+            name="route-fade"
+            mode="out-in">
+            <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
+            <component :is="Component" @focusin="handleChildFocus" />
+        </transition>
+    </router-view>
 </template>
 
 <script>
-  export default {
+export default {
     name: "app",
     data() {
-      return {
-        lastFocusedInputGroupName: "",
-        onFocusCallback: null
-      }
+        return {
+            lastFocusedInputGroupName: "",
+            onFocusCallback: null,
+        };
     },
     methods: {
-      handleFocus(e) {
-        console.log("app focus: ", e)
-      },
-      handleBlur(e) {
-        console.log("app blur: ", e)
-      },
-    }
-  }
+        handleChildFocus(e) {
+            const targetType = e.target.type;
+            if (targetType !== "radio") {
+                this.handleInputFocus({
+                    groupName: null
+                });
+            }
+        },
+        handleInputFocus(e) {
+            if (
+                e &&
+                this.lastFocusedInputGroupName !== e.groupName &&
+                this.onFocusCallback
+            ) {
+                this.onFocusCallback();
+            }
+        },
+        handleInputBlur(e) {
+            if (e) {
+                this.lastFocusedInputGroupName = e.groupName;
+                this.onFocusCallback = e.onFocusCallback;
+            }
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-  @import "./node_modules/bootstrap/scss/bootstrap";
-  @import "@/styles/common-styles.scss";
-  @import "@/styles/common-typography-styles.scss";
-  @import "@/styles/common-error-styles.scss";
-  @import "@/styles/common-animations.scss";
+@import "./node_modules/bootstrap/scss/bootstrap";
+@import "@/styles/common-styles.scss";
+@import "@/styles/common-typography-styles.scss";
+@import "@/styles/common-error-styles.scss";
+@import "@/styles/common-animations.scss";
 </style>
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 8d3abb287..7099e6227 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -125,7 +125,8 @@ export default {
     data() {
         return {
             primaryValue: "",
-            lastFocusedInputGroup: "",
+            // lastFocusedInputGroup: "",
+            lastPushedGaEventValue: null,
         };
     },
     computed: {
@@ -197,6 +198,9 @@ export default {
                 })
             );
         },
+        isValueSelectedOnClick() {
+            return this.isMultiSelect || this.selectingInitiatesLoad;
+        },
     },
     methods: {
         formatString(str) {
@@ -222,31 +226,46 @@ export default {
         },
         handleAnswerChange(primaryAnswerValue) {
             this.primaryValue = primaryAnswerValue;
-            console.log("hAC: ", primaryAnswerValue)
+
+            this.pushClickEventToGA(null, primaryAnswerValue);
+
             this.$emit("buttonQuestionChange", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
         },
         pushClickEventToGA(e, value) {
-            this.pushEventToGA(
-                this.$route.query[queryStrings.FMG_PAGE],
-                this.GaActions.CLICKED,
-                value?.toString() ?? this.primaryValue?.toString(),
-                true,
-                this.valueToLogType
-            );
+            const valueToPushToGa =
+                value?.toString() ?? this.primaryValue?.toString();
+            console.log({
+                valueToPushToGa,
+                lastPushedGaEventValue: this.lastPushedGaEventValue,
+            });
+            if (valueToPushToGa !== this.lastPushedGaEventValue) {
+                this.lastPushedGaEventValue = valueToPushToGa;
+                this.pushEventToGA(
+                    this.$route.query[queryStrings.FMG_PAGE],
+                    this.GaActions.CLICKED,
+                    valueToPushToGa,
+                    true,
+                    this.valueToLogType
+                );
+            }
         },
-        handleFocus() {
-            this.$root.handleFocus({
-                groupName: this.groupName,
-                value: this.primaryValue
-            })
+        onFocusCallbackForRoot() {
+            if (!this.isValueSelectedOnClick) {
+                this.pushClickEventToGA();
+            }
         },
-        handleBlur() {
-            this.$root.handleBlur({
+        handleFocus(e) {
+            this.$root.handleInputFocus({
                 groupName: this.groupName,
-                value: this.primaryValue
-            })
-        }
+            });
+        },
+        handleBlur(e) {
+            this.$root.handleInputBlur({
+                groupName: this.groupName,
+                onFocusCallback: this.onFocusCallbackForRoot,
+            });
+        },
     },
     components: {
         listButton,
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 9e99307ee..d6a8ced7e 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -61,39 +61,39 @@ export default {
         state: serviceZipValidationResponse.data.state,
       };
     },
-    pushRadioClickEventIfNecessary() {
-      const {
-        firedGaClickEventValues,
-        currentlySelectedValues,
-        lastFocusedInputGroup,
-        wasLastFocusedInputMultiselect,
-      } = this.$store.getters.gaClickInformation;
+  //   pushRadioClickEventIfNecessary() {
+  //     const {
+  //       firedGaClickEventValues,
+  //       currentlySelectedValues,
+  //       lastFocusedInputGroup,
+  //       wasLastFocusedInputMultiselect,
+  //     } = this.$store.getters.gaClickInformation;
 
-      // 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,
-        //   }
-        // );
+  //     // 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
-        );
-      }
-    },
+  //       this.pushEventToGA(
+  //         this.$route.query[queryStrings.FMG_PAGE],
+  //         this.GaActions.CLICKED,
+  //         value,
+  //         true
+  //       );
+  //     }
+  //   },
   },
   computed: {
     storeActions() {