Skip to content

Commit

Permalink
Global FxA CTA experiment for Firefox users (Fixes #6629)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexgibson committed Jan 17, 2019
1 parent c7af3f2 commit e76ccd9
Show file tree
Hide file tree
Showing 12 changed files with 254 additions and 0 deletions.
4 changes: 4 additions & 0 deletions bedrock/base/templates/base-pebbles.html
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,10 @@ <h2 class="masthead-logo"><a href="{{ url('mozorg.home') }}"><img src="{{ static
<!--[if !lte IE 8]><!-->
{% block js %}{% endblock %}

{% if switch('global-fxa-cta-experiment', ['en-US']) %}
{{ js_bundle('global-fxa-cta-experiment') }}
{% endif %}

{# Bug 1381776 #}
{% block update_notification %}
{% if switch('firefox-update-notification', ['en-US']) %}
Expand Down
4 changes: 4 additions & 0 deletions bedrock/base/templates/base-resp.html
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,10 @@ <h2><a href="{{ url('mozorg.home') }}">{{ high_res_img('sandstone/header-mozilla
<!--[if !lte IE 8]><!-->
{% block js %}{% endblock %}

{% if switch('global-fxa-cta-experiment', ['en-US']) %}
{{ js_bundle('global-fxa-cta-experiment') }}
{% endif %}

{# Bug 1381776 #}
{% block update_notification %}
{% if switch('firefox-update-notification', ['en-US']) %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@
<div class="mzp-c-navigation-items" id="mzp-c-navigation-items">
<div class="mzp-c-navigation-download">
{{ download_firefox(alt_copy=_('Download Firefox'), dom_id='protocol-nav-download-firefox', button_color='mzp-t-secondary mzp-t-small', download_location='nav') }}
{% if LANG == 'en-US' %}
<div class="c-navigation-fxa-cta-container">
<a class="c-navigation-fxa-cta mzp-c-button mzp-t-secondary mzp-t-small mzp-t-download" href="https://accounts.firefox.com/signup?service=sync&context=fx_desktop_v3&entrypoint=mozilla.org-globalnav&utm_source=www.mozilla.org&utm_content=Get%20a%20Firefox%20Account&utm_medium=referral&utm_campaign=globalnav" data-button-name="Create a Firefox Account" data-link-type="button" data-cta-position="secondary cta">
Get a Firefox Account
</a>
<p class="c-navigation-fxa-cta-small-link"><a data-link-type="nav" data-link-name="Check out the Benefits" href="{{ url('firefox.accounts') }}">Check out the Benefits</a></p>
</div>
{% endif %}
</div>
<div class="mzp-c-navigation-menu">
<nav class="mzp-c-menu">
Expand Down
1 change: 1 addition & 0 deletions media/css/firefox/accounts-2018.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ $image-path: '/media/protocol/img';
@import '../../protocol/css/components/feature-card';
@import '../../protocol/css/components/hero';
@import '../../protocol/css/components/modal';
@import '../protocol/includes/navigation-hide-download-button';

.show {
display: block;
Expand Down
5 changes: 5 additions & 0 deletions media/css/hubs/_nav-download-button-remove.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@
display: none;
}

// Global FxA CTA experiment: issue #6629
.c-navigation-fxa-cta-container {
display: none !important; /* stylelint-disable-line declaration-no-important */
}

.moz-global-nav .nav-primary-links {
@media #{$mq-tablet} {
width: calc(100% - 160px);
Expand Down
41 changes: 41 additions & 0 deletions media/css/pebbles/components/_protocol-nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,44 @@ $image-path: '/media/protocol/img';
@include font-size(12px);
}
}

// Global FxA CTA experiment: issue #6629
.mzp-c-navigation {
.c-navigation-fxa-cta {
@include font-size(14px);
background-color: transparent;
background-image: none;
border-radius: 2px;
border: 2px solid $color-green-60;
box-shadow: none;
color: $color-green-60;
display: inline-block;
font-weight: bold;
line-height: 1.125;
padding: $padding-sm $padding-md;
text-decoration: none;

&:hover,
&:focus {
background-color: $color-green-60;
border-color: $color-green-60;
color: $color-white;
}
}

.c-navigation-fxa-cta-small-link {
a:link,
a:visited {
@include font-size(10px);
color: #000;
text-decoration: none;
}

a:hover,
a:active,
a:focus {
color: inherit;
text-decoration: underline;
}
}
}
46 changes: 46 additions & 0 deletions media/css/protocol/components/_navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,49 @@
}
}

// Global FxA CTA experiment: issue #6629
.mzp-c-navigation {
.c-navigation-fxa-cta-container {
display: none;
}

.c-navigation-fxa-cta-small-link {
margin-bottom: 0;
text-align: center;

a:link,
a:visited {
@include text-body-xs;
color: $color-black;
text-decoration: none;
}

a:hover,
a:active,
a:focus {
color: inherit;
text-decoration: underline;
}
}

@media #{$mq-md} {
.c-navigation-fxa-cta-small-link {
text-align: right;
}
}
}

.mzp-c-navigation.show-fxa-button {
.mzp-c-button-download-container {
display: none;
}

.mzp-c-navigation-download {
margin-bottom: $spacing-sm;
}

.c-navigation-fxa-cta-container {
display: block;
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
display: none;
}

// Global FxA CTA experiment: issue #6629
.c-navigation-fxa-cta-container {
display: none !important; /* stylelint-disable-line declaration-no-important */
}

.moz-global-nav .nav-primary-links {
@media #{$mq-md} {
width: calc(100% - 160px);
Expand Down
42 changes: 42 additions & 0 deletions media/css/sandstone/protocol-nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,45 @@ $image-path: '/media/protocol/img';
text-shadow: none;
letter-spacing: normal;
}

// Global FxA CTA experiment: issue #6629
.mzp-c-navigation {
.c-navigation-fxa-cta {
@include font-size(16px);
background-color: transparent;
background-image: none;
border-radius: 2px;
border: 2px solid $color-green-60;
box-shadow: none;
color: $color-green-60;
display: inline-block;
font-weight: bold;
line-height: 1.125;
padding: $padding-sm $padding-md;
text-decoration: none;

&:hover,
&:focus {
background-color: $color-green-60;
border-color: $color-green-60;
color: $color-white;
}
}

.c-navigation-fxa-cta-small-link {
a:link,
a:visited {
@include font-size(12px);
color: #000;
text-decoration: none;
}

a:hover,
a:active,
a:focus {
color: inherit;
text-decoration: underline;
}

}
}
91 changes: 91 additions & 0 deletions media/js/base/global-fxa-cta-experiment.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/* 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/. */

/**
* Global FxA CTA experiment: issue #6629
*/
(function() {
'use strict';

var nav = document.querySelector('.mzp-c-navigation');
var SAMPLE_RATE = 0.5;
var COOKIE_EXPIRATION_DAYS = 1;
var COOKIE_ID = 'global-fxa-cta-exp';

function isWithinSampleRate() {
return (Math.random() < SAMPLE_RATE) ? true : false;
}

function cookieExpiresDate(date) {
var d = date || new Date();
d.setTime(d.getTime() + (COOKIE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000));
return d.toUTCString();
}

function setCookie(cohort) {
Mozilla.Cookies.setItem(COOKIE_ID, cohort, cookieExpiresDate(), '/');
}

function getCookie() {
return Mozilla.Cookies.getItem(COOKIE_ID);
}

function hasCookie() {
return Mozilla.Cookies.hasItem(COOKIE_ID);
}

function shouldShowFxAButton() {
var cohort;

// If a cookie already exists then use that value to determine what to show
if (hasCookie()) {
cohort = getCookie();
}
// Else roll the dice and then set a new cookie.
else {
cohort = isWithinSampleRate() ? 'fxa' : 'download';
setCookie(cohort);
}

return cohort === 'fxa' ? true : false;
}

function showFxAButton() {
nav.classList.add('show-fxa-button');

window.dataLayer.push({
'data-ex-variant': 'accounts-button',
'data-ex-name': 'global-fxa-button'
});
}

function showDownloadButton() {
window.dataLayer.push({
'data-ex-variant': 'download-button',
'data-ex-name': 'global-fxa-button'
});
}

function meetsRequirements() {
if (typeof Mozilla.Client === 'undefined' || typeof Mozilla.Cookies === 'undefined') {
return false;
}

// Respect privacy
if (!Mozilla.Cookies.enabled() || Mozilla.dntEnabled()) {
return false;
}

// Is the client Firefox desktop and is the navigation present on the current page?
return Mozilla.Client.isFirefoxDesktop && nav;
}

if (meetsRequirements()) {
if (shouldShowFxAButton()) {
showFxAButton();
} else {
showDownloadButton();
}
}
})();
6 changes: 6 additions & 0 deletions media/static-bundles.json
Original file line number Diff line number Diff line change
Expand Up @@ -935,6 +935,12 @@
}
],
"js": [
{
"files": [
"js/base/global-fxa-cta-experiment.js"
],
"name": "global-fxa-cta-experiment"
},
{
"files": [
"js/mozorg/contribute/contribute-nav.js"
Expand Down
1 change: 1 addition & 0 deletions tests/functional/test_internet_health.py
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
from pages.internet_health import InternetHealthPage


@pytest.mark.skip_if_firefox(reason='https://github.com/mozilla/bedrock/issues/6629')
@pytest.mark.nondestructive
def test_download_button_is_displayed(base_url, selenium):
page = InternetHealthPage(selenium, base_url).open()
Expand Down

0 comments on commit e76ccd9

Please sign in to comment.