Restore MaxDiff and NPS micro-survey in place of VPN Promo (#975)

* INCLUDE_VPN_PROMO env var * show NPS micro-survey after recruitment banner * fix NPS detractor/passive/promoter values Co-authored-by: groovecoder <>
mozilla · Jul 29, 2021 · 1e251c8 · groovecoder · Aug 13, 2021 · 1e251c8
1 parent 45f3a97
commit 1e251c8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/privaterelay/settings.py b/privaterelay/settings.py
@@ -106,6 +106,7 @@
 RELAY_FROM_ADDRESS = config('RELAY_FROM_ADDRESS', None)
 SITE_ORIGIN = config('SITE_ORIGIN', None)
 GOOGLE_ANALYTICS_ID = config('GOOGLE_ANALYTICS_ID', None)
+INCLUDE_VPN_BANNER = config('INCLUDE_VPN_BANNER', False, cast=bool)
 RECRUITMENT_BANNER_LINK = config('RECRUITMENT_BANNER_LINK', None)
 RECRUITMENT_BANNER_TEXT = config('RECRUITMENT_BANNER_TEXT', None)
 RECRUITMENT_EMAIL_BANNER_TEXT = config('RECRUITMENT_EMAIL_BANNER_TEXT', None)

diff --git a/privaterelay/templates/includes/header.html b/privaterelay/templates/includes/header.html
@@ -7,21 +7,27 @@
 
 <header class="flx flx-col spc-btwn">
 
-  {% include "includes/vpn-promo-banner.html" %}
+  {% if settings.INCLUDE_VPN_BANNER %}
+    {% include "includes/vpn-promo-banner.html" %}
+  {% endif %}
 
   {% if settings.RECRUITMENT_BANNER_LINK and LANGUAGE_CODE|slice:"0:2" == "en" %}
     <div class="recruitment-banner">
       <a id="recruitment-banner" class="text-link" href="{{ settings.RECRUITMENT_BANNER_LINK }}" target="_blank" rel="noopener noreferrer" data-ga="send-ga-funnel-pings" data-event-category="Recruitment" data-event-label="{{ settings.RECRUITMENT_BANNER_TEXT }}">{{ settings.RECRUITMENT_BANNER_TEXT }}</a>
     </div>
-  {% elif not request.user.is_anonymous %}
+  {% endif %}
+  {% if not request.user.is_anonymous %}
     <div id="micro-survey-banner" class="micro-survey-banner hidden">
+      {% comment %}
       {% now "U" as now_second %}
       {% if now_second|last == "1" or now_second|last == "6" %}
+      {% endcomment %}
         <span id="micro-survey-prompt" data-survey-type="nps">{% ftlmsg 'survey-question-1' %}</span>
         <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>
+      {% comment %}
       {% 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"
@@ -57,6 +63,7 @@
         data-survey-option-not-likely-translated="{% ftlmsg 'survey-option-very-disappointed' %}"
         class="micro-survey-options micro-survey-options-likert"></ul>
       {% endif %}
+      {% endcomment %}
     </div>
   {% endif %}
 

diff --git a/static/js/analytics.js b/static/js/analytics.js
@@ -133,6 +133,11 @@ function analyticsSurveyLogic() {
     return;
   }
 
+  const recruitmentSurveyBanner = document.getElementById("recruitment-banner");
+  if (recruitmentSurveyBanner) {
+    return;
+  }
+
   const microSurveyBanner = document.getElementById("micro-survey-banner");
   if (!microSurveyBanner) {
     return;
@@ -163,10 +168,10 @@ function analyticsSurveyLogic() {
         li.dataset.eventCategory = "NPS Survey";
         li.dataset.eventAction = "submitted";
         li.dataset.eventValue = option + 1;
-        if (option < 6) {
+        if (option <= 6) {
           li.dataset.eventLabel = "detractor";
           li.dataset.npsValue = -1;
-        } else if (option < 8) {
+        } else if (option <= 8) {
           li.dataset.eventLabel = "passive";
           li.dataset.npsValue = 0;
         } else {
@@ -292,7 +297,7 @@ function analyticsSurveyLogic() {
 }
 
 
-(()=> {
+document.addEventListener("DOMContentLoaded", () => {
 // Check for DoNotTrack header before running GA script
 
 if (!_dntEnabled()) {
@@ -359,4 +364,4 @@ if (!_dntEnabled()) {
       e.target.submit();
     });
   }
-})();
+});