Merge pull request #3282 from hoosteeno/1032455-helpfulness

[bug 1032455] Add helpfulness interface using GA

kuma/wiki/templates/wiki/document.html

@@ -416,4 +416,7 @@ <h2 class="offscreen">{{ _('Document Tags and Contributors') }}</h2>
       {# This can be removed once the social network button multivariate test is completed. #}
       mdn.optimizely.push(['activate', 2796520257]);
   </script>
+  {% if waffle.flag('share_links') or waffle.flag('helpfulness') %}
+    {{ js('document') }}
+  {% endif %}
 {% endblock %}

media/js/components.js

@@ -429,6 +429,7 @@
             { state: 'success', className: 'success', iconName: 'icon-smile' },
             { state: 'error', className: 'error', iconName: 'icon-frown' },
             { state: 'warning', className: 'warning', iconName: 'icon-warning-sign'  },
+            { state: 'question', className: 'question', iconName: 'icon-question-sign'  },
             defaultState
         ];
         var statesObj = {};

media/js/helpfulness.js

@@ -0,0 +1,91 @@
+(function(win, doc, $) {
+
+    // this feature requires localStorage
+    if (('localStorage' in win)) {
+        var ignore = localStorage.getItem('helpful-ignore') === 'true'; // true if ever clicked ignore
+        var asked_recently = parseInt(localStorage.getItem(doc.location + '#answered-helpful'), 10) > Date.now();
+        if (!ignore && !asked_recently) {
+            // ask about helpfulness after 1 min
+            setTimeout(inquire, 60000);
+        }
+    }
+
+    // create a notification
+    function inquire() {
+        // dimension7 is "helpfulness"
+        if(win.ga) ga('set', 'dimension7', 'Yes');
+
+        // ask a simple question
+        var ask = gettext('Did this page help you?') +
+            '<br> <a href="#" class="notification-button" id="helpful-yes">' +
+            gettext('Yes') +
+            '</a><a href="#" class="notification-button" id="helpful-no">' +
+            gettext('No') +
+            '</a><a id="helpful-ignore" href="#">' +
+            gettext('Never ask me again') +
+            '</a>';
+        var notification = mdn.Notifier.growl(ask, {closable: true, duration: 0}).question();
+
+        // answers to the simple question include...
+        $('#helpful-yes').on('click', function(e) {
+            e.preventDefault();
+            confirm('Thanks for your feedback!', 'success', 'Yes');
+        });
+        $('#helpful-no').on('click', function(e) {
+            e.preventDefault();
+            confirm('', 'error', 'No');
+        });
+        $('#helpful-ignore').on('click', function(e) {
+            e.preventDefault();
+            localStorage.setItem('helpful-ignore', 'true');
+            confirm("We won't bug you again.", 'info', 'Ignore');
+        });
+
+        // create a dropdown in case the page is unhelpful
+        var unhelpful_options = [
+            {val: 'Translate', text: gettext('Translate it into my language')},
+            {val: 'Make-Simpler', text: gettext('Make explanations clearer')},
+            {val: 'Needs-More-Info', text: gettext('Add more details')},
+            {val: 'Needs-Correction', text: gettext('Fix incorrect information')},
+            {val: 'Other', text: gettext('Something else')}
+        ]
+        var $select = $('<select />').attr({
+            id: 'helpful-detail'
+        }).append($('<option>').attr('selected', 'selected').text(gettext('Choose one...')));
+        $(unhelpful_options).each(function() {
+            $select.append($('<option>').attr('value', this.val).text(this.text));
+        });
+
+        // handle feedback
+        function confirm(msg, type, label) {
+            // if "No" ask for more info
+            if (type === 'error') {
+                mdn.analytics.trackEvent({
+                    category: 'Helpful',
+                    action: 'Clicked',
+                    label: label
+                });
+                notification.error(gettext('Uh oh. What would make it better?') + '<br>' + $select[0].outerHTML, 0);
+                $('#helpful-detail').on('change', function(e) {
+                    e.preventDefault();
+                    confirm(gettext("Thanks! We'll fix it."), 'info', $(this).val());
+                });
+            }
+            else {
+                askAgainLater();
+                mdn.analytics.trackEvent({
+                    category: 'Helpful',
+                    action: 'Clicked',
+                    label: label
+                });
+                notification[type](gettext(msg), 2000);
+            }
+        }
+    }
+
+    // set a date (180 days ahead) for asking again
+    function askAgainLater() {
+        localStorage.setItem(doc.location + '#answered-helpful', Date.now() + (1000*60*60*24)*180);
+    }
+
+})(window, document, jQuery);

settings.py

@@ -662,7 +662,6 @@ def JINJA_CONFIG():
             'js/analytics.js',
             'js/main.js',
             'js/auth.js',
-            'js/social.js',
             'js/fonts.js',
         ),
         'home': (
@@ -677,6 +676,10 @@ def JINJA_CONFIG():
             'js/profile.js',
             'js/moz-jquery-plugins.js',
         ),
+        'document': (
+            'js/social.js',
+            'js/helpfulness.js',
+        ),
         'demostudio': (
             'js/libs/jquery.hoverIntent.minified.js',
             'js/libs/jquery.scrollTo-1.4.2-min.js',