CSR-762 GA WIP
This commit is contained in:
Katie
parent
ee53cac9e3
commit
08f43a15a2
4 changed files with 99 additions and 47 deletions
13
src/App.vue
13
src/App.vue
|
|
@ -12,8 +12,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// TODO KO glass-part-question has nested button questions
|
||||
// TODO KO selectedValues - make consistent for checkbox and radio if possible
|
||||
// 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() {
|
||||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
// console.log(targetType)
|
||||
if (targetType !== "radio" && targetType !== "checkbox") {
|
||||
this.handleInputFocus({
|
||||
groupName: null
|
||||
groupName: null,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -55,6 +55,13 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler() {
|
||||
this.lastFocusedInputGroup = null;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
@focusin="handleFocus"
|
||||
@focusout="handleBlur"
|
||||
@mousedown.left="handleEventAction('click', $event)">
|
||||
lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
|
||||
|
||||
<input
|
||||
:type="inputType"
|
||||
:id="buttonId"
|
||||
|
|
@ -61,10 +63,12 @@ export default {
|
|||
default: true,
|
||||
},
|
||||
isRequired: Boolean,
|
||||
lastValuePushedToGa: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
lastValuePushedToGa: [String, Number],
|
||||
setLastValuePushedToGa: Function
|
||||
// wasThisValueJustPushedToGa: {
|
||||
// type: [String, Number],
|
||||
// required: true,
|
||||
// },
|
||||
// fullName: {
|
||||
// type: String,
|
||||
// default: "",
|
||||
|
|
@ -75,6 +79,8 @@ export default {
|
|||
return {
|
||||
valueToEmit: null,
|
||||
// lastValuePushedToGa: null,
|
||||
// wasPushedToGa: false
|
||||
// wasThisValueJustPushedToGa: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -99,7 +105,7 @@ export default {
|
|||
|
||||
// even if it's pushing from here, it needs to keep track
|
||||
// of lastFocusedInputGroupName and such
|
||||
this.pushClickEventToGA();
|
||||
this.pushClickEventToGA("test");
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
|
|
@ -108,7 +114,7 @@ export default {
|
|||
case this.eventTypes.ENTER:
|
||||
case this.eventTypes.SPACE:
|
||||
this.handleClick(e);
|
||||
|
||||
this.pushClickEventToGA("test");
|
||||
// this.pushClickEventToGAIfReady();
|
||||
break;
|
||||
case this.eventTypes.CHANGE:
|
||||
|
|
@ -118,12 +124,13 @@ export default {
|
|||
break;
|
||||
}
|
||||
|
||||
if (eventType === this.eventTypes.CLICK) {
|
||||
console.log("PUSH FROM RADIO CLICK");
|
||||
this.pushClickEventToGA();
|
||||
}
|
||||
// if (eventType === this.eventTypes.CLICK) {
|
||||
// console.log("PUSH FROM RADIO CLICK");
|
||||
// this.pushClickEventToGA("test");
|
||||
// }
|
||||
}
|
||||
|
||||
// this.wasThisValueJustPushedToGa = false;
|
||||
// this.pushClickEventToGA(eventType);
|
||||
},
|
||||
handleSelectionChange(e) {
|
||||
|
|
@ -155,11 +162,18 @@ export default {
|
|||
},
|
||||
handleClick(e) {
|
||||
this.handleSelectionChange(e);
|
||||
console.log("inputButtonClicked");
|
||||
this.$emit("inputButtonClicked", {
|
||||
selectedAnswers: this.valueToEmit,
|
||||
lastValuePushedToGa: this.lastValuePushedToGa,
|
||||
});
|
||||
|
||||
// TODO KO NOTES
|
||||
// if you click on a radio button > go to another button > go back to original > tab out
|
||||
// shouldn't do anything, but it does because wasThisValueJustPushedToGa gets set to false?
|
||||
// console.log("---inputButtonClicked: ", {
|
||||
// value: this.value,
|
||||
// // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa
|
||||
// });
|
||||
// const lastValuePushedToGa = this.wasThisValueJustPushedToGa ? this.value : null;
|
||||
// this.wasThisValueJustPushedToGa = false;
|
||||
|
||||
this.$emit("inputButtonClicked", this.valueToEmit);
|
||||
},
|
||||
onFocusCallbackForRoot() {
|
||||
// console.log("onFocusCallbackForRoot: ", {
|
||||
|
|
@ -200,19 +214,41 @@ export default {
|
|||
onFocusCallback: this.onFocusCallbackForRoot,
|
||||
});
|
||||
},
|
||||
pushClickEventToGA(eventType) {
|
||||
if (this.isMultiSelect || !eventType) {
|
||||
console.log("PUSHING: ", this.value);
|
||||
|
||||
// TODO KO NOTES
|
||||
// base-input-button has the value to push to GA and the click vs focus events
|
||||
// but button-question would have to keep track of the button group's last held value
|
||||
// is there a way to make each individual button hold the group's last held value
|
||||
// WITHOUT listening to an event on each component that uses the button?
|
||||
|
||||
pushClickEventToGA(source) {
|
||||
if (source == "test") {
|
||||
// this.wasThisValueJustPushedToGa = true;
|
||||
// this.$emit("update:lastValuePushedToGa", this.value)
|
||||
console.log("------------------PUSHING 1: ", this.value);
|
||||
// this.$emit("gaClickEventPushed", this.value)
|
||||
this.setLastValuePushedToGa(this.value)
|
||||
|
||||
// this.wasPushedToGa = true
|
||||
} else {
|
||||
if (eventType === this.eventTypes.CLICK) {
|
||||
console.log("PUSHING: ", this.value);
|
||||
} else {
|
||||
if (
|
||||
this.isChecked &&
|
||||
this.lastValuePushedToGa != this.value
|
||||
) {
|
||||
console.log("PUSHING: ", this.value);
|
||||
}
|
||||
// console.log("PCETGA: ", {
|
||||
// lastValuePushedToGa: this.lastValuePushedToGa,
|
||||
// isChecked: this.isChecked,
|
||||
// value: this.value,
|
||||
// // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa
|
||||
// });
|
||||
if (
|
||||
!this.isValueSelectedOnClick &&
|
||||
this.isChecked &&
|
||||
// !this.wasThisValueJustPushedToGa &&
|
||||
this.lastValuePushedToGa != this.value
|
||||
) {
|
||||
// this.$emit("update:lastValuePushedToGa", this.value)
|
||||
// this.wasPushedToGa = true
|
||||
// this.wasThisValueJustPushedToGa = true;
|
||||
console.log("------------------PUSHING 2: ", this.value);
|
||||
// this.$emit("gaClickEventPushed", this.value)
|
||||
this.setLastValuePushedToGa(this.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@
|
|||
}}
|
||||
</legend>
|
||||
<div :class="getComponentLoopWrapperClasses">
|
||||
lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
|
||||
<div
|
||||
:class="getComponentWrapperClasses"
|
||||
v-for="answer in buttonsInfo"
|
||||
|
|
@ -49,12 +48,13 @@
|
|||
:isMultiSelect="isMultiSelect"
|
||||
:value="answer.value"
|
||||
:modelValue="modelValue"
|
||||
v-model:lastValuePushedToGa="lastValuePushedToGa"
|
||||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||
:isWide="isWide"
|
||||
:validationRules="validationRules"
|
||||
:textPosition="textPosition"
|
||||
:selectOnKeypress="selectOnKeypress"
|
||||
:lastValuePushedToGa="lastValuePushedToGa"
|
||||
:setLastValuePushedToGa="setLastValuePushedToGa"
|
||||
@inputButtonClicked="handleAnswerChange" />
|
||||
<!-- For nested questions -->
|
||||
<transition name="fade" mode="out-in">
|
||||
|
|
@ -130,8 +130,8 @@ export default {
|
|||
return {
|
||||
selectedValues: "",
|
||||
// lastFocusedInputGroup: "",
|
||||
lastPushedGaEventValue: null,
|
||||
mostRecentlySelectedValue: null,
|
||||
lastValuePushedToGa: null,
|
||||
// mostRecentlySelectedValue: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -229,9 +229,12 @@ export default {
|
|||
: this.formatString(answer.toString());
|
||||
}
|
||||
},
|
||||
handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) {
|
||||
handleAnswerChange(selectedAnswers) {
|
||||
this.selectedValues = selectedAnswers;
|
||||
this.mostRecentlySelectedValue = mostRecentlySelectedValue;
|
||||
// if (lastValuePushedToGa) {
|
||||
// this.lastValuePushedToGa = lastValuePushedToGa;
|
||||
// // console.log("BQ lastValuePushedToGa: ", lastValuePushedToGa);
|
||||
// }
|
||||
|
||||
// if (this.isValueSelectedOnClick) {
|
||||
// this.pushClickEventToGA();
|
||||
|
|
@ -240,7 +243,10 @@ export default {
|
|||
this.$emit("buttonQuestionChange", selectedAnswers);
|
||||
this.$emit("update:modelValue", selectedAnswers);
|
||||
},
|
||||
/////////////////////////////
|
||||
/////////////////////////////
|
||||
setLastValuePushedToGa(lastValuePushedToGa) {
|
||||
this.lastValuePushedToGa = lastValuePushedToGa;
|
||||
},
|
||||
// onFocusCallbackForRoot() {
|
||||
// console.log("onFocusCallbackForRoot: ", {
|
||||
// isValueSelectedOnClick: this.isValueSelectedOnClick,
|
||||
|
|
@ -297,7 +303,7 @@ export default {
|
|||
// this.valueToLogType
|
||||
// );
|
||||
// },
|
||||
//////////////////////////////////
|
||||
//////////////////////////////////
|
||||
// pushClickEventToGA() {
|
||||
// // const valueToPushToGa =
|
||||
// // value?.toString() ?? this.selectedValues?.toString();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default {
|
|||
buttonImage: String,
|
||||
altText: {
|
||||
type: String,
|
||||
default: ""
|
||||
default: "",
|
||||
},
|
||||
textPosition: String,
|
||||
screenReaderOnlyText: String,
|
||||
|
|
@ -18,22 +18,25 @@ export default {
|
|||
isWide: Boolean,
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
// pushClickEventToGA: Function,
|
||||
lastValuePushedToGa: [String, Number]
|
||||
lastValuePushedToGa: [String, Number],
|
||||
setLastValuePushedToGa: Function
|
||||
},
|
||||
methods: {
|
||||
handleAnswerChange(e) {
|
||||
if (this.preHandleAnswerChange) {
|
||||
this.preHandleAnswerChange(e.selectedAnswers)
|
||||
this.preHandleAnswerChange(e);
|
||||
}
|
||||
|
||||
this.$emit("change", e.selectedAnswers);
|
||||
// this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
|
||||
|
||||
// console.log("IBWM: ", e)
|
||||
this.$emit("change", e);
|
||||
// if (e.lastValuePushedToGa) {
|
||||
// console.log("sup")
|
||||
// this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
|
||||
// }
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
// computed: {
|
||||
// selectedValueHandler: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue