зеркало из https://github.com/mozilla/bedrock.git
[fix bug 1458340] Add FB videochat funnelcake banner to /firefox/.
This commit is contained in:
Jon Petto
Alex Gibson
Родитель
5a795050ce
Коммит
c8c66bfd87
|
|
@ -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']) %}
|
||||
<div id="fbvideochat-banner" class="fbvideochat-banner">
|
||||
<div class="content">
|
||||
<div id="fbvideochat-close" class="fbvideochat-close"><button type="button"><span>Close</span></button></div>
|
||||
<div class="header-content-wrapper">
|
||||
<div class="header-content">
|
||||
<p>Facebook Video Messenger calls are easy with</p>
|
||||
|
||||
<img class="banner-logo delay-load" src="{{ static('img/placeholder.png') }}" data-src="{{ static('img/logos/firefox/logo-quantum-wordmark-large.png') }}" data-srcset="{{ static('img/logos/firefox/logo-quantum-wordmark-large-high-res.png') }}" alt="" width="185" height="69" />
|
||||
|
||||
{{ download_firefox(dom_id='download-fbvideochat', alt_copy=_('Download now'), download_location='banner cta') }}
|
||||
</div>
|
||||
<div class="header-image-wrapper">
|
||||
<figure class="header-image">
|
||||
<img class="delay-load" src="{{ static('img/placeholder.png') }}" data-src="{{ static('img/firefox/home/fbvideochat-screenshot.jpg') }}" data-srcset="{{ static('img/firefox/home/fbvideochat-screenshot-high-res.jpg') }}" alt="" width="810" height="433" />
|
||||
<figcaption>Launch your video experience by downloading Firefox.</figcaption>
|
||||
</figure>
|
||||
</div>{#-- /.header-image-wrapper --#}
|
||||
</div>{#-- /.header-content-wrapper --#}
|
||||
</div>{#-- /.content --#}
|
||||
</div>{#-- /.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 %}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
<section class="card {% if class %}{{ class }}{% endif %} {% if video_url %}has-video{% endif %}">
|
||||
<a class="card-block-link" href="{{ link_url }}" data-link-name="{{ ga_title }}" data-link-type="link">
|
||||
<div class="card-media-wrapper {% if aspect_ratio %}{{ aspect_ratio }}{% endif %}">
|
||||
{{ 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'}) }}
|
||||
</div>
|
||||
<div class="card-content">
|
||||
{% if tag_label %}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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': '<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': '<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': '<banner name>', //ex. Fb-Video-Compat
|
||||
'data-banner-dismissal': '1',
|
||||
'event': 'in-page-interaction'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 174 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 58 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 95 B |
|
|
@ -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 || []);
|
||||
Загрузка…
Ссылка в новой задаче