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

CSR-762 GA WIP

Browse source
This commit is contained in:
Katie 2022-10-06 12:57:40 -04:00
parent 6e350ac050
commit ee53cac9e3
4 changed files with 260 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.vue
View file

@ -12,6 +12,8 @@
</template>
<script>
// TODO KO glass-part-question has nested button questions
// TODO KO selectedValues - make consistent for checkbox and radio if possible
export default {
name: "app",
data() {
@ -23,13 +25,18 @@ export default {
methods: {
handleChildFocus(e) {
const targetType = e.target.type;
if (targetType !== "radio") {
// console.log(targetType)
if (targetType !== "radio" && targetType !== "checkbox") {
this.handleInputFocus({
groupName: null
});
}
},
handleInputFocus(e) {
// console.log("app handleInputFocus: ", {
// lastFocusedInputGroupName: this.lastFocusedInputGroupName,
// groupName: e.groupName,
// })
if (
e &&
this.lastFocusedInputGroupName !== e.groupName &&
@ -39,6 +46,9 @@ export default {
}
},
handleInputBlur(e) {
// console.log("app handleInputBlur: ", {
// groupName: e.groupName,
// })
if (e) {
this.lastFocusedInputGroupName = e.groupName;
this.onFocusCallback = e.onFocusCallback;

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

@ -2,6 +2,8 @@
<label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@focusin="handleFocus"
@focusout="handleBlur"
@mousedown.left="handleEventAction('click', $event)">
<input
:type="inputType"
@ -59,10 +61,20 @@ export default {
default: true,
},
isRequired: Boolean,
lastValuePushedToGa: {
type: [String, Number],
required: true,
},
// fullName: {
// type: String,
// default: "",
// required: true,
// },
},
data() {
return {
valueToEmit: null,
// lastValuePushedToGa: null,
};
},
mounted() {
@ -72,19 +84,12 @@ export default {
},
methods: {
handleEventAction(eventType, e) {
const eventTypes = {
CHANGE: "change",
ENTER: "enter",
SPACE: "space",
CLICK: "click",
};
// console.log("Handling: ", eventType)
if (this.isMultiSelect) {
switch (eventType) {
case eventTypes.ENTER:
case eventTypes.CHANGE:
case this.eventTypes.ENTER:
case this.eventTypes.CHANGE:
this.handleClick(e);
// this.dispatchStoreAction(
// gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
@ -92,26 +97,34 @@ export default {
// false
// );
// this.pushClickEventToGA();
// even if it's pushing from here, it needs to keep track
// of lastFocusedInputGroupName and such
this.pushClickEventToGA();
break;
}
} else {
switch (eventType) {
case eventTypes.CLICK: // TODO KO pushClickEventToGa?
this.pushClickEventToGA();
// fallthrough
case eventTypes.ENTER:
case eventTypes.SPACE:
case this.eventTypes.CLICK: // TODO KO pushClickEventToGa?
case this.eventTypes.ENTER:
case this.eventTypes.SPACE:
this.handleClick(e);
// this.pushClickEventToGAIfReady();
break;
case eventTypes.CHANGE:
case this.eventTypes.CHANGE:
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
break;
}
if (eventType === this.eventTypes.CLICK) {
console.log("PUSH FROM RADIO CLICK");
this.pushClickEventToGA();
}
}
// this.pushClickEventToGA(eventType);
},
handleSelectionChange(e) {
if (
@ -142,37 +155,76 @@ export default {
},
handleClick(e) {
this.handleSelectionChange(e);
// console.log("addEventToBus: ", this.value?.toString())
eventBus.readAndPopEventFromBus("GA", "click")
eventBus.addEventToBus("GA", "click", {
category: this.$route.query[queryStrings.FMG_PAGE],
action: this.GaActions.CLICKED,
label: this.value?.toString(),
pushToLogApp: true,
valueToLogType: this.valueToLogType,
console.log("inputButtonClicked");
this.$emit("inputButtonClicked", {
selectedAnswers: this.valueToEmit,
lastValuePushedToGa: this.lastValuePushedToGa,
});
this.$emit("inputButtonClicked", 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,
// },
// );
onFocusCallbackForRoot() {
// console.log("onFocusCallbackForRoot: ", {
// isValueSelectedOnClick: this.isValueSelectedOnClick,
// isChecked: this.isChecked,
// value: this.value,
// lastValuePushedToGa: this.lastValuePushedToGa,
// });
// if (
// !this.isValueSelectedOnClick &&
// this.isChecked &&
// this.lastValuePushedToGa != this.value
// ) {
// console.log("PUSH FROM ROOT CALLBACK");
// this.pushClickEventToGA();
// }
console.log("BIB")
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
value?.toString() ?? this.value?.toString(),
true,
this.valueToLogType
);
this.pushClickEventToGA();
},
handleFocus(e) {
// console.log("FOCUS: ", this.groupName);
// console.log("FOCUS :", {
// groupName: this.groupName,
// value: this.value,
// });
this.$root.handleInputFocus({
groupName: this.groupName,
});
},
handleBlur(e) {
// console.log("BLUR: ", this.groupName);
// console.log("BLUR :", {
// groupName: this.groupName,
// value: this.value
// })
this.$root.handleInputBlur({
groupName: this.groupName,
onFocusCallback: this.onFocusCallbackForRoot,
});
},
pushClickEventToGA(eventType) {
if (this.isMultiSelect || !eventType) {
console.log("PUSHING: ", this.value);
} else {
if (eventType === this.eventTypes.CLICK) {
console.log("PUSHING: ", this.value);
} else {
if (
this.isChecked &&
this.lastValuePushedToGa != this.value
) {
console.log("PUSHING: ", this.value);
}
}
}
// this.pushEventToGA(
// this.$route.query[queryStrings.FMG_PAGE],
// this.GaActions.CLICKED,
// this.value?.toString(),
// true,
// this.valueToLogType
// );
},
// handleBlur() {
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
@ -257,6 +309,25 @@ export default {
.toString()
?.replace(" ", "-")}`;
},
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
},
eventTypes() {
return {
CHANGE: "change",
ENTER: "enter",
SPACE: "space",
CLICK: "click",
};
},
// lastValuePushedToGaTest: {
// get: () => {
// return this.lastValuePushedToGa;
// },
// set: () => {
// this.$emit("valuePushedToGa", this.value);
// },
// },
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";

171
src/common-components/button-question/button-question.vue
View file

@ -34,6 +34,7 @@
}}
</legend>
<div :class="getComponentLoopWrapperClasses">
lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
<div
:class="getComponentWrapperClasses"
v-for="answer in buttonsInfo"
@ -48,6 +49,7 @@
:isMultiSelect="isMultiSelect"
:value="answer.value"
:modelValue="modelValue"
v-model:lastValuePushedToGa="lastValuePushedToGa"
:selectingInitiatesLoad="selectingInitiatesLoad"
:isWide="isWide"
:validationRules="validationRules"
@ -58,8 +60,8 @@
<transition name="fade" mode="out-in">
<div
v-if="
typeof primaryValue == 'string' &&
primaryValue == answer.value
typeof selectedValues == 'string' &&
selectedValues == answer.value
">
<slot></slot>
</div>
@ -126,9 +128,10 @@ export default {
},
data() {
return {
primaryValue: "",
selectedValues: "",
// lastFocusedInputGroup: "",
lastPushedGaEventValue: null,
mostRecentlySelectedValue: null,
};
},
computed: {
@ -200,9 +203,9 @@ export default {
})
);
},
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
},
// isValueSelectedOnClick() {
// return this.isMultiSelect || this.selectingInitiatesLoad;
// },
},
methods: {
formatString(str) {
@ -226,58 +229,118 @@ export default {
: this.formatString(answer.toString());
}
},
handleAnswerChange(primaryAnswerValue) {
this.primaryValue = primaryAnswerValue;
handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) {
this.selectedValues = selectedAnswers;
this.mostRecentlySelectedValue = mostRecentlySelectedValue;
if (this.isValueSelectedOnClick) {
this.pushClickEventToGA();
}
// if (this.isValueSelectedOnClick) {
// this.pushClickEventToGA();
// }
this.$emit("buttonQuestionChange", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue);
this.$emit("buttonQuestionChange", selectedAnswers);
this.$emit("update:modelValue", selectedAnswers);
},
pushClickEventToGA() {
// const valueToPushToGa =
// value?.toString() ?? this.primaryValue?.toString();
/////////////////////////////
// onFocusCallbackForRoot() {
// console.log("onFocusCallbackForRoot: ", {
// isValueSelectedOnClick: this.isValueSelectedOnClick,
// isChecked: this.isChecked,
// value: this.value,
// lastValuePushedToGa: this.lastValuePushedToGa,
// });
// if (
// !this.isValueSelectedOnClick &&
// // this.isChecked &&
// this.lastValuePushedToGa != this.mostRecentlySelectedValue
// ) {
// console.log("PUSH FROM ROOT CALLBACK");
// this.pushClickEventToGA();
// }
// },
// handleFocus(e) {
// // console.log("FOCUS :", {
// // groupName: this.groupName,
// // value: this.value,
// // });
// this.$root.handleInputFocus({
// groupName: this.groupName,
// });
// },
// handleBlur(e) {
// // console.log("BLUR :", {
// // groupName: this.groupName,
// // value: this.value
// // })
// this.$root.handleInputBlur({
// groupName: this.groupName,
// onFocusCallback: this.onFocusCallbackForRoot,
// });
// },
// pushClickEventToGA() {
// // const lastFocusedInputGroup =
// // this.$store.getters.gaClickInformation.lastFocusedInputGroup;
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
// // {
// // groupName: lastFocusedInputGroup,
// // value: value ?? this.value,
// // },
// // );
// console.log("pushing")
const event = eventBus.readAndPopEventFromBus("GA", "click");
const valueToPushToGa = event?.label;
// console.log({
// valueToPushToGa,
// lastPushedGaEventValue: this.lastPushedGaEventValue,
// });
if (
(valueToPushToGa &&
valueToPushToGa !== this.lastPushedGaEventValue) ||
this.isValueSelectedOnClick
) {
this.lastPushedGaEventValue = valueToPushToGa;
this.pushEventToGA(
event.category,
event.action,
valueToPushToGa,
event.pushToLogType,
event.valueToLogType
);
}
},
onFocusCallbackForRoot() {
if (!this.isValueSelectedOnClick) {
this.pushClickEventToGA();
}
},
handleFocus(e) {
this.$root.handleInputFocus({
groupName: this.groupName,
});
},
handleBlur(e) {
this.$root.handleInputBlur({
groupName: this.groupName,
onFocusCallback: this.onFocusCallbackForRoot,
});
},
// this.lastValuePushedToGa = this.mostRecentlySelectedValue;
// console.log("BIB");
// this.pushEventToGA(
// this.$route.query[queryStrings.FMG_PAGE],
// this.GaActions.CLICKED,
// this.mostRecentlySelectedValue?.toString(),
// true,
// this.valueToLogType
// );
// },
//////////////////////////////////
// pushClickEventToGA() {
// // const valueToPushToGa =
// // value?.toString() ?? this.selectedValues?.toString();
// // console.log("pushing")
// const event = eventBus.readAndPopEventFromBus("GA", "click");
// const valueToPushToGa = event?.label;
// console.log({
// valueToPushToGa,
// lastPushedGaEventValue: this.lastPushedGaEventValue,
// });onFocusCallbackForRoot() {
// console.log("Diff: ", this.isValueSelectedOnClick)
// if (!this.isValueSelectedOnClick) {
// this.pushClickEventToGA();
// }
// },
// handleFocus(e) {
// this.$root.handleInputFocus({
// groupName: this.groupName,
// });
// },
// handleBlur(e) {
// this.$root.handleInputBlur({
// groupName: this.groupName,
// onFocusCallback: this.onFocusCallbackForRoot,
// });
// },
// if (
// (event &&
// valueToPushToGa !== this.lastPushedGaEventValue) ||
// this.isValueSelectedOnClick
// ) {
// this.lastPushedGaEventValue = valueToPushToGa;
// this.pushEventToGA(
// event.category,
// event.action,
// valueToPushToGa,
// event.pushToLogType,
// event.valueToLogType
// );
// }
// },
//
},
components: {
listButton,

39
src/mixins/input-button-wrapper-mixin.js
View file

@ -19,33 +19,30 @@ export default {
isRequired: {
type: Boolean,
default: true
}
},
data() {
return {
selectedValue: null,
};
},
mounted() {
this.selectedValue = this.modelValue;
},
// pushClickEventToGA: Function,
lastValuePushedToGa: [String, Number]
},
methods: {
handleAnswerChange(e) {
if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e)
this.preHandleAnswerChange(e.selectedAnswers)
}
this.$emit("change", e);
this.$emit("change", e.selectedAnswers);
// this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
},
},
computed: {
selectedValue: {
get: () => {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
// computed: {
// selectedValueHandler: {
// get: () => {
// return this.modelValue;
// },
// set: function(newValue) {
// this.$emit("update:modelValue", newValue);
// }
// },
// },
};