Merge pull request #10 from jpetto/bug-1077856-add-ga

Add GA tracking to modal links and search form. Bug 1077856.
mozilla · Oct 9, 2014 · a6bf156 · a6bf156
2 parents 58c5f84 + f54bfaa
commit a6bf156
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 10 deletions.
diff --git a/js/ffx36.js b/js/ffx36.js
@@ -2,26 +2,57 @@ var FFX36 = window.FFX36 || {};
 
 FFX36.Common = (function() {
 	function _init() {
-		$('#sf').focus();
-
+		var $sf = $('#sf');
+		var $modal, $shade;
+
+		$sf.focus();
+
 		if (_is_upgradable()) {
+			$modal = $('#modal');
+			$shade = $('#shade');
+
 			$('.upgradable').show();
 
 			_break_button_text();
 
-			$('#shade').fadeIn('fast', function() {
-				$('#modal').slideDown('fast');
+			$shade.fadeIn('fast', function() {
+				$modal.slideDown('fast');
 			});
 
 			$('a.dismiss').click(function(e) {
 				e.preventDefault();
 
-				$('#modal').slideUp('fast');
-				$('#shade').fadeOut('fast');
+				_ga_track(['_trackEvent', 'start.mozilla.org Interactions', 'link click', 'No thanks. I\'ll risk it.']);
+
+				$modal.slideUp('fast');
+				$shade.fadeOut('fast');
 
-				$('#sf').focus();
+				$sf.focus();
 			});
 		}
+
+		// track search form submit
+		$('#search-form').on('submit', function(e) {
+			e.preventDefault();
+
+			var $form = $(this);
+			$form.unbind('submit');
+
+			_ga_track(['_trackEvent', 'start.mozilla.org Interactions', 'Submit', 'Google Search'], function() {
+				$form.submit();
+			});
+		});
+
+		// track clicks on modal download CTA
+		$('#download-cta').on('click', function(e) {
+			e.preventDefault();
+
+			var href = this.href;
+
+			_ga_track(['_trackEvent', 'start.mozilla.org Interactions', 'download button click', 'Firefox for Desktop'], function() {
+				window.location = href;
+			});
+		});
 	}
 
 	function _break_button_text() {
@@ -55,6 +86,48 @@ FFX36.Common = (function() {
 		return false;
 	}
 
+	// swiped from https://github.com/mozilla/bedrock/blob/master/media/js/base/global.js#L135
+	function _ga_track(eventArray, callback) {
+	    // submit eventArray to GA and call callback only after tracking has
+	    // been sent, or if sending fails.
+	    //
+	    // callback is optional.
+	    //
+	    // Example usage:
+	    //
+	    // $(function() {
+	    //      var handler = function(e) {
+	    //           var _this = this;
+	    //           e.preventDefault();
+	    //           $(_this).off('submit', handler);
+	    //           gaTrack(
+	    //              ['_trackEvent', 'Newsletter Registration', 'submit', newsletter],
+	    //              function() {$(_this).submit();}
+	    //           );
+	    //      };
+	    //      $(thing).on('submit', handler);
+	    // });
+
+	    var hasCallback = typeof(callback) === 'function';
+
+	    if (typeof(window._gaq) === 'object') {
+	        // send event to GA
+	        window._gaq.push(eventArray);
+	        // Only set up timer and hitCallback if a callback exists.
+	        if (hasCallback) {
+	            // Need a timeout in order for __utm.gif request to complete in
+	            // order to register the GA event, before excecuting the callback.
+	            setTimeout(callback, 600);
+	        }
+	    } else {
+	        // GA disabled or blocked or something, make sure we still
+	        // call the caller's callback:
+	        if (hasCallback) {
+	            callback();
+	        }
+	    }
+	}
+
 	return {
 		init: function() {
 			_init();
@@ -64,4 +137,4 @@ FFX36.Common = (function() {
 
 $(document).ready(function() {
 	FFX36.Common.init();
-});
+});
diff --git a/templates/index.html b/templates/index.html
@@ -25,7 +25,7 @@
 <body>
 
 <div style="margin-top: 40px;">
-  <form action="http://google.com/search" name="f">
+  <form action="http://google.com/search" name="f" id="search-form">
     <table id="frame" style="margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0">
       <tbody>
         <tr>
@@ -203,7 +203,7 @@ <h1>{{ _('Your browser is out of date.') }}</h1>
     <p>{{ _('Upgrade today for the latest in speed and security.') }}</p>
   {% endif %}
 
-    <a href="https://www.mozilla.org/firefox/?utm_source=fx36start&utm_medium=banner&utm_campaign=3.6EOL{% if VERSION == 'urgent' %}Red{% else %}Blue{% endif %}" class="download" title="{{ _('Free Download') }}">
+    <a href="https://www.mozilla.org/firefox/?utm_source=fx36start&amp;utm_medium=banner&amp;utm_campaign=3.6EOL{% if VERSION == 'urgent' %}Red{% else %}Blue{% endif %}" class="download" title="{{ _('Free Download') }}" id="download-cta">
       <img class="logo" src="img/firefox-logo.png" width="93" height="27" />
       <span>{{ _('Free Download') }}</span>
       <img class="arrow" src="img/down-arrow.png" width="34" height="27" />