From 079a612e4c9fbf012fe3efede231768d99352df7 Mon Sep 17 00:00:00 2001 From: Alex Gibson Date: Fri, 9 Nov 2018 11:05:00 +0000 Subject: [PATCH] Re-launch pre-download experiment on /firefox/ (Fixes #6456) --- bedrock/firefox/templates/firefox/home-a.html | 14 ++ bedrock/firefox/templates/firefox/home-b.html | 49 +++++++ bedrock/firefox/templates/firefox/home-c.html | 13 ++ bedrock/firefox/templates/firefox/home.html | 10 ++ bedrock/firefox/urls.py | 10 +- bedrock/firefox/views.py | 4 +- media/css/firefox/home-pre-download.scss | 120 ++++++++++++++++++ .../firefox/home/experiment-pre-download.js | 74 +++++++++++ media/js/firefox/home/pre-download-a-ga.js | 14 ++ .../firefox/home/pre-download-newsletter.js | 37 ++++++ media/static-bundles.json | 26 ++++ tests/functional/firefox/test_home.py | 1 + 12 files changed, 370 insertions(+), 2 deletions(-) create mode 100644 bedrock/firefox/templates/firefox/home-a.html create mode 100644 bedrock/firefox/templates/firefox/home-b.html create mode 100644 bedrock/firefox/templates/firefox/home-c.html create mode 100644 media/css/firefox/home-pre-download.scss create mode 100644 media/js/firefox/home/experiment-pre-download.js create mode 100644 media/js/firefox/home/pre-download-a-ga.js create mode 100644 media/js/firefox/home/pre-download-newsletter.js diff --git a/bedrock/firefox/templates/firefox/home-a.html b/bedrock/firefox/templates/firefox/home-a.html new file mode 100644 index 00000000000..27ff05476f0 --- /dev/null +++ b/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 %} diff --git a/bedrock/firefox/templates/firefox/home-b.html b/bedrock/firefox/templates/firefox/home-b.html new file mode 100644 index 00000000000..0d747aea8c6 --- /dev/null +++ b/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 %} +
+ + + Firefox Privacy Notice + +
+{% endblock %} + +{% block additional_content %} +
+
+

{% block newsletter_title %}{{ _('Learn how to make Firefox even smarter, faster and more secure.') }}{% endblock %}

+

{{ _('Get informative tips, tricks and product announcements delivered to your inbox.') }}

+ {{ 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=''|format(url('privacy.email'), _('How will Mozilla use my email?'))|safe, + submit_text=_('Download Firefox & Sign Up')) + }} +

+ {{ _('Continue Firefox Download') }} +

+
+
+{% endblock %} + +{% block js %} + {{ super() }} + {{ js_bundle('firefox-home-pre-download-newsletter') }} +{% endblock %} diff --git a/bedrock/firefox/templates/firefox/home-c.html b/bedrock/firefox/templates/firefox/home-c.html new file mode 100644 index 00000000000..c3e1d7c6e9b --- /dev/null +++ b/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 %} diff --git a/bedrock/firefox/templates/firefox/home.html b/bedrock/firefox/templates/firefox/home.html index f8eef3fb450..5193d520feb 100644 --- a/bedrock/firefox/templates/firefox/home.html +++ b/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 @@

{{ _('The New Firefox') }}

{{ _('Meet Firefox Quantum.') }}

{{ _('Fast for good.') }}

+ {% block button_primary %} {{ download_firefox(dom_id='download-intro', alt_copy=_('Download now'), download_location='primary cta') }} + {% endblock %}
{{ high_res_img('firefox/home/hero-laptop.png', {'alt': '', 'width': '903', 'height': '509'}) }} @@ -434,6 +442,8 @@

{{ _('The New Firefox') }}

+ {% block additional_content %}{% endblock %} + {% include 'firefox/includes/schemaorg-app.html' %} {% endblock %} diff --git a/bedrock/firefox/urls.py b/bedrock/firefox/urls.py index 0a9bb8c9de9..4134c05309c 100644 --- a/bedrock/firefox/urls.py +++ b/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'), diff --git a/bedrock/firefox/views.py b/bedrock/firefox/views.py index bec78c09853..51883014459 100644 --- a/bedrock/firefox/views.py +++ b/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 diff --git a/media/css/firefox/home-pre-download.scss b/media/css/firefox/home-pre-download.scss new file mode 100644 index 00000000000..d3870a01733 --- /dev/null +++ b/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; + } +} diff --git a/media/js/firefox/home/experiment-pre-download.js b/media/js/firefox/home/experiment-pre-download.js new file mode 100644 index 00000000000..a720f1276ae --- /dev/null +++ b/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); diff --git a/media/js/firefox/home/pre-download-a-ga.js b/media/js/firefox/home/pre-download-a-ga.js new file mode 100644 index 00000000000..df5519cbf35 --- /dev/null +++ b/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' + }); + +})(); + diff --git a/media/js/firefox/home/pre-download-newsletter.js b/media/js/firefox/home/pre-download-newsletter.js new file mode 100644 index 00000000000..28db9b065f1 --- /dev/null +++ b/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); + diff --git a/media/static-bundles.json b/media/static-bundles.json index 057e46292ff..249d7a1ddba 100644 --- a/media/static-bundles.json +++ b/media/static-bundles.json @@ -786,6 +786,12 @@ ], "name": "firefox-home" }, + { + "files": [ + "css/firefox/home-pre-download.scss" + ], + "name": "firefox-home-pre-download" + }, { "files": [ "css/firefox/whatsnew/whatsnew-57-letter.scss" @@ -1366,6 +1372,26 @@ ], "name": "firefox-home" }, + { + "files": [ + "js/firefox/home/pre-download-a-ga.js" + ], + "name": "firefox-home-pre-download-a-ga" + }, + { + "files": [ + "js/base/mozilla-modal.js", + "js/firefox/home/pre-download-newsletter.js" + ], + "name": "firefox-home-pre-download-newsletter" + }, + { + "files": [ + "js/base/mozilla-traffic-cop.js", + "js/firefox/home/experiment-pre-download.js" + ], + "name": "experiment-firefox-home-pre-download" + }, { "files": [ "js/libs/jquery.hoverIntent.min.js", diff --git a/tests/functional/firefox/test_home.py b/tests/functional/firefox/test_home.py index 78ee8f9b895..7316dea3090 100644 --- a/tests/functional/firefox/test_home.py +++ b/tests/functional/firefox/test_home.py @@ -7,6 +7,7 @@ from pages.firefox.home import FirefoxHomePage +@pytest.mark.skipif(reason='https://github.com/mozilla/bedrock/issues/6456') @pytest.mark.sanity @pytest.mark.nondestructive def test_download_buttons_displayed(base_url, selenium):