GA tracking

mozilla · Mar 30, 2015 · 79b9a5c · 79b9a5c
1 parent 710334d
commit 79b9a5c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 10 deletions.
diff --git a/bedrock/firefox/templates/firefox/family/index.html b/bedrock/firefox/templates/firefox/family/index.html
@@ -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')) }}
@@ -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>
@@ -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>

diff --git a/media/js/firefox/family-index.js b/media/js/firefox/family-index.js
@@ -20,6 +20,7 @@
         });
     });
 
+    // Check Firefox version
     if (isFirefox()) {
         // data-latest-firefox includes point release information
         var latestFirefoxVersionFull = $html.attr('data-latest-firefox');
@@ -34,4 +35,38 @@
         }
     }
 
+    // Track product clicks
+    $('.product-list').on('click', 'a', function(e) {
+        var newTab = (this.target === '_blank' || e.metaKey || e.ctrlKey);
+        var href = this.href;
+        var product = this.data('product');
+        var callback = function() {
+            window.location = href;
+        };
+
+        if (newTab) {
+            trackGenericLink('/firefox/products/ Interactions', product);
+        } else {
+            e.preventDefault();
+            trackGenericLink('/firefox/products/ Interactions', product, callback);
+        }
+    });
+
+    // Track download bar clicks
+    $($downloadbar).on('click', 'a', function(e) {
+        var newTab = (this.target === '_blank' || e.metaKey || e.ctrlKey);
+        var href = this.href;
+        var product = this.data('product');
+        var callback = function() {
+            window.location = href;
+        };
+
+        if (newTab) {
+            trackGenericLink('Firefox Downloads', product);
+        } else {
+            e.preventDefault();
+            trackGenericLink('Firefox Downloads', product, callback);
+        }
+    });
+
 })(window.jQuery, window._gaq, window.site);