jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 Wrap up GA events

Browse source
This commit is contained in:
Katie 2022-09-30 09:20:15 -04:00
parent 62e3e2dfeb
commit 14bed5524c
5 changed files with 87 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/common-components/base-input-button/base-input-button.vue
View file

@ -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) {
const gaClickInformation = store.getters.gaClickInformation;
pushClickEventToGAIfReady(event) {
const gaClickInformation = this.$store.getters.gaClickInformation;
const firedGaClickEventValues =
gaClickInformation.firedGaClickEventValues;
const currentlySelectedValues =

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

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

66
src/mixins/base-mixin.js
View file

@ -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 });
return {
isValid: serviceZipValidationResponse.data.isValid,
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;
},
},

30
src/ux-components/button-main/button-main.vue
View file

@ -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' : '']"
@click="clicked"
>
:class="[
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;
}
}

10
src/ux-components/text-link/text-link.vue
View file

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