diff --git a/bedrock/firefox/templates/firefox/home.html b/bedrock/firefox/templates/firefox/home.html index e0b8d20f96..d3f619404d 100644 --- a/bedrock/firefox/templates/firefox/home.html +++ b/bedrock/firefox/templates/firefox/home.html @@ -19,10 +19,39 @@ {% block page_css %} {% stylesheet 'firefox-home' %} + {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %} + {% stylesheet 'firefox-home-fbvideochat-funnelcake' %} + {% endif %} {% endblock %} {% block body_id %}firefox-home{% endblock %} +{% block site_header %} + {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %} +
+
+
+
+
+

Facebook Video Messenger calls are easy with

+ + + + {{ download_firefox(dom_id='download-fbvideochat', alt_copy=_('Download now'), download_location='banner cta') }} +
+
+
+ +
Launch your video experience by downloading Firefox.
+
+
{#-- /.header-image-wrapper --#} +
{#-- /.header-content-wrapper --#} +
{#-- /.content --#} +
{#-- /.fbvideochat-banner --#} + {% endif %} + {{ super() }} +{% endblock %} + {% block content %} {% with current='desktop' %} {% include 'firefox/includes/hub/sub-nav.html' %} @@ -411,4 +440,7 @@ {% block js %} {% javascript 'firefox-home' %} + {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %} + {% javascript 'firefox-home-fbvideochat-funnelcake' %} + {% endif %} {% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/home/home-a.html b/bedrock/mozorg/templates/mozorg/home/home-a.html index 0616ed5e0f..a5fa6760bd 100644 --- a/bedrock/mozorg/templates/mozorg/home/home-a.html +++ b/bedrock/mozorg/templates/mozorg/home/home-a.html @@ -53,7 +53,7 @@
- {{ lazy_img(image_url=image_url, include_highres_image=include_highres_image, placeholder_url='home/2018/placeholder.png', optional_attributes={'class': 'card-image'}) }} + {{ lazy_img(image_url=image_url, include_highres_image=include_highres_image, placeholder_url='placeholder.png', optional_attributes={'class': 'card-image'}) }}
{% if tag_label %} diff --git a/bedrock/settings/static_media.py b/bedrock/settings/static_media.py index 1f16fd469e..2156b40105 100644 --- a/bedrock/settings/static_media.py +++ b/bedrock/settings/static_media.py @@ -286,6 +286,12 @@ PIPELINE_CSS = { ), 'output_filename': 'css/firefox-home-bundle.css', }, + 'firefox-home-fbvideochat-funnelcake': { + 'source_filenames': ( + 'css/firefox/home-fbvideochat-funnelcake.scss', + ), + 'output_filename': 'css/firefox-home-fbvideochat-funnelcake-bundle.css', + }, 'nightly_firstrun': { 'source_filenames': ( 'css/firefox/nightly_firstrun.less', @@ -1069,6 +1075,12 @@ PIPELINE_JS = { ), 'output_filename': 'js/firefox-home-bundle.js', }, + 'firefox-home-fbvideochat-funnelcake': { + 'source_filenames': ( + 'js/firefox/home/fbvideochat-funnelcake.js', + ), + 'output_filename': 'js/firefox-home-fbvideochat-funnelcake-bundle.js', + }, 'firefox_new_scene1': { 'source_filenames': ( 'js/base/mozilla-modal.js', diff --git a/docs/analytics.rst b/docs/analytics.rst index 210c5cae89..66723c1eaa 100644 --- a/docs/analytics.rst +++ b/docs/analytics.rst @@ -84,3 +84,37 @@ For all download buttons, add these data attributes: | data-download-version |'standard', 'developer', 'beta' | +--------------------------+--------------------------------+ +For all conditional banners, add the following calls. + +When a banner is shown: + +.. code-block:: javascript + + dataLayer.push({ + 'eLabel': 'Banner Impression', + 'data-banner-name': '', //ex. Fb-Video-Compat + 'data-banner-impression': '1', + 'event': 'non-interaction' + }); + +When an element in the banner is clicked: + +.. code-block:: javascript + + dataLayer.push({ + 'eLabel': 'Banner Clickthrough', + 'data-banner-name': '', //ex. Fb-Video-Compat + 'data-banner-click': '1', + 'event': 'in-page-interaction' + }); + +When a banner is dismissed: + +.. code-block:: javascript + + dataLayer.push({ + 'eLabel': 'Banner Dismissal', + 'data-banner-name': '', //ex. Fb-Video-Compat + 'data-banner-dismissal': '1', + 'event': 'in-page-interaction' + }); diff --git a/media/css/firefox/home-fbvideochat-funnelcake.scss b/media/css/firefox/home-fbvideochat-funnelcake.scss new file mode 100644 index 0000000000..3e8a21f33b --- /dev/null +++ b/media/css/firefox/home-fbvideochat-funnelcake.scss @@ -0,0 +1,127 @@ +// 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'; + +.fbvideochat-banner { + background: #f5f5f5; // fallback for old IE + @include gradient-vertical($start-color: #fff, $end-color: #f5f5f5); + display: none; + text-align: center; + + .fbvideochat-close { + position: absolute; + right: 10px; + top: 10px; + + button { + background: transparent url('/media/img/notification/close-dark.svg') top center no-repeat; + border: none; + display: block; + height: 18px; + width: 18px; + } + + span { + @include visually-hidden(); + } + } + + .header-content { + margin-bottom: 20px; + padding-top: 20px; + + p { + @include font-size-level3; + margin: 0; + } + } + + .banner-logo { + display: block; + margin: 20px auto; + } + + .header-image-wrapper figcaption { + margin-top: 10px; + } + + // ensure placeholder image doesn't display too large + img.delay-load { + height: 1px; + width: 1px; + } + + .fx-privacy-link { + a:active, + a:focus, + a:hover, + a:link, + a:visited { + color: #000; + } + } + + @media #{$mq-tablet} { + .fbvideochat-close { + right: 20px; + top: 20px; + } + } + + @media #{$mq-desktop} { + text-align: left; + + .content { + padding-bottom: 40px; + padding-top: 40px; + } + + .header-content { + float: left; + width: 360px; + } + + .banner-logo { + margin: 20px 0 40px; + } + + .header-image-wrapper { + float: left; + padding-left: 40px; + text-align: center; + width: calc(100% - 400px); + } + + .header-image img { + display: block; + } + } + + @media #{$mq-desktop-wide} { + .header-content { + padding-top: 20px; + } + + .header-image-wrapper { + width: 810px; + } + } +} + +@supports (display: flex) { + .fbvideochat-banner .header-content-wrapper { + @media #{$mq-desktop} { + display: flex; + + .header-image-wrapper { + align-self: center; + } + } + + @media #{$mq-desktop-wide} { + display: block; + } + } +} diff --git a/media/img/firefox/home/fbvideochat-screenshot-high-res.jpg b/media/img/firefox/home/fbvideochat-screenshot-high-res.jpg new file mode 100644 index 0000000000..59962984a5 Binary files /dev/null and b/media/img/firefox/home/fbvideochat-screenshot-high-res.jpg differ diff --git a/media/img/firefox/home/fbvideochat-screenshot.jpg b/media/img/firefox/home/fbvideochat-screenshot.jpg new file mode 100644 index 0000000000..aa85436e59 Binary files /dev/null and b/media/img/firefox/home/fbvideochat-screenshot.jpg differ diff --git a/media/img/placeholder.png b/media/img/placeholder.png new file mode 100755 index 0000000000..1914264c08 Binary files /dev/null and b/media/img/placeholder.png differ diff --git a/media/js/firefox/home/fbvideochat-funnelcake.js b/media/js/firefox/home/fbvideochat-funnelcake.js new file mode 100644 index 0000000000..f9e48af1f7 --- /dev/null +++ b/media/js/firefox/home/fbvideochat-funnelcake.js @@ -0,0 +1,73 @@ +/* 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, Waypoint, dataLayer) { + 'use strict'; + + var $fbVideochatBanner; + + var ieRegex = /MSIE|Trident|Edge/i; + var isIE = ieRegex.test(window.navigator.userAgent); + + var fbRegex = /facebook\.com/i; + var isFromFb = fbRegex.test(document.referrer); + + var hasCookies = typeof Mozilla.Cookies !== 'undefined' && Mozilla.Cookies.enabled(); + + if (hasCookies && window.site.platform === 'windows' && isFromFb && isIE) { + // make sure visitor hasn't previously dismissed the banner + var wasDismissed = Mozilla.Cookies.getItem('fbvideochat-banner-dismiss'); + + if (wasDismissed === null) { + $fbVideochatBanner = $('#fbvideochat-banner'); + + // allow browser to laod the images + $('.delay-load').each(function(i, img) { + var $img = $(img); + $img.attr('src', $img.data('src')); + $img.attr('srcset', $img.data('srcset') + ' 1.5x'); + $img.removeAttr('data-src data-srcset').removeClass('delay-load'); + }); + + // append funnelcake ID to Windows download links + $('#download-fbvideochat').find('.os_win a, .os_win64 a').each(function(i, aTag) { + aTag.href += '?f=134'; + }); + + $('#fbvideochat-close').one('click', function() { + // don't show the banner again for 7 days + var d = new Date(); + d.setTime(d.getTime() + (7 * 24 * 60 * 60 * 1000)); + Mozilla.Cookies.setItem('fbvideochat-banner-dismiss', true, d.toUTCString(), '/'); + + $fbVideochatBanner.slideUp('fast', function() { + // reset trigger point of sub nav + Waypoint.refreshAll(); + + dataLayer.push({ + 'eLabel': 'Banner Dismissal', + 'data-banner-name': 'facebook-video-chat', + 'data-banner-dismissal': '1', + 'event': 'in-page-interaction' + }); + }); + }); + + // slight delay before sliding down the banner + setTimeout(function() { + $fbVideochatBanner.slideDown(400, function() { + // reset trigger point of sub nav + Waypoint.refreshAll(); + + dataLayer.push({ + 'eLabel': 'Banner Impression', + 'data-banner-name': 'facebook-video-chat', + 'data-banner-impression': '1', + 'event': 'non-interaction' + }); + }); + }, 500); + } + } +})(window.jQuery, window.Mozilla, window.Waypoint, window.dataLayer || []);