Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature] Record page helpful free text feedback in GA -- Staging #1418

Merged
merged 2 commits into from
Oct 30, 2024
Merged

[Feature] Record page helpful free text feedback in GA -- Staging #1418

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbb975b
[Feature] Record page helpful free text feedback in GA
levinmr Oct 28, 2024
83782fd
Merge pull request #1417 from 18F/feature/send_free_text_to_ga
levinmr Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 46 additions & 44 deletions js/components/touchpoints_page_helpful_survey/TouchpointsPageHelpfulSurvey.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,25 @@ function TouchpointsPageHelpfulSurvey() {
.formComponent()
.getAttribute("data-touchpoints-form-id") === "8fc3c209"
) {
/**
* Set an initial timeout for the form. If the form is submitted too
* quickly (because it's a bot), then sendFeedback is a no-op
*/
const originalSendFeedbackFunction =
e.detail.formComponent.sendFeedback;
/* eslint-disable no-empty */
e.detail.formComponent.sendFeedback = () => {};
/* eslint-enable no-empty */
const formComponent = e.detail.formComponent;
const formElement = formComponent.formComponent();
_delayFormSubmit(formComponent, initialFormDelayMilliseconds);

setTimeout(() => {
e.detail.formComponent.sendFeedback = originalSendFeedbackFunction;
}, initialFormDelayMilliseconds);

const touchpointsFooter = e.detail.formComponent
.formComponent()
.querySelector("footer.touchpoints-footer-banner");
const yesButton = e.detail.formComponent
.formComponent()
.querySelector('input.usa-radio__input[value="Yes"]');
const noButton = e.detail.formComponent
.formComponent()
.querySelector('input.usa-radio__input[value="No"]');
const questions = e.detail.formComponent
.formComponent()
.querySelectorAll(".questions .question");
const header = e.detail.formComponent
.formComponent()
.querySelector("header");
const submitButton = e.detail.formComponent
.formComponent()
.querySelector('button.submit_form_button[type="submit"]');
const touchpointsFooter = formElement.querySelector(
"footer.touchpoints-footer-banner",
);
const yesButton = formElement.querySelector(
'input.usa-radio__input[value="Yes"]',
);
const noButton = formElement.querySelector(
'input.usa-radio__input[value="No"]',
);
const feedbackTextArea = formElement.querySelector("textarea");
const questions = formElement.querySelectorAll(".questions .question");
const header = formElement.querySelector("header");
const submitButton = formElement.querySelector(
'button.submit_form_button[type="submit"]',
);

// Hide the touchpoints footer always
if (touchpointsFooter) {
Expand All @@ -62,7 +49,7 @@ function TouchpointsPageHelpfulSurvey() {
submitButton.classList.add("hide");
}

const handleYesNoButtonClick = (clickEvent, response) => {
const handleYesNoButtonClick = () => {
if (questions.length > 0 && header && submitButton) {
// Hide the first form question and the header. Show the second along
// with the submit button.
Expand All @@ -71,24 +58,24 @@ function TouchpointsPageHelpfulSurvey() {
questions[1].classList.remove("hide");
submitButton.classList.remove("hide");
}

// Send metrics for the yes/no button click
gas4("was_this_helpful_submit", {
event_category: "cx_feedback",
event_action: "was_this_page_helpful_v2.0",
event_label: response,
});
};

if (yesButton) {
yesButton.addEventListener("click", (event) => {
handleYesNoButtonClick(event, "yes");
});
yesButton.addEventListener("click", handleYesNoButtonClick);
}

if (noButton) {
noButton.addEventListener("click", (event) => {
handleYesNoButtonClick(event, "no");
noButton.addEventListener("click", handleYesNoButtonClick);
}

if (submitButton) {
submitButton.addEventListener("click", () => {
gas4("was_this_helpful_submit", {
event_category: "cx_feedback",
event_action: "was_this_page_helpful_v3.0",
event_label: yesButton.checked ? "yes" : "no",
reason: feedbackTextArea.value,
});
});
}
}
Expand All @@ -103,6 +90,21 @@ function TouchpointsPageHelpfulSurvey() {
);
}

function _delayFormSubmit(formComponent, delayMilliseconds) {
/**
* Set an initial timeout for the form. If the form is submitted too
* quickly (because it's a bot), then sendFeedback is a no-op
*/
const originalSendFeedbackFunction = formComponent.sendFeedback;
/* eslint-disable no-empty */
formComponent.sendFeedback = () => {};
/* eslint-enable no-empty */

setTimeout(() => {
formComponent.sendFeedback = originalSendFeedbackFunction;
}, delayMilliseconds);
}

TouchpointsPageHelpfulSurvey.propTypes = {};

export default TouchpointsPageHelpfulSurvey;