feat(analytics): Invite Friends experiment

Disables the prior landing page Google Experiment and begins a new one involving the placement and captioning of the button for inviting friends to the user's party.

common/locales/en/groups.json

@@ -119,7 +119,7 @@
     "sendGiftPurchase": "Purchase",
     "sendGiftMessagePlaceholder": "Personal message (optional)",
     "sendGiftSubscription": "<%= months %> Month(s): $<%= price %>",
-    "inviteFriends": "Invite Friends",
+    "battleWithFriends": "Battle Monsters With Friends",
     "startAParty": "Start a Party",
     "addToParty": "Add someone to your party"
 }

website/public/css/header.styl

@@ -87,18 +87,7 @@
 .site-header
   display: table
   height: 10.5em
-
+  width: 100%
-@media (min-width: 42.5em)
-  .site-header
-    width: 75%
-@media (min-width: 60em)
-  .site-header
-    // margin: 0 auto
-    width: 66%
-@media (min-width: 70em)
-  .site-header
-    width: 70%
-
 
 // this is a wrapper for avatars in the header
 // inside this is the actual `herobox` module
@@ -117,6 +106,7 @@
   display: table-cell
   vertical-align: middle
   min-width:175px
+  width: 50%
   @media screen and (max-width:768px)
     padding: 1.1em 0.618em 0
   .meter-label
@@ -173,7 +163,15 @@ header .hero-stats
   background-color: darken($color-herobox, 4%)
   border-right: 1px solid darken($color-herobox, 12%)
 
+.party
+  display: table-cell
+  width: 100%
+
 button.party-invite
   right: 10px;
   position: absolute;
   top: 55px;
+
+button.party-invite-middle
+  display: block
+  margin: 57px auto

website/public/js/controllers/footerCtrl.js

@@ -33,7 +33,7 @@ function($scope, $rootScope, User, $http, Notification, ApiUrl) {
 
     // Google Content Experiments
     if (window.env.NODE_ENV === 'production') {
-      $.getScript('//www.google-analytics.com/cx/api.js?experiment=t-AFggRWQnuJ6Teck_x1-Q', function(){
+      $.getScript('//www.google-analytics.com/cx/api.js?experiment=boVO4eEyRfysNE5D53nCMQ', function(){
         $rootScope.variant = cxApi.chooseVariation();
         $rootScope.$apply();
       })

website/public/js/controllers/headerCtrl.js

@@ -1,7 +1,7 @@
 "use strict";
 
-habitrpg.controller("HeaderCtrl", ['$scope', 'Groups', 'User', '$location', '$rootScope',
+habitrpg.controller("HeaderCtrl", ['$scope', 'Groups', 'User', '$location', '$rootScope', 'Analytics',
-  function($scope, Groups, User, $location, $rootScope) {
+  function($scope, Groups, User, $location, $rootScope, Analytics) {
 
     $scope.Math = window.Math;
     $scope.user = User.user;
@@ -25,6 +25,7 @@ habitrpg.controller("HeaderCtrl", ['$scope', 'Groups', 'User', '$location', '$ro
           }
         });
       } else {
+        Analytics.track({'hitType':'event','eventCategory':'button','eventAction':'click','eventLabel':'Invite Friends'});
         $location.path("/options/groups/party");
       }
     }

website/views/shared/header/header.jade

@@ -29,11 +29,15 @@
         span.meter-text.value
           span
           | {{Math.floor(user.stats.mp)}} / {{user._statsComputed.maxMP}}
-
+    // party, with Google Experiment boVO4eEyRfysNE5D53nCMQ for button caption and placement
-    // party
+    .party(ng-controller='PartyCtrl', ng-cloak)
-    span(ng-controller='PartyCtrl')
+      button.party-invite.btn.btn-primary(ng-click="inviteOrStartParty(group)",
-      button.party-invite.pull-right.btn.btn-primary(ng-click="inviteOrStartParty(group)",
+        ng-if="(!party.members || party.memberCount === 1) && user.preferences.displayInviteToPartyWhenPartyIs1 && ((variant % 2 < 1) || !variant)",
-        ng-if="(!party.members || party.memberCount === 1) && user.preferences.displayInviteToPartyWhenPartyIs1",
+        popover="{{!party.members ? env.t('startAParty') : env.t('addToParty')}}", popover-placement="left", popover-trigger="mouseenter")
-        popover="{{!party.members ? env.t('startAParty') : env.t('addToParty')}}", popover-placement="left", popover-trigger="mouseenter")=env.t("inviteFriends")
+        span {{ variant < 2 ? '#{env.t("battleWithFriends")}' : '#{env.t("inviteFriends")}' }}
+      button.party-invite-middle.btn.btn-primary(ng-click="inviteOrStartParty(group)",
+        ng-if="(!party.members || party.memberCount === 1) && user.preferences.displayInviteToPartyWhenPartyIs1 && (variant % 2 > 0)",
+        popover="{{!party.members ? env.t('startAParty') : env.t('addToParty')}}", popover-placement="top", popover-trigger="mouseenter")
+        span {{ variant < 2 ? '#{env.t("battleWithFriends")}' : '#{env.t("inviteFriends")}' }}
       .herobox-wrap(ng-repeat='profile in partyMinusSelf')
         +herobox()

website/views/static/front.jade

@@ -68,8 +68,8 @@ html(ng-app='habitrpg', ng-controller='RootCtrl')
                   a(href='/static/contact')=env.t('contactUs')
                 li
                   button#header-play-button.btn.btn-primary.navbar-btn.navbar-right(ng-click='playButtonClick()')= env.t('playButtonFull')
-      #intro(ng-cloak)
+      #intro
-        h1 {{ variant==0 ? "#{env.t('motivate')}" : (variant==1 ? "#{env.t('motivate1')}" : "#{env.t('motivate2')}") }}
+        h1=env.t('motivate2')
         img.center-block.img-responsive(src='https://s3.amazonaws.com/habitrpg-assets/front/images/intro.png')
         // insert intro images
         .introcall.bg-success