Add translated strings as data Attrs to the SUPR-Q surveys, to use wh…

…en dynamically building the survey
mozilla · May 28, 2021 · 18984ba · 18984ba
1 parent 696735a
commit 18984ba
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 13 deletions.
diff --git a/privaterelay/locales/en/privaterelay/app.ftl b/privaterelay/locales/en/privaterelay/app.ftl
@@ -195,3 +195,13 @@ survey-question-3 = Do you feel Relay is trustworthy?
 survey-question-4 = Does Relay have a clean and simple presentation?
 survey-question-5 = How would you feel if you could no longer use Relay?
 
+survey-option-strongly-disagree = Strongly disagree
+survey-option-disagree = Disagree
+survey-option-unsure = Unsure
+survey-option-agree = Agree
+survey-option-strongly-agree = Strongly agree
+survey-option-i-wouldnt-care = I wouldn't care
+survey-option-somewhat-disappointed = Somewhat disappointed
+survey-option-very-disappointed = Very disappointed
+survey-option-very-likely = Very likely
+survey-option-not-likely = Not likely
diff --git a/privaterelay/templates/includes/header.html b/privaterelay/templates/includes/header.html
@@ -16,19 +16,44 @@
       {% now "U" as now_second %}
       {% if now_second|last == "1" or now_second|last == "6" %}
         <span id="micro-survey-prompt" data-survey-type="nps">{% ftlmsg 'survey-question-1' %}</span>
-        <ul id="micro-survey-options" class="micro-survey-options micro-survey-options-numeric"></ul>
+        <ul id="micro-survey-options"
+        data-survey-option-very-likely-translated="{% ftlmsg 'survey-option-very-likely' %}"
+        data-survey-option-not-likely-translated="{% ftlmsg 'survey-option-not-likely' %}"
+        class="micro-survey-options micro-survey-options-numeric"></ul>
       {% elif now_second|last == "2" or now_second|last == "7" %}
         <span id="micro-survey-prompt" data-survey-type="usability">{% ftlmsg 'survey-question-2' %}</span>
-        <ul id="micro-survey-options" class="micro-survey-options micro-survey-options-likert"></ul>
+        <ul id="micro-survey-options"
+        data-survey-option-strongly-disagree-translated="{% ftlmsg 'survey-option-strongly-disagree' %}"
+        data-survey-option-disagree-translated="{% ftlmsg 'survey-option-disagree' %}"
+        data-survey-option-unsure-translated="{% ftlmsg 'survey-option-unsure' %}"
+        data-survey-option-agree-translated="{% ftlmsg 'survey-option-agree' %}"
+        data-survey-option-strongly-agree-translated="{% ftlmsg 'survey-option-strongly-agree' %}"
+        class="micro-survey-options micro-survey-options-likert"></ul>
       {% elif now_second|last == "3" or now_second|last == "8" %}
         <span id="micro-survey-prompt" data-survey-type="credibility">{% ftlmsg 'survey-question-3' %}</span>
-        <ul id="micro-survey-options" class="micro-survey-options micro-survey-options-likert"></ul>
+        <ul id="micro-survey-options"
+        data-survey-option-strongly-disagree-translated="{% ftlmsg 'survey-option-strongly-disagree' %}"
+        data-survey-option-disagree-translated="{% ftlmsg 'survey-option-disagree' %}"
+        data-survey-option-unsure-translated="{% ftlmsg 'survey-option-unsure' %}"
+        data-survey-option-agree-translated="{% ftlmsg 'survey-option-agree' %}"
+        data-survey-option-strongly-agree-translated="{% ftlmsg 'survey-option-strongly-agree' %}"
+        class="micro-survey-options micro-survey-options-likert"></ul>
       {% elif now_second|last == "4" or now_second|last == "9" %}
         <span id="micro-survey-prompt" data-survey-type="appearance">{% ftlmsg 'survey-question-4' %}</span>
-        <ul id="micro-survey-options" class="micro-survey-options micro-survey-options-likert"></ul>
+        <ul id="micro-survey-options"
+        data-survey-option-strongly-disagree-translated="{% ftlmsg 'survey-option-strongly-disagree' %}"
+        data-survey-option-disagree-translated="{% ftlmsg 'survey-option-disagree' %}"
+        data-survey-option-unsure-translated="{% ftlmsg 'survey-option-unsure' %}"
+        data-survey-option-agree-translated="{% ftlmsg 'survey-option-agree' %}"
+        data-survey-option-strongly-agree-translated="{% ftlmsg 'survey-option-strongly-agree' %}"
+        class="micro-survey-options micro-survey-options-likert"></ul>
       {% else %}
         <span id="micro-survey-prompt" data-survey-type="pmf">{% ftlmsg 'survey-question-5' %}</span>
-        <ul id="micro-survey-options" class="micro-survey-options micro-survey-options-likert"></ul>
+        <ul id="micro-survey-options" 
+        data-survey-option-i-wouldnt-care-translated="{% ftlmsg 'survey-option-i-wouldnt-care' %}"
+        data-survey-option-somewhat-disappointed-translated="{% ftlmsg 'survey-option-somewhat-disappointed' %}"
+        data-survey-option-not-likely-translated="{% ftlmsg 'survey-option-very-disappointed' %}"
+        class="micro-survey-options micro-survey-options-likert"></ul>
       {% endif %}
     </div>
   {% endif %}

diff --git a/static/js/analytics.js b/static/js/analytics.js
@@ -153,8 +153,7 @@ function analyticsSurveyLogic() {
   switch (surveyType) {
     case "nps": {
       const notLikely = document.createElement("li");
-      // TODO: Translate these strings
-      notLikely.textContent = "Not likely";
+      notLikely.textContent = surveyOptions.dataset.surveyOptionNotLikelyTranslated;
       notLikely.classList = "nps-bookend";
       surveyOptions.appendChild(notLikely);
       [...Array(10).keys()].forEach(option => {
@@ -194,23 +193,29 @@ function analyticsSurveyLogic() {
         surveyOptions.appendChild(li);
       });
       const veryLikely = document.createElement("li");
-      // TODO: Translate these strings
-      veryLikely.textContent = "Very likely";
+      veryLikely.textContent = surveyOptions.dataset.surveyOptionVeryLikelyTranslated;
       veryLikely.classList = "nps-bookend";
       surveyOptions.appendChild(veryLikely);
     break;
     }
     case "pmf": {
-      const options = [
+      let optionBuildIndex = 0;
+      // These labels are used for GA, and should remain in English 
+      const optionEventLabels = [
         "Very disappointed", "Somewhat disappointed", "I wouldn't care"
       ];
+      const options = [
+        surveyOptions.dataset.surveyOptionNotLikelyTranslated, // "Very disappointed"
+        surveyOptions.dataset.surveyOptionSomewhatDisappointedTranslated, // "Somewhat disappointed"
+        surveyOptions.dataset.surveyOptionIWouldntCareTranslated // "I wouldn't care"
+      ];
       options.forEach(option => {
         const li = document.createElement("li");
         li.classList = "micro-survey-option";
         li.textContent = option;
         li.dataset.eventCategory = "PMF Survey";
         li.dataset.eventAction = "submitted";
-        li.dataset.eventLabel = option;
+        li.dataset.eventLabel = optionEventLabels[optionBuildIndex];
         li.addEventListener("click", setSurveyedCookie);
         li.addEventListener("click", (evt) => {
           const eventData = li.dataset;
@@ -222,6 +227,7 @@ function analyticsSurveyLogic() {
           );
         });
         surveyOptions.appendChild(li);
+        optionBuildIndex++;
       });
       break;
     }
@@ -239,17 +245,26 @@ function analyticsSurveyLogic() {
         rankMetric = "metric9";
       }
 
-      const options = [
+      let optionBuildIndex = 0;
+      // These labels are used for GA, and should remain in English 
+      const optionEventLabels = [
         "Strongly disagree", "Disagree", "Unsure", "Agree", "Strongly agree"
       ];
+      const options = [
+        surveyOptions.dataset.surveyOptionStronglyDisagreeTranslated, // Strongly disagree
+        surveyOptions.dataset.surveyOptionDisagreeTranslated, // Disagree
+        surveyOptions.dataset.surveyOptionUnsureTranslated, // Unsure
+        surveyOptions.dataset.surveyOptionAgreeTranslated, // Agree
+        surveyOptions.dataset.surveyOptionStronglyAgreeTranslated, // Strongly agree"
+      ];
       let eventValue = 1;
       options.forEach(option => {
         const li = document.createElement("li");
         li.classList = "micro-survey-option";
         li.textContent = option;
         li.dataset.eventCategory = `SUPR-Q Survey ${surveyType}`;
         li.dataset.eventAction = "submitted";
-        li.dataset.eventLabel = option;
+        li.dataset.eventLabel = optionEventLabels[optionBuildIndex];
         li.dataset.eventValue = eventValue;
         li.addEventListener("click", setSurveyedCookie);
         li.addEventListener("click", (evt) => {
@@ -267,6 +282,7 @@ function analyticsSurveyLogic() {
           );
         });
         eventValue++;
+        optionBuildIndex++;
         surveyOptions.appendChild(li);
       });
       break;