Set up history with AB testing for different methods of upgrading

services/web/app/views/layout.jade

@@ -28,7 +28,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 				ga('send', 'pageview');
 		- else
 			script(type='text/javascript')
-				window.ga = function() {};
+				window.ga = function() { console.log("Sending to GA", arguments) };
 
 		script
 			window.csrfToken = "#{csrfToken}";

services/web/app/views/templates.jade

@@ -434,6 +434,13 @@
 						i.icon-remove
 				.change-list-area
 			.track-changes-diff
+			.track-changes-upgrade-popup(style="display: none;")
+				.message
+					p You need to upgrade your plan to use the History feature.
+					button.btn.btn-primary.start-free-trial Start free trial
+			.track-changes-upgrade-control(style="display: none;")
+				.message History is not yet enabled for this project.
+				button.btn.btn-primary.btn-large.upgrade Enable History
 
 	script(type='text/template')#trackChangesDiffTemplate
 		.track-changes-diff-toolbar.btn-toolbar
@@ -463,10 +470,10 @@
 		ul.change-list.nav.nav-pills.nav-stacked
 			li.loading-changes Loading...
 			li.empty-message You haven't made any changes yet!
-			li.upgrade-message
+			li.track-changes-upgrade-oneweek(style="display: none;")
 				p We only store one week of changes for free accounts. Upgrade for an unlimited history.
 				p
-					button.btn.btn-primary.upgrade Upgrade
+					button.btn.btn-primary.start-free-trial Start free trial
 
 	script(type='text/template')#hotKeysListTemplate
 		.hotkeys

services/web/public/coffee/account/AccountManager.coffee

@@ -25,8 +25,19 @@ define [
 				},{
 					text: "Enter Billing Information"
 					class: "btn-primary"
-					callback: () ->
-						window.location = "/user/subscription/new?planCode=student_free_trial"
+					callback: () =>
+						options.onUpgrade?()
+						@gotoSubscriptionsPage()
+				}]
+
+		gotoSubscriptionsPage: () ->
+			window.open("/user/subscription/new?planCode=student_free_trial")
+			Modal.createModal
+				title: "Please refresh"
+				message: "Please refresh this page after starting your free trial. This will make sure all of your features are enabled."
+				buttons: [{
+					text: "OK"
+					class: ""
 				}]
 
 		showUpgradeDialog: (ide, options = {}) ->

services/web/public/coffee/analytics/AnalyticsManager.coffee

@@ -1,4 +1,6 @@
-define () ->
+define [
+	"libs/md5"
+], () ->
 	class AnalyticsManager
 		constructor: (@ide) ->
 			@ide.editor.on "update:doc", () =>
@@ -14,3 +16,18 @@ define () ->
 					ga('send', 'event', 'editor-interaction', 'single-compile')
 				if @compileCount == 3
 					ga('send', 'event', 'editor-interaction', 'multi-compile')
+
+		getABTestBucket: (test_name, buckets = []) ->
+			hash = CryptoJS.MD5("#{@ide.user.get("id")}:#{test_name}")
+			bucketIndex = parseInt(hash.toString().slice(0,2), 16) % buckets.length
+			return buckets[bucketIndex]
+
+		startABTest: (test_name, buckets = []) ->
+			value = @getABTestBucket(test_name, buckets)
+			ga('send', 'event', 'ab_tests', test_name, "viewed-#{value}")
+			return value
+
+		endABTest: (test_name, buckets = []) ->
+			value = @getABTestBucket(test_name, buckets)
+			ga('send', 'event', 'ab_tests', test_name, "converted-#{value}")
+			return value

services/web/public/coffee/project-members/ProjectMembersManager.coffee

@@ -76,17 +76,18 @@ define [
 			@ide.socket.emit "removeUserFromProject", member.id
 
 		addMember: (email, privileges) ->
+			console.log "Adding member", email
 			@ide.socket.emit "addUserToProject", email, privileges, (error, added) =>
 				if error?
 					@ide.showGenericServerErrorMessage()
 					return
 				if !added
+					console.log "got response", error, added
 					ga('send', 'event', 'subscription-funnel', 'askToUpgrade', "projectMemebrs")
 					AccountManager.askToUpgrade @ide,
 						why: "to add additional collaborators"
 						onUpgrade: () => 
 							ga('send', 'event', 'subscription-funnel', 'upgraded-free-trial', "projectMemebrs")
-							@addMember(email, privileges)
 
 		afterMemberRemoved: (memberId) ->
 			for member in @members.models

services/web/public/coffee/track-changes/ChangeListView.coffee

@@ -17,7 +17,6 @@ define [
 
 		events:
 			"scroll" : () -> @loadUntilFull()
-			"click button.upgrade": () -> @trigger "upgrade"
 
 		initialize: () ->
 			@itemViews = []
@@ -37,8 +36,6 @@ define [
 
 		render: ->
 			@$el.html Mustache.to_html @template
-			if !@options.promptToUpgrade
-				@$(".upgrade-message").hide()
 			@$el.css
 				overflow: "scroll"
 			this

services/web/public/coffee/track-changes/TrackChangesManager.coffee

@@ -44,16 +44,15 @@ define [
 					@doc_id = doc_id
 					@updateDiff()
 
+		AB_BUCKETS: ["control", "one-week", "pop-up"]
 		show: () ->
 			@changes = new ChangeList([], project_id: @project_id, ide: @ide)
 
 			if @changeListView?
 				@changeListView.remove()
-
 			@changeListView = new ChangeListView(
 				el: @$el.find(".change-list-area")
 				collection: @changes
-				promptToUpgrade: !@ide.project.get("features").versioning
 			)
 			@changeListView.render()
 			@changeListView.loadUntilFull (error) =>
@@ -62,7 +61,7 @@ define [
 			@changeListView.on "change_diff", (fromIndex, toIndex) =>
 				@selectDocAndUpdateDiff(fromIndex, toIndex)
 
-			@changeListView.on "upgrade", () => @askToUpgrade()
+			@showUpgradeView()
 
 			if @diffView?
 				@diffView.remove()
@@ -72,6 +71,21 @@ define [
 			@ide.fileViewManager.disable()
 			@enable()
 
+		showUpgradeView: () ->
+			@upgradeType ||= @ide.analyticsManager.startABTest('track-changes-upgrade', @AB_BUCKETS)
+			@$el.find("button.upgrade").off "click.track-changes"
+			@$el.find("button.start-free-trial").off "click.track-changes"
+			@$el.find("button.upgrade").on "click.track-changes", () => @askToUpgrade()
+			@$el.find("button.start-free-trial").on "click.track-changes", () => @gotoFreeTrial()
+
+			if !@ide.project.get("features").versioning
+				if @upgradeType == "pop-up"
+					@$el.find(".track-changes-upgrade-popup").show()
+				else if @upgradeType == "control"
+					@$el.find(".track-changes-upgrade-control").show()
+				else if @upgradeType == "one-week"
+					@$el.find(".track-changes-upgrade-oneweek").show()
+
 		hide: () ->
 			@ide.editor.enable()
 			@ide.fileViewManager.enable()
@@ -200,8 +214,15 @@ define [
 
 		askToUpgrade: () ->
 			ga('send', 'event', 'subscription-funnel', 'askToUpgrade', "trackchanges")
+			ga('send', 'event', 'ab_tests', 'track-changes-upgrade', "prompted-to-upgrade-#{@upgradeType}")
 			AccountManager.askToUpgrade @ide,
 				onUpgrade: () =>
+					@ide.analyticsManager.endABTest('track-changes-upgrade', @AB_BUCKETS)
 					ga('send', 'event', 'subscription-funnel', 'upgraded-free-trial', "trackchanges")
 
+		gotoFreeTrial: () ->
+			AccountManager.gotoSubscriptionsPage()
+			@ide.analyticsManager.endABTest('track-changes-upgrade', @AB_BUCKETS)
+			ga('send', 'event', 'subscription-funnel', 'upgraded-free-trial', "trackchanges")
+
 	return TrackChangesManager

services/web/public/stylesheets/less/trackchanges.less

@@ -79,6 +79,39 @@
 		}
 	}
 
+	.track-changes-upgrade-control, .track-changes-upgrade-popup {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 100;
+	}
+
+	.track-changes-upgrade-popup {
+		background-color: rgba(128,128,128,0.4);
+		.message {
+			margin: auto;
+			margin-top: 200px;
+			padding: 10px 10px 14px 10px;
+			width: 400px;
+			font-weight: bold;
+			text-align: center;
+			background-color: white;
+			.border-radius(8px);
+		}
+	}
+
+	.track-changes-upgrade-control {
+		background-color: #eeeeee;
+		text-align: center;
+		.message {
+			font-size: 18px;
+			margin: 12px;
+			margin-top: 36px;
+		}
+	}
+
 	.deleted-change-background,
 	.deleted-change-foreground,
 	.inserted-change-background,
@@ -246,7 +279,7 @@
 				}
 			}
 		}
-		li.upgrade-message {
+		li.track-changes-upgrade-oneweek {
 			padding: 15px;
 			background-color: rgb(255, 251, 210);
 			cursor: default;