From 08f43a15a272573cde421edb4b0cac2aee63557e Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 7 Oct 2022 15:29:32 -0400 Subject: [PATCH] CSR-762 GA WIP --- src/App.vue | 13 ++- .../base-input-button/base-input-button.vue | 90 +++++++++++++------ .../button-question/button-question.vue | 22 +++-- src/mixins/input-button-wrapper-mixin.js | 21 +++-- 4 files changed, 99 insertions(+), 47 deletions(-) diff --git a/src/App.vue b/src/App.vue index f84b92668..61c489ad3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,8 +12,8 @@ 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 12f2743b2..3473ee179 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -5,6 +5,8 @@ @focusin="handleFocus" @focusout="handleBlur" @mousedown.left="handleEventAction('click', $event)"> + lastValuePushedToGa: {{ lastValuePushedToGa }}
+ 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) } } diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 2f4d1ec43..fbf819cd2 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -34,7 +34,6 @@ }}
- lastValuePushedToGa: {{ lastValuePushedToGa }}
@@ -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(); diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index fdf5b3fd1..cfda08c27 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -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: {