Revert "Revert Facebook Pixel" (#8449)

config.json.example

@@ -4,6 +4,7 @@
     "IP":"0.0.0.0",
     "CORES":1,
     "BASE_URL":"http://localhost:3000",
+    "FACEBOOK_ANALYTICS":"1234567890123456",
     "FACEBOOK_KEY":"123456789012345",
     "FACEBOOK_SECRET":"aaaabbbbccccddddeeeeffff00001111",
     "GOOGLE_CLIENT_ID":"123456789012345",

test/client-old/spec/services/analyticsServicesSpec.js

@@ -26,22 +26,14 @@ describe('Analytics Service', function () {
     describe('register', function() {
 
       beforeEach(function() {
-        sandbox.stub(amplitude, 'setUserId');
+        sandbox.stub(window, 'fbq');
-        sandbox.stub(window, 'ga');
       });
 
-      it('sets up user with Amplitude', function() {
+      it('records a registration event on Facebook', function() {
         analytics.register();
         clock.tick();
-        expect(amplitude.setUserId).to.have.been.calledOnce;
+        expect(fbq).to.have.been.calledOnce;
-        expect(amplitude.setUserId).to.have.been.calledWith(user._id);
+        expect(fbq).to.have.been.calledWith('track', 'CompleteRegistration');
-      });
-
-      it('sets up user with Google Analytics', function() {
-        analytics.register();
-        clock.tick();
-        expect(ga).to.have.been.calledOnce;
-        expect(ga).to.have.been.calledWith('set', {userId: user._id});
       });
     });
 
@@ -74,6 +66,7 @@ describe('Analytics Service', function () {
       beforeEach(function() {
         sandbox.stub(amplitude, 'logEvent');
         sandbox.stub(window, 'ga');
+        sandbox.stub(window, 'fbq');
       });
 
       context('successful tracking', function() {
@@ -113,6 +106,15 @@ describe('Analytics Service', function () {
           expect(ga).to.have.been.calledOnce;
           expect(ga).to.have.been.calledWith('send', properties);
         });
+
+        it('tracks a page view with Facebook', function() {
+          var properties = {'hitType':'pageview','eventCategory':'behavior','eventAction':'tasks'};
+          analytics.track(properties);
+          clock.tick();
+
+          expect(fbq).to.have.been.calledOnce;
+          expect(fbq).to.have.been.calledWith('track', 'PageView');
+        });
       });
 
       context('unsuccessful tracking', function() {
@@ -191,6 +193,8 @@ describe('Analytics Service', function () {
           todos: 1,
           rewards: 1
         };
+        expectedProperties.balance = 12;
+        expectedProperties.balanceGemAmount = 48;
 
         beforeEach(function() {
           user._id = 'unique-user-id';
@@ -205,6 +209,7 @@ describe('Analytics Service', function () {
           user.dailys = [{_id: 'daily'}];
           user.todos = [{_id: 'todo'}];
           user.rewards = [{_id: 'reward'}];
+          user.balance = 12;
 
           analytics.updateUser(properties);
           clock.tick();
@@ -238,7 +243,9 @@ describe('Analytics Service', function () {
             dailys: 1,
             habits: 1,
             rewards: 1
-          }
+          },
+          balance: 12,
+          balanceGemAmount: 48
         };
 
         beforeEach(function() {
@@ -256,6 +263,7 @@ describe('Analytics Service', function () {
           user.dailys = [{_id: 'daily'}];
           user.todos = [{_id: 'todo'}];
           user.rewards = [{_id: 'reward'}];
+          user.balance = 12;
 
           analytics.updateUser();
           clock.tick();

website/client-old/js/services/analyticsServices.js

@@ -32,6 +32,17 @@
       }, window['ga'].l = 1 * new Date();
     ga('create', window.env.GA_ID, user ? {'userId': user._id} : undefined);
 
+    // Facebook
+    var n = window.fbq = function() {
+      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
+    };
+    if (!window._fbq) window._fbq = n;
+    n.push = n;
+    n.loaded = !0;
+    n.version = '2.0';
+    n.queue = [];
+    fbq('init', window.env.FACEBOOK_ANALYTICS);
+
     function loadScripts() {
       setTimeout(function() {
         // Amplitude
@@ -45,16 +56,22 @@
         // Google Analytics
         var a = document.createElement('script');
         var m = document.getElementsByTagName('script')[0];
-        a.async = 1;
+        a.async = true;
         a.src = '//www.google-analytics.com/analytics.js';
         m.parentNode.insertBefore(a, m);
+
+        // Facebook
+        var t = document.createElement('script');
+        var f = document.getElementsByTagName('script')[0];
+        t.async = true;
+        t.src = 'https://connect.facebook.net/en_US/fbevents.js';
+        f.parentNode.insertBefore(t, f);
       });
     }
 
     function register() {
       setTimeout(function() {
-        amplitude.setUserId(user._id);
+        fbq('track', 'CompleteRegistration');
-        ga('set', {'userId':user._id});
       });
     }
 
@@ -72,6 +89,9 @@
 
         amplitude.logEvent(properties.eventAction,properties);
         ga('send',properties);
+        if(properties.hitType === 'pageview') {
+          fbq('track', 'PageView');
+        }
       });
     }
 
@@ -107,6 +127,10 @@
       properties.Level = user.stats.lvl;
       properties.Mana = Math.floor(user.stats.mp);
     }
+
+    properties.balance = user.balance;
+    properties.balanceGemAmount = properties.balance * 4;
+
     properties.tutorialComplete = user.flags && user.flags.tour && user.flags.tour.intro === -2;
     if (user.habits && user.dailys && user.todos && user.rewards) {
       properties["Number Of Tasks"] = {

website/server/middlewares/locals.js

@@ -12,7 +12,7 @@ import { mods } from '../models/user';
 // To avoid stringifying more data then we need,
 // items from `env` used on the client will have to be specified in this array
 const CLIENT_VARS = ['language', 'isStaticPage', 'availableLanguages', 'translations',
-                     'FACEBOOK_KEY', 'GOOGLE_CLIENT_ID', 'NODE_ENV', 'BASE_URL', 'GA_ID',
+                     'FACEBOOK_KEY', 'GOOGLE_CLIENT_ID', 'FACEBOOK_ANALYTICS', 'NODE_ENV', 'BASE_URL', 'GA_ID',
                      'AMAZON_PAYMENTS', 'STRIPE_PUB_KEY', 'AMPLITUDE_KEY',
                      'worldDmg', 'mods', 'IS_MOBILE', 'PUSHER:KEY', 'PUSHER:ENABLED'];
 
@@ -30,7 +30,7 @@ let env = {
   },
 };
 
-'NODE_ENV BASE_URL GA_ID STRIPE_PUB_KEY FACEBOOK_KEY GOOGLE_CLIENT_ID AMPLITUDE_KEY PUSHER:KEY PUSHER:ENABLED'
+'NODE_ENV BASE_URL GA_ID STRIPE_PUB_KEY FACEBOOK_ANALYTICS FACEBOOK_KEY GOOGLE_CLIENT_ID AMPLITUDE_KEY PUSHER:KEY PUSHER:ENABLED'
   .split(' ')
   .forEach(key => {
     env[key] = nconf.get(key);

website/views/index.jade

@@ -12,6 +12,8 @@ html(ng-app='habitrpg', ng-controller='RootCtrl', ng-class='{"applying-action":a
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
     meta(name='apple-mobile-web-app-capable', content='yes')
     meta(name='mobile-web-app-capable', content='yes')
+    noscript
+      img(height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=#{env.FACEBOOK_ANALYTICS}&ev=PageView&noscript=1")
 
     != env.getManifestFiles("app", "css")