Merge pull request #810 from alphagov/surveys-refactor

Refactor surveys javascript to support small test surveys
alphagov · Jul 20, 2016 · c26b099 · c26b099
2 parents cfb748b + ea0adc0
commit c26b099
Show file tree

Hide file tree

Showing 7 changed files with 329 additions and 262 deletions.
diff --git a/app/assets/javascripts/core.js b/app/assets/javascripts/core.js
@@ -17,31 +17,18 @@ $(document).ready(function() {
   });
 
   if (window.GOVUK) {
-    if (GOVUK.userSatisfaction){
-      var currentURL = window.location.pathname;
-
-      function stringContains(str, substr) {
-        return str.indexOf(substr) > -1;
-      }
-
-      // We don't want the satisfaction survey appearing for users who
-      // have completed a transaction as they may complete the survey with
-      // the department's transaction in mind as opposed to the GOV.UK content.
-      if (!stringContains(currentURL, "/done") &&
-          !stringContains(currentURL, "/transaction-finished") &&
-          !stringContains(currentURL, "/driving-transaction-finished")) {
-        GOVUK.userSatisfaction.randomlyShowSurveyBar();
-      }
+    if (GOVUK.userSurveys){
+      GOVUK.userSurveys.init();
     }
-  }
 
-  // for radio buttons and checkboxes
-  var buttonsSelector = "label.selectable input[type='radio'], label.selectable input[type='checkbox']";
-  new GOVUK.SelectionButtons(buttonsSelector);
+    // for radio buttons and checkboxes
+    var buttonsSelector = "label.selectable input[type='radio'], label.selectable input[type='checkbox']";
+    new GOVUK.SelectionButtons(buttonsSelector);
 
-  // HMRC webchat
-  if (GOVUK.webchat) {
-    GOVUK.webchat.init();
+    // HMRC webchat
+    if (GOVUK.webchat) {
+      GOVUK.webchat.init();
+    }
   }
 });
 

diff --git a/app/assets/javascripts/header-footer-only.js b/app/assets/javascripts/header-footer-only.js
@@ -2,7 +2,7 @@
 //= require vendor/polyfills/bind
 //= require analytics
 //= require start-modules
-//= require user-satisfaction-survey
+//= require surveys
 //= require core
 //= require report-a-problem-form
 //= require report-a-problem

diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js
@@ -0,0 +1,140 @@
+(function() {
+  "use strict";
+
+  var root = this,
+      $ = root.jQuery;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  var TEMPLATE = '<section id="user-satisfaction-survey" class="visible" aria-hidden="false">' +
+                 '  <div class="wrapper">' +
+                 '    <h1>Tell us what you think of GOV.UK</h1>' +
+                 '    <p class="right"><a href="#survey-no-thanks" id="survey-no-thanks">No thanks</a></p>' +
+                 '    <p><a href="javascript:void()" id="take-survey" target="_blank">Take the 3 minute survey</a> This will open a short survey on another website</p>' +
+                 '  </div>' +
+                 '</section>';
+
+  var userSurveys = {
+    defaultSurvey: {
+      url: 'https://www.surveymonkey.com/s/2MRDLTW',
+      identifier: 'user_satisfaction_survey',
+      template: TEMPLATE,
+      frequency: 50,
+    },
+    smallSurveys: [],
+
+    init: function() {
+      var activeSurvey = userSurveys.getActiveSurvey(userSurveys.defaultSurvey, userSurveys.smallSurveys);
+      if (userSurveys.isSurveyToBeDisplayed(activeSurvey)) {
+        userSurveys.displaySurvey(activeSurvey);
+      }
+    },
+
+    getActiveSurvey: function(defaultSurvey, smallSurveys) {
+      var activeSurvey = defaultSurvey;
+
+      $.each(smallSurveys, function(_index, survey) {
+        if(userSurveys.currentTime() >= survey.startTime && userSurveys.currentTime() <= survey.endTime) {
+          activeSurvey = survey;
+        }
+      });
+
+      return activeSurvey;
+    },
+
+    displaySurvey: function(survey) {
+      $("#user-satisfaction-survey-container").append(survey.template);
+      userSurveys.setEventHandlers(survey);
+
+      var $surveyLink = $('#take-survey');
+      var surveyUrl = survey.url;
+
+      if (surveyUrl.indexOf('?c=') === -1) {
+        surveyUrl += "?c=" + root.location.pathname;
+      }
+
+      $surveyLink.attr('href', surveyUrl);
+      userSurveys.trackEvent(survey.identifier, 'banner_shown', 'Banner has been shown');
+    },
+
+    setEventHandlers: function(survey) {
+      var $noThanks = $('#survey-no-thanks');
+      var $takeSurvey = $('#take-survey');
+
+      $noThanks.click(function (e) {
+        userSurveys.setSurveyTakenCookie(survey);
+        userSurveys.trackEvent(survey.identifier, 'banner_no_thanks', 'No thanks clicked');
+        e.stopPropagation();
+        return false;
+      });
+      $takeSurvey.click(function () {
+        userSurveys.setSurveyTakenCookie(survey);
+        userSurveys.trackEvent(survey.identifier, 'banner_taken', 'User taken survey');
+      });
+    },
+
+    isSurveyToBeDisplayed: function(survey) {
+      if (userSurveys.otherNotificationVisible() ||
+          GOVUK.cookie(userSurveys.surveyTakenCookieName(survey)) === 'true') {
+        return false;
+      } else if (userSurveys.userCompletedTransaction()) {
+        // We don't want any survey appearing for users who have completed a
+        // transaction as they may complete the survey with the department's
+        // transaction in mind as opposed to the GOV.UK content.
+        return false;
+      } else if ($('#user-satisfaction-survey-container').length <= 0) {
+        return false;
+      } else if (userSurveys.randomNumberMatches(survey.frequency)) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+
+    userCompletedTransaction: function() {
+      var currentURL = window.location.pathname;
+
+      function stringContains(str, substr) {
+        return str.indexOf(substr) > -1;
+      }
+
+      if (stringContains(currentURL, "/done") &&
+          stringContains(currentURL, "/transaction-finished") &&
+          stringContains(currentURL, "/driving-transaction-finished")) {
+            return true;
+      }
+    },
+
+    trackEvent: function (identifier, action, label) {
+      GOVUK.analytics.trackEvent(identifier, action, {
+        label: label,
+        value: 1,
+        nonInteraction: true
+      });
+    },
+
+    setSurveyTakenCookie: function (survey) {
+      GOVUK.cookie(userSurveys.surveyTakenCookieName(survey), true, { days: 30*4 });
+      $("#user-satisfaction-survey").removeClass('visible').attr('aria-hidden', 'true');
+    },
+
+    randomNumberMatches: function(frequency) {
+      return (Math.floor(Math.random() * frequency) === 0);
+    },
+
+    otherNotificationVisible: function() {
+      return $('#banner-notification:visible, #global-cookie-message:visible, #global-browser-prompt:visible').length > 0;
+    },
+
+    surveyTakenCookieName: function(survey) {
+      //user_satisfaction_survey => takenUserSatisfactionSurvey
+      var cookieStr = "taken_" + survey.identifier;
+      var cookieStub = cookieStr.replace(/(\_\w)/g, function(m){return m[1].toUpperCase();});
+      return "govuk_" + cookieStub;
+    },
+
+    currentTime: function() { return new Date().getTime(); }
+  };
+
+  root.GOVUK.userSurveys = userSurveys;
+}).call(this);
+
diff --git a/app/assets/javascripts/user-satisfaction-survey.js b/app/assets/javascripts/user-satisfaction-survey.js
diff --git a/app/views/root/_base.html.erb b/app/views/root/_base.html.erb
@@ -23,7 +23,7 @@
 <% end %>
 
 <% content_for :after_header do %>
-  <div id="user-satisfaction-survey-container" data-survey-url="https://www.surveymonkey.com/s/2MRDLTW"></div>
+  <div id="user-satisfaction-survey-container"></div>
   <% if @banner_notification.present? %>
     <%= @banner_notification %>
   <% end %>