Re-launch pre-download experiment on /firefox/ (Fixes #6456)

bedrock/firefox/templates/firefox/home-a.html

@@ -0,0 +1,14 @@
+{# This Source Code Form is subject to the terms of the Mozilla Public
+ # License, v. 2.0. If a copy of the MPL was not distributed with this
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
+
+{% add_lang_files "firefox/hub/home-quantum" "firefox/shared" %}
+
+{% extends "firefox/home.html" %}
+
+{% block experiments %}{% endblock %}
+
+{% block js %}
+  {{ super() }}
+  {{ js_bundle('firefox-home-pre-download-a-ga') }}
+{% endblock %}

bedrock/firefox/templates/firefox/home-b.html

@@ -0,0 +1,49 @@
+{# This Source Code Form is subject to the terms of the Mozilla Public
+ # License, v. 2.0. If a copy of the MPL was not distributed with this
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
+
+{% add_lang_files "firefox/hub/home-quantum" "firefox/shared" %}
+
+{% extends "firefox/home.html" %}
+
+{% block experiments %}{% endblock %}
+
+{% block page_css %}
+  {{ super() }}
+  {{ css_bundle('firefox-home-pre-download') }}
+{% endblock %}
+
+{% block button_primary %}
+  <div class="pre-download-button-container" {% block variant_name %}data-variant-name="v-2-headline-a"{% endblock %}>
+    <button class="button button-green" id="pre-download-button" type="button" data-button-name="Download Firefox CTA">{{ _('Download Firefox') }}</button>
+    <small class="fx-privacy-link">
+      <a href="{{ url('privacy.notices.firefox') }}">Firefox Privacy Notice</a>
+    </small>
+  </div>
+{% endblock %}
+
+{% block additional_content %}
+  <div class="pre-download-newsletter">
+    <div class="pre-download-newsletter-content">
+      <h2 class="pre-download-newsletter-title">{% block newsletter_title %}{{ _('Learn how to make Firefox even smarter, faster and more secure.') }}{% endblock %}</h2>
+      <p class="pre-download-newsletter-desc">{{ _('Get informative tips, tricks and product announcements delivered to your inbox.') }}</p>
+      {{ email_newsletter_form(
+          include_title=False,
+          spinner_color='#000',
+          button_class='button-hollow',
+          email_label=_('Enter your email address'),
+          email_placeholder=_('yourname@example.com'),
+          details='<a href="%s" class="email-privacy-link">%s</a>'|format(url('privacy.email'), _('How will Mozilla use my email?'))|safe,
+          submit_text=_('Download Firefox & Sign Up'))
+      }}
+      <p class="pre-download-continue">
+        <a href="{{ url('firefox.download.thanks') }}?v=a" data-link-name="Continue FireFox Download" data-link-type="link">{{ _('Continue Firefox Download') }}</a>
+      </p>
+    </div>
+  </div>
+{% endblock %}
+
+{% block js %}
+  {{ super() }}
+  {{ js_bundle('firefox-home-pre-download-newsletter') }}
+{% endblock %}

bedrock/firefox/templates/firefox/home-c.html

@@ -0,0 +1,13 @@
+{# This Source Code Form is subject to the terms of the Mozilla Public
+ # License, v. 2.0. If a copy of the MPL was not distributed with this
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}
+
+{% add_lang_files "firefox/hub/home-quantum" "firefox/shared" %}
+
+{% extends "firefox/home-b.html" %}
+
+{% block experiments %}{% endblock %}
+
+{% block variant_name %}data-variant-name="v-2-headline-b"{% endblock %}>
+
+{% block newsletter_title %}{{ _('Learn how to make the most of the browser made for people, not profit.') }}{% endblock %}

bedrock/firefox/templates/firefox/home.html

@@ -17,6 +17,12 @@
 {% block page_title %}{{ _('The new, fast browser for Mac, PC and Linux') }} | {{ title_suffix }}{% endblock %}
 {% block page_desc %}{{ _('Responsive engine, less memory usage and packed with features. Download for desktop now.') }}{% endblock %}
 
+{% block experiments %}
+  {% if switch('experiment-firefox-home-pre-download', ['en']) %}
+    {{ js_bundle('experiment-firefox-home-pre-download') }}
+  {% endif %}
+{% endblock %}
+
 {% block page_css %}
   {{ css_bundle('firefox-home') }}
   {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
@@ -68,7 +74,9 @@ <h1>{{ _('The New Firefox') }}</h1>
         <h2>{{ _('Meet Firefox Quantum.') }}</h2>
         <h3>{{ _('Fast for good.') }}</h3>
 
+      {% block button_primary %}
         {{ download_firefox(dom_id='download-intro', alt_copy=_('Download now'), download_location='primary cta') }}
+      {% endblock %}
       </div>
       <div class="header-image">
         {{ high_res_img('firefox/home/hero-laptop.png', {'alt': '', 'width': '903', 'height': '509'}) }}
@@ -434,6 +442,8 @@ <h2>{{ _('The New Firefox') }}</h2>
     </div>
   </section>
 
+  {% block additional_content %}{% endblock %}
+
   {% include 'firefox/includes/schemaorg-app.html' %}
 </main>
 {% endblock %}

bedrock/firefox/urls.py

@@ -26,7 +26,15 @@
 
 
 urlpatterns = (
-    url(r'^firefox/$', views.firefox_home, name='firefox'),
+    # Issue 5944 pre-download newsletter test.
+    # When removing this experiment, please remember to unskip the
+    # functional test in /test/functional/firefox/test_home.py
+    url(r'^firefox/$',
+        VariationTemplateView.as_view(template_name='firefox/home.html',
+                                      template_context_variations=['a', 'b', 'c'],
+                                      template_name_variations=['a', 'b', 'c'],
+                                      variation_locales=['en']),
+        name='firefox'),
     url(r'^firefox/(?:%s/)?(?:%s/)?all/$' % (platform_re, channel_re),
         views.all_downloads, name='firefox.all'),
     page('firefox/accounts', 'firefox/accounts.html'),

bedrock/firefox/views.py

@@ -595,9 +595,11 @@ def download_thanks(request):
     show_newsletter = locale in ['en-US', 'en-GB', 'en-CA', 'en-ZA', 'es-ES', 'es-AR', 'es-CL', 'es-MX', 'pt-BR', 'fr', 'ru', 'id', 'de', 'pl']
 
     # ensure variant matches pre-defined value
-    if variant not in ['x', 'y']:  # place expected ?v= values in this list
+    if variant not in ['a', 'x', 'y']:  # place expected ?v= values in this list
         variant = None
 
+    if variant == 'a' and locale.startswith('en'):
+        show_newsletter = False  # Prevent showing the newsletter for pre-download experiment Issue #6456
     if variant == 'x' and locale == 'en-US':
         show_newsletter = False  # Prevent showing the newsletter for FxA account experiment mozilla/bedrock#5974
 

media/css/firefox/home-pre-download.scss

@@ -0,0 +1,120 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import '../pebbles/includes/lib';
+@import '../pebbles/components/modal';
+
+.pre-download-button-container {
+    display: inline-block;
+
+    button[type="button"] {
+        margin-top: 20px;
+    }
+
+    .fx-privacy-link {
+        margin-top: 10px;
+    }
+}
+
+
+.pre-download-newsletter {
+    display: none;
+}
+
+#modal .pre-download-newsletter {
+    display: block;
+}
+
+.pre-download-newsletter-content {
+    @include font-size(16px);
+    background: #fff;
+    padding: 40px 20px;
+
+    @media #{$mq-tablet} {
+        padding: 60px 40px;
+    }
+
+    h2 {
+        @include font-size(28px);
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+
+    .field-email label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    .field {
+        margin-bottom: 20px;
+    }
+
+    input[type="email"] {
+        padding: 12px 8px;
+        width: 100%;
+    }
+
+    select {
+        width: 100%;
+    }
+
+    button[type="submit"] {
+        background-color: #000;
+        border-radius: 2px;
+        border: 2px solid #000;
+        color: #fff;
+        transition: background-color 100ms, color 100ms;
+
+        &:hover,
+        &:focus {
+            background-color: #fff;
+            color: #000;
+        }
+    }
+
+    .form-details small {
+        @include font-size(16px);
+        display: block;
+        margin-top: 10px;
+        text-align: center;
+    }
+
+    .errorlist {
+        color: $color-mozred;
+    }
+}
+
+.pre-download-continue {
+    text-align: center;
+    margin: 20px 0 0;
+}
+
+// Hide modal header visually and add top padding to compensate
+#modal > .window > .inner {
+    background: transparent;
+    max-width: 512px;
+    padding: 70px 0 0;
+
+    header {
+        @include visually-hidden;
+    }
+}
+
+.js {
+    // hide details for JS users
+    // (displayed when email field is focused)
+    #form-details,
+    .form-details {
+        display: none;
+    }
+
+    #newsletter-spinner {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}

media/js/firefox/home/experiment-pre-download.js

@@ -0,0 +1,74 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+(function(Mozilla) {
+    'use strict';
+
+    function removeParams() {
+        window.history.replaceState({}, document.title, window.location.href.split('?')[0]);
+    }
+
+    function getUrlParam(name) {
+        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+        var results = regex.exec(location.search);
+        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    }
+
+    // Check that cookies are supported.
+    if (typeof Mozilla.Cookies === 'undefined' || !Mozilla.Cookies.enabled()) {
+        return;
+    }
+
+    // Test criteria is Windows on desktop only.
+    if (window.site.platform !== 'windows') {
+        return;
+    }
+
+    // Exclude existing Firefox users.
+    if (/\s(Firefox)/.test(navigator.userAgent)) {
+        return;
+    }
+
+    // Check that history API is supported.
+    if (!window.history && !window.history.replaceState) {
+        return;
+    }
+
+    var source = getUrlParam('utm_source');
+    var medium = getUrlParam('utm_medium');
+    var campaign = getUrlParam('utm_campaign');
+
+    var params = {
+        utmSource: source ? source : 'www.mozilla.org',
+        utmMedium: medium ? medium : 'download_button',
+        utmCampaign: campaign ? campaign : 'firefox_page',
+        utmContent: 'downloader_email_form_experiment_'
+    };
+
+    var stringA = 'v=a&utm_source=' + params.utmSource + '&utm_medium=' + params.utmMedium + '&utm_campaign=' + params.utmCampaign + '&utm_content=' + params.utmContent + 'va';
+    var stringB = 'v=b&utm_source=' + params.utmSource + '&utm_medium=' + params.utmMedium + '&utm_campaign=' + params.utmCampaign + '&utm_content=' + params.utmContent + 'vb';
+    var stringC = 'v=c&utm_source=' + params.utmSource + '&utm_medium=' + params.utmMedium + '&utm_campaign=' + params.utmCampaign + '&utm_content=' + params.utmContent + 'vc';
+
+    var queries = {};
+
+    queries[stringA] = 33;
+    queries[stringB] = 33;
+    queries[stringC] = 33;
+
+    // remove existing params as we're amending our own and passing to Traffic Cop.
+    removeParams();
+
+    // Remove existing stub attribution data before Traffic Cop redirect.
+    Mozilla.Cookies.removeItem('moz-stub-attribution-code', '/');
+    Mozilla.Cookies.removeItem('moz-stub-attribution-sig', '/');
+
+    var cop = new Mozilla.TrafficCop({
+        id: 'exp-firefox-home-pre-download-rerun-en',
+        variations: queries
+    });
+
+    cop.init();
+
+})(window.Mozilla);

media/js/firefox/home/pre-download-a-ga.js

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+(function () {
+    'use strict';
+
+    window.dataLayer.push({
+        'data-ex-name': 'email_form_first',
+        'data-ex-variant': 'v-1-control'
+    });
+
+})();
+

media/js/firefox/home/pre-download-newsletter.js

@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+(function (Mozilla) {
+    'use strict';
+
+    // Show email newsletter modal on download button click.
+    document.getElementById('pre-download-button').addEventListener('click', function(e) {
+        e.preventDefault();
+
+        Mozilla.Modal.createModal(this, $('.pre-download-newsletter'));
+    }, false);
+
+    // Listen for the regular newsletter form submit response.
+    $(document).ajaxSuccess(function(evt, xhr, settings, response) {
+        // Check that it's the correct form and the response was a non-error.
+        if ((settings.url.indexOf('/newsletter/') > -1) && response.success) {
+
+            // Hide the regular newsletter title and description.
+            document.querySelector('.pre-download-newsletter-title').classList.add('hidden');
+            document.querySelector('.pre-download-newsletter-desc').classList.add('hidden');
+
+            // Pause for 2 seconds (?) to read the confirmation message before preceeding to download.
+            setTimeout(function() {
+                window.location.href = document.querySelector('.pre-download-continue a').href;
+            }, 2000);
+        }
+    });
+
+    window.dataLayer.push({
+        'data-ex-name': 'email_form_first',
+        'data-ex-variant': document.querySelector('.pre-download-button-container').getAttribute('data-variant-name')
+    });
+
+})(window.Mozilla);
+