A/B test German download page with campaign messaging

bedrock/firefox/templates/firefox/new/berlin/scene1-b.html → bedrock/firefox/templates/firefox/new/berlin/scene1-aus-gruenden.html

@@ -7,7 +7,7 @@
 {% extends "firefox/new/berlin/base.html" %}
 
 {% block page_css %}
-  {{ css_bundle('firefox_new_berlin_b') }}
+  {{ css_bundle('firefox_new_berlin_aus_gruenden') }}
 {% endblock %}
 
 {% block primary_download_button %}

bedrock/firefox/templates/firefox/new/berlin/scene1.html

@@ -6,12 +6,6 @@
 
 {% extends "firefox/new/berlin/base.html" %}
 
-{% block experiments %}
-  {% if switch('experiment-berlin-video', ['de']) %}
-    {{ js_bundle('firefox_new_berlin_experiment') }}
-  {% endif %}
-{% endblock %}
-
 {% block primary_download_button %}
   {{ download_firefox(alt_copy='Jetzt herunterladen', locale_in_transition=true, dom_id="download-firefox", download_location='primary cta', button_color='button-green') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene2-b.html → bedrock/firefox/templates/firefox/new/berlin/scene2-aus-gruenden.html

@@ -7,5 +7,5 @@
 {% extends "firefox/new/berlin/scene2.html" %}
 
 {% block page_css %}
-  {{ css_bundle('firefox_new_berlin_b') }}
+  {{ css_bundle('firefox_new_berlin_aus_gruenden') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/de/base-b.html

@@ -0,0 +1,114 @@
+{# 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/new/quantum" %}
+
+{% extends "firefox/base-pebbles.html" %}
+
+{# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #}
+{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
+
+{% block page_title_prefix %}{% endblock %}
+{% block page_title %}{{_('Firefox – Dein Browser für Desktop, Smartphone und Tablet')}}{% endblock %}
+{% block page_desc %}{{_('Besser digital leben mit Firefox: Superschnell surfen, Top-Privatsphäre-Schutz und gut für das Netz. Weil Mozilla dahinter steht. Das Non-Profit für ein freies und offenes Internet — für alle Menschen.')}}{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('firefox_new_de_b') }}
+{% endblock %}
+
+{% block body_id %}firefox-new-de-b{% endblock %}
+{% block body_class %}{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+<main role="main">
+  <div class="main-content">
+    {% block messages %}{% endblock %}
+    <div class="content">
+      <div class="header-logos">
+        <h2><a class="firefox" href="{{ url('firefox') }}" title="{{ firefox_logo_title }}">{{ high_res_img('logos/firefox/logo-quantum-wordmark-white.png', {'alt': firefox_logo_title, 'width': '133', 'height': '50'}) }}</a></h2>
+        <h2><a class="mozilla" href="{{ url('mozorg.home') }}" title="{{ mozilla_logo_title }}"><img src="{{ static('img/logos/mozilla/wordmark-dark.svg')}}" alt="{{ mozilla_logo_title }}" width="101" height="34"></a></h2>
+      </div>
+      <div class="header-container">
+        <div class="header-content">
+          <header>
+            {% block head_content %}
+            <h1>Besser digital leben.</h1>
+            <h2>Der neue <strong>Firefox</strong>.</h2>
+            {% endblock %}
+          </header>
+          <div class="main-download">
+            <div class="main-cta-wrapper">
+
+              {% block primary_download_button %}
+              <div class="download-button-wrapper">
+                {{ download_firefox(alt_copy='Jetzt herunterladen', locale_in_transition=true, dom_id="download-firefox", download_location='primary cta', button_color='button-green') }}
+              </div>
+              {% endblock %}
+            </div>
+
+            {% block secondary_content %}
+              <p class="linux-arm-download-instructions">
+                {{ _('Please follow <a href="%(url)s">these instructions</a> to install Firefox.')|format(url='https://support.mozilla.org/kb/install-firefox-linux') }}
+              </p>
+
+              <ul id="other-platforms-languages-wrapper" class="small-links desktop hidden">
+                <li><button id="other-platforms-modal-link" type="button">{{_('Advanced install options & other platforms') }}</button></li>
+                <li><a href="{{ url('firefox.all') }}">{{_('Download in another language') }}</a></li>
+                <li><a rel="external" href="https://support.mozilla.org/products/?utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_campaign=need-help-link">{{_('Need help?')}}</a></li>
+              </ul>
+
+              <ul class="small-links android">
+                <li><a href="{{ url('firefox.all', channel='android') }}">{{_('Download in another language') }}</a></li>
+                <li><a rel="external" href="https://support.mozilla.org/products/mobile/?utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_campaign=need-help-link">{{_('Need help?')}}</a></li>
+              </ul>
+
+              <ul class="small-links ios">
+                <li><a rel="external" href="https://support.mozilla.org/products/ios/?utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_campaign=need-help-link">{{_('Need help?')}}</a></li>
+              </ul>
+
+            {% endblock %}
+          </div>
+        </div>
+
+        <div class="header-image">
+          {{ high_res_img('firefox/new/browser.png', {'alt': _('Screenshot'), 'width': '700', 'height': '529'}) }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="features">
+    <div class="content">
+      <ul>
+        <li class="faster">
+          <h3>Megaschnell</h3>
+          <p>
+            Top-Performance und verkürzte Seitenladezeiten.
+          </p>
+        </li>
+        <li class="better">
+          <h3>Megagut</h3>
+          <p>
+            Dafür machen wir uns stark: Internet für Menschen statt Profit.
+          </p>
+        </li>
+        <li class="private">
+          <h3>Liebt Deine Privatsphäre</h3>
+          <p>
+            Privat surfen plus Schutz vor Aktivitätenverfolgung.
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  {% block additional_content %}{% endblock %}
+</main>
+{% endblock %}
+
+{% block js %}
+  {{ js_bundle('firefox_new_de_b') }}
+{% endblock %}

bedrock/firefox/templates/firefox/new/de/scene1-b.html

@@ -0,0 +1,7 @@
+{# 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/new/quantum" %}
+
+{% extends "firefox/new/de/base-b.html" %}

bedrock/firefox/templates/firefox/new/de/scene2-b.html

@@ -0,0 +1,39 @@
+{# 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/new/quantum" %}
+
+{% extends "firefox/new/de/base-b.html" %}
+
+{% block string_data %}
+  data-pixels="{% for pixel in settings.TRACKING_PIXELS %}{{ pixel }}{% if not loop.last %}::{% endif %}{% endfor %}"
+{% endblock %}
+
+{% block head_content %}
+  <h2>Danke, dass Du Dich für Firefox entscheidest.</h2>
+{% endblock %}
+
+{% block secondary_content %}
+  <p class="help">
+    Dein Download startet automatisch. Falls nicht, <a href="{{ url('firefox.all') }}" id="direct-download-link">bitte hier klicken</a>.
+  </p>
+{% endblock %}
+
+{% block primary_download_button %}
+  {# Download button on scene2 is hidden visually. Both ID and CSS classes are needed to trigger auto-download #}
+  <div class="download-button-wrapper desktop" id="download-button-wrapper-desktop">
+    {{ download_firefox(alt_copy='Jetzt herunterladen', force_direct=true, dom_id='primary-download-button') }}
+  </div>
+{% endblock %}
+
+{% block details %}{% endblock %}
+
+{% block secondary_download %}{% endblock %}
+
+{% block js %}
+  {% if switch('tracking-pixel') %}
+    {{ js_bundle('firefox_new_pixel') }}
+  {% endif %}
+  {{ js_bundle('firefox_new_scene2') }}
+{% endblock %}

bedrock/firefox/templates/firefox/new/scene1.html

@@ -10,6 +10,9 @@
   {% if switch('firefox_new_better_browser_experiment', ['en-US']) %}
     {{ js_bundle('firefox_new_better_browser_experiment') }}
   {% endif %}
+  {% if switch('experiment-de-hearts', ['de']) %}
+    {{ js_bundle('firefox_new_de_experiment') }}
+  {% endif %}
 {% endblock %}
 
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}

bedrock/firefox/tests/test_views.py

@@ -695,28 +695,42 @@ def test_herz_nonde_scene_2(self, render_mock):
     # berlin video test issue 5637
 
     def test_berlin_video_scene_1(self, render_mock):
-        req = RequestFactory().get('/firefox/new/?xv=berlin&v=b')
+        req = RequestFactory().get('/firefox/new/?xv=aus-gruenden')
         req.locale = 'de'
         views.new(req)
-        render_mock.assert_called_once_with(req, 'firefox/new/berlin/scene1-b.html', ANY)
+        render_mock.assert_called_once_with(req, 'firefox/new/berlin/scene1-aus-gruenden.html', ANY)
 
     def test_berlin_video_scene_2(self, render_mock):
-        req = RequestFactory().get('/firefox/download/thanks/?xv=berlin&v=b')
+        req = RequestFactory().get('/firefox/download/thanks/?xv=aus-gruenden')
         req.locale = 'de'
         views.download_thanks(req)
-        render_mock.assert_called_once_with(req, 'firefox/new/berlin/scene2-b.html')
+        render_mock.assert_called_once_with(req, 'firefox/new/berlin/scene2-aus-gruenden.html')
 
-    def test_berlin_video_control_scene_1(self, render_mock):
-        req = RequestFactory().get('/firefox/new/?xv=berlin&v=a')
+    # alternate de/new test issue 5879
+
+    def test_de_a_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?v=a')
         req.locale = 'de'
         views.new(req)
-        render_mock.assert_called_once_with(req, 'firefox/new/berlin/scene1.html', ANY)
+        render_mock.assert_called_once_with(req, 'firefox/new/scene1.html', ANY)
 
-    def test_berlin_video_control_scene_2(self, render_mock):
-        req = RequestFactory().get('/firefox/download/thanks/?xv=berlin&v=a')
+    def test_de_a_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/download/thanks/?v=a')
         req.locale = 'de'
         views.download_thanks(req)
-        render_mock.assert_called_once_with(req, 'firefox/new/berlin/scene2.html')
+        render_mock.assert_called_once_with(req, 'firefox/new/scene2.html')
+
+    def test_de_b_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?v=b')
+        req.locale = 'de'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/de/scene1-b.html', ANY)
+
+    def test_de_b_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/download/thanks/?v=b')
+        req.locale = 'de'
+        views.download_thanks(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/de/scene2-b.html')
 
     # better browser test issue 5841
 

bedrock/firefox/views.py

@@ -548,12 +548,13 @@ def download_thanks(request):
     elif lang_file_is_active('firefox/new/reggiewatts', locale) and experience == 'reggiewatts':
         template = 'firefox/new/reggie-watts/scene2.html'
     elif locale == 'de' and experience == 'berlin':
-        if variant == 'b':
-            template = 'firefox/new/berlin/scene2-b.html'
-        else:
-            template = 'firefox/new/berlin/scene2.html'
+        template = 'firefox/new/berlin/scene2.html'
+    elif locale == 'de' and experience == 'aus-gruenden':
+        template = 'firefox/new/berlin/scene2-aus-gruenden.html'
     elif locale == 'de' and experience == 'herz':
         template = 'firefox/new/berlin/scene2-herz.html'
+    elif locale == 'de' and variant == 'b':
+        template = 'firefox/new/de/scene2-b.html'
     elif locale == 'en-US':
         if experience in ['portland', 'forgood']:
             template = 'firefox/new/portland/scene2.html'
@@ -599,12 +600,13 @@ def new(request):
         elif lang_file_is_active('firefox/new/reggiewatts', locale) and experience == 'reggiewatts':
             template = 'firefox/new/reggie-watts/scene1.html'
         elif locale == 'de' and experience == 'berlin':
-            if variant == 'b':
-                template = 'firefox/new/berlin/scene1-b.html'
-            else:
-                template = 'firefox/new/berlin/scene1.html'
+            template = 'firefox/new/berlin/scene1.html'
+        elif locale == 'de' and experience == 'aus-gruenden':
+            template = 'firefox/new/berlin/scene1-aus-gruenden.html'
         elif locale == 'de' and experience == 'herz':
             template = 'firefox/new/berlin/scene1-herz.html'
+        elif locale == 'de' and variant == 'b':
+            template = 'firefox/new/de/scene1-b.html'
         elif locale == 'en-US':
             if experience in ['portland', 'forgood']:
                 template = 'firefox/new/portland/scene1.html'

media/css/firefox/new/berlin-b.scss → media/css/firefox/new/berlin-aus-gruenden.scss

@@ -66,4 +66,3 @@
         content: none;
     }
 }
-

media/css/firefox/new/de-b.scss

@@ -0,0 +1,83 @@
+// 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 '../../hubs/sections';
+
+@import 'common';
+@import 'scene1';
+
+
+/* -------------------------------------------------------------------------- */
+// Top hero section
+
+#firefox-new-de-b  .main-content {
+    background: #23033d url('/media/img/firefox/new/de/hearts-small.png') top center repeat;
+    background: url('/media/img/firefox/new/de/hearts-left.png') top 20px left -20px / auto 50% no-repeat,
+                url('/media/img/firefox/new/de/hearts-right.png') top 20px right -10px / auto 50% no-repeat,
+                url('/media/img/firefox/new/de/purple-wave.png') bottom left no-repeat,
+                #23033d;
+
+    @media #{$mq-phone-wide} {
+        background: #23033d url('/media/img/firefox/new/de/hearts-small.png') top center repeat;
+        background: url('/media/img/firefox/new/de/hearts-left.png') top left no-repeat,
+                    url('/media/img/firefox/new/de/hearts-right.png') top right no-repeat,
+                    url('/media/img/firefox/new/de/purple-wave.png') bottom left no-repeat,
+                    #23033d;
+    }
+
+    @media #{$mq-tablet} {
+        background: #23033d url('/media/img/firefox/new/de/hearts-large.png') top center repeat;
+        background: url('/media/img/firefox/new/de/hearts-large.png') top center repeat,
+                    url('/media/img/firefox/new/de/purple-wave.png') bottom left no-repeat,
+                    #23033d;
+    }
+}
+
+// always hide special scene 2 button (as it forces direct download)
+#download-button-wrapper-desktop {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+}
+
+/* -------------------------------------------------------------------------- */
+// Key features section
+#firefox-new-de-b {
+    .features {
+        h3 {
+            @include font-size-level4;
+            color: #8000d7;
+        }
+
+        ul {
+
+            li {
+                &.faster {
+                    background-image: url('/media/img/firefox/new/de/icon-faster.svg');
+                }
+
+                &.better {
+                    background-image: url('/media/img/firefox/new/de/icon-heart.svg');
+                }
+
+                &.private {
+                    background-image: url('/media/img/firefox/new/de/icon-private.svg');
+                }
+
+                &:last-child p {
+                    margin-bottom: 20px;
+                }
+            }
+        }
+    }
+
+    // fancy gradient colored text for modern browsers.
+    @supports (background-clip: text) or (-webkit-background-clip: text) {
+        .features h3 {
+            background: transparent;
+            color: #8000d7;
+        }
+    }
+}