Skip to content

Commit

Permalink
GA tracking
Browse files Browse the repository at this point in the history
  • Loading branch information
craigcook committed Mar 31, 2015
1 parent 710334d commit 270d12f
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 33 deletions.
20 changes: 10 additions & 10 deletions bedrock/firefox/templates/firefox/family/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
<div class="message" id="dlbar-oldfx-desktop">
{{ _('You’re using an older version of Firefox for desktop.') }}
{{ _('Update today to stay fast and safe.') }}
<a class="button-flat btn-download" href="{{ url('firefox.new') }}">{{ _('Download') }}</a>
<a class="button-flat btn-download" href="{{ url('firefox.new') }}" data-product="Firefox for Desktop, outdated Firefox">{{ _('Download') }}</a>
</div>
<div class="message" id="dlbar-nonfx">
{{ _('Choose Independent.') }}
{{ _('Choose Firefox.') }}
<a class="button-flat btn-download" href="{{ url('firefox.new') }}">{{ _('Download') }}</a>
<a class="button-flat btn-download" href="{{ url('firefox.new') }}" data-product="Firefox for Desktop, other browser">{{ _('Download') }}</a>
</div>
<div class="message" id="dlbar-nonfx-android">
<a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{ _('Get Firefox for Android') }}</a>
<a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-product="Firefox for Android">{{ _('Get Firefox for Android') }}</a>
</div>
<div class="message" id="dlbar-ios">
{{ _('Firefox is coming soon to iOS! <a href="%s">Sign up to learn more</a>.')|format(url('newsletter.ios')) }}
Expand Down Expand Up @@ -60,27 +60,27 @@ <h1>
<div class="content">
<ul class="product-list">
<li class="product" id="product-desktop">
<a href="{{ url('firefox.desktop.index') }}">
<a href="{{ url('firefox.desktop.index') }}" data-product="Firefox for Desktop">
{# L10n: <span> tag below adds visual style to "for" text #}
<h2>{{ _('Firefox <span>for</span> desktop') }}</h2>
<p>{{ _('Trusted. Flexible. Fast.') }}</p>
</a>
</li>

<li class="product highlight" id="product-android">
<a href="{{ url('firefox.android.index') }}">
<a href="{{ url('firefox.android.index') }}" data-product="Firefox for Android">
{# L10n: span below adds visual style to "for" text #}
<h2>{{ _('Firefox <span>for</span> Android') }}</h2>
<p>{{ _('Make it uniquely yours.') }}</p>
</a>

<a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" class="btn-google-play">
<a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" class="btn-google-play" data-product="Firefox for Android, Google Play">
{{ high_res_img('firefox/android/btn-google-play.png', {'alt': 'Get it on Google Play', 'width': '129', 'height': '45', 'l10n': True}) }}
</a>
</li>

<li class="product" id="product-fxos">
<a href="{{ url('firefox.os.index') }}">
<a href="{{ url('firefox.os.index') }}" data-product="Firefox OS">
<h2>{{ _('Firefox OS') }}</h2>
<p>{{ _('Get just what you need.') }}</p>
</a>
Expand All @@ -93,21 +93,21 @@ <h2>{{ _('Firefox OS') }}</h2>
<div class="content">
<ul class="product-list">
<li class="product" id="product-hello">
<a href="{{ url('firefox.hello') }}">
<a href="{{ url('firefox.hello') }}" data-product="Firefox Hello">
<h2>{{ _('Firefox Hello') }}</h2>
<p>{{ _('Free, easy video conversations.') }}</p>
</a>
</li>

<li class="product" id="product-sync">
<a href="{{ url('firefox.sync') }}">
<a href="{{ url('firefox.sync') }}" data-product="Firefox Sync">
<h2>{{ _('Sync') }}</h2>
<p>{{ _('Connect Firefox wherever you use it.') }}</p>
</a>
</li>

<li class="product" id="product-marketplace">
<a rel="external" href="https://marketplace.firefox.com/">
<a rel="external" href="https://marketplace.firefox.com/" data-product="Firefox Marketplace">
<h2>{{ _('Firefox Marketplace') }}</h2>
<p>{{ _('Discover and download Web apps.') }}</p>
</a>
Expand Down
1 change: 0 additions & 1 deletion bedrock/settings/base.py
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,6 @@ def JINJA_CONFIG():
'firefox_family': {
'source_filenames': (
'css/sandstone/sandstone-resp.less',
'css/firefox/family-nav.less',
'css/firefox/family/index.less',
),
'output_filename': 'css/firefox-family-index-bundle.css',
Expand Down
35 changes: 16 additions & 19 deletions media/css/firefox/family/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
min-height: 1.5em;
overflow: hidden;
padding: 15px 0;
position: relative;
text-align: center;
width: 100%;
.transition(all 0.25s ease);
Expand Down Expand Up @@ -169,7 +170,7 @@ html.ios {

a {
.image-replaced();
background: url(/media/img/firefox/family/index/family-sprite.png) -90px -555px no-repeat;
background: url(/media/img/firefox/family/index/family-sprite.png) -90px -556px no-repeat;
display: block;
width: 148px;
height: 36px;
Expand Down Expand Up @@ -320,7 +321,7 @@ html.ios {
padding: 40px @gridGutterWidth 130px;
}

@media only screen and (max-width: @breakDesktop) and (min-width: (@breakTablet)) {
@media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
padding: 40px @gridGutterWidth 130px;
}
}
Expand Down Expand Up @@ -441,7 +442,7 @@ html.ios {
}
}

@media only screen and (max-width: @breakDesktop) and (min-width: (@breakTablet)) {
@media only screen and (max-width: @breakDesktop) and (min-width: @breakTablet) {
&:after {
left: 50%;
bottom: -45px;
Expand Down Expand Up @@ -534,25 +535,21 @@ html.ios {
}

// Hello
#product-hello {
h2:before {
.fxfamily-sprite(-380px, -115px);
width: 84px;
height: 80px;
top: 40px;
left: 60px;
}
#product-hello h2:before {
.fxfamily-sprite(-380px, -115px);
width: 84px;
height: 80px;
top: 40px;
left: 60px;
}

// Sync
#product-sync {
h2:before {
.fxfamily-sprite(-345px, -405px);
width: 120px;
height: 81px;
top: 32px;
left: 30px;
}
#product-sync h2:before {
.fxfamily-sprite(-345px, -405px);
width: 120px;
height: 81px;
top: 32px;
left: 30px;
}

// Marketplace
Expand Down
43 changes: 40 additions & 3 deletions media/js/firefox/family-index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* 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($, _gaq, site) {
;(function($) {
'use strict';

var $html = $(document.documentElement);
Expand All @@ -16,10 +16,13 @@
$downloadbar.animate({
top: '-' + ($downloadbar.height() + 10)
}, 350, function() {
$downloadbar.fadeOut().remove();
$downloadbar.fadeOut('fast', function() {
$downloadbar.remove();
});
});
});

// Check Firefox version
if (isFirefox()) {
// data-latest-firefox includes point release information
var latestFirefoxVersionFull = $html.attr('data-latest-firefox');
Expand All @@ -34,4 +37,38 @@
}
}

})(window.jQuery, window._gaq, window.site);
// Track product clicks
$('.product-list').on('click', 'a', function(e) {
var newTab = ($(this).target === '_blank' || e.metaKey || e.ctrlKey);
var href = $(this).attr('href');
var product = $(this).data('product');
var callback = function() {
window.location = href;
};

if (newTab) {
gaTrack(['_trackEvent', '/firefox/products/ Interactions', 'product click', href]);
} else {
e.preventDefault();
gaTrack(['_trackEvent', '/firefox/products/ Interactions', 'product click', href], callback);
}
});

// Track download bar clicks
$downloadbar.on('click', 'a', function(e) {
var newTab = ($(this).target === '_blank' || e.metaKey || e.ctrlKey);
var href = $(this).attr('href');
var product = $(this).data('product');
var callback = function() {
window.location = href;
};

if (newTab) {
gaTrack(['_trackEvent', '/firefox/products/ Interactions', 'Firefox downloads', href]);
} else {
e.preventDefault();
gaTrack(['_trackEvent', '/firefox/products/ Interactions', 'Firefox downloads', href], callback);
}
});

})(window.jQuery);

0 comments on commit 270d12f

Please sign in to comment.