adding feature to trackEvents from outside of webplayer

Author: jparez

src/APIManager.js

@@ -82,6 +82,37 @@ module.exports = class APIManager {
                 // eslint-disable-next-line max-len
                 'Invoke a callback function with an array of tracked events. This function is called whenever a new event is recorded.',
         });
+
+        this.registerFunction({
+            name: 'enableTrackEvents',
+            category: 'analytics',
+            fn: (isActive) => {
+                this.instance.store.dispatch({type: 'ENABLE_TRACKED_EVENTS', payload: isActive});
+                if (!isActive) {
+                    this.instance.store.dispatch({type: 'FLUSH_TRACKED_EVENTS'});
+                }
+            },
+            description: 'call a callback with an array of tracked events',
+        });
+
+        this.registerFunction({
+            name: 'trackEvents',
+            category: 'analytics',
+            fn: (cb) => {
+                // subcribe to store's TRACKEVENT change
+                this.instance.store.subscribe(
+                    ({trackedEvents}) => {
+                        if (this.instance.store.state.trackedEvents.events.length) {
+                            cb([...trackedEvents.events]);
+                            // flush the trackedEvents
+                            this.instance.store.dispatch({type: 'FLUSH_TRACKED_EVENTS'});
+                        }
+                    },
+                    ['trackedEvents.events'],
+                );
+            },
+            description: 'call a callback with an array of tracked events',
+        });
     }
 
     // Register a new API function with its name, category, function, and description

src/plugins/FileUpload.js

@@ -277,6 +277,14 @@ module.exports = class FileUpload extends OverlayPlugin {
             textProgress.innerHTML = this.i18n.UPLOADER_INSTALLING || 'Installing...';
         } else if (data[0] === 'ready' && data.length >= 2) {
             if (data[1].indexOf('opengapps') !== -1) {
+                this.instance.store.dispatch({
+                    type: 'ADD_TRACKED_EVENT',
+                    payload: {
+                        category: 'opengapps',
+                        type: 'installed',
+                        name: 'true',
+                    },
+                });
                 this.updateOpenGAppsStatus(true);
             }
 

src/plugins/GamepadManager.js

@@ -262,6 +262,13 @@ module.exports = class GamepadManager {
      * @param {GamepadEvent} event raw event coming from the browser Gamepad API
      */
     onGamepadConnected(event) {
+        this.instance.store.dispatch({
+            type: 'ADD_TRACKED_EVENT',
+            payload: {
+                category: 'gamepad',
+                action: 'plugged',
+            },
+        });
         const customEvent = new CustomEvent('gm-gamepadConnected', {detail: this.parseGamepad(event.gamepad)});
         window.dispatchEvent(customEvent);
     }
@@ -271,6 +278,13 @@ module.exports = class GamepadManager {
      * @param {GamepadEvent} event raw event coming from the browser Gamepad API
      */
     onGamepadDisconnected(event) {
+        this.instance.store.dispatch({
+            type: 'ADD_TRACKED_EVENT',
+            payload: {
+                category: 'gamepad',
+                action: 'unplugged',
+            },
+        });
         const customEvent = new CustomEvent('gm-gamepadDisconnected', {detail: this.parseGamepad(event.gamepad)});
         window.dispatchEvent(customEvent);
         this.stopListeningInputs(event.gamepad.index);

src/plugins/util/OverlayPlugin.js

@@ -61,6 +61,14 @@ class OverlayPlugin {
         if (this.toolbarBtnImage) {
             this.toolbarBtnImage.classList.add('gm-active');
         }
+        this.instance.store.dispatch({
+            type: 'ADD_TRACKED_EVENT',
+            payload: {
+                category: 'widget',
+                action: 'open',
+                name: this.constructor.name,
+            },
+        });
     }
 
     /**

src/store/index.js

@@ -11,6 +11,10 @@ const initialState = {
     },
     isKeyboardEventsEnabled: false,
     isMouseEventsEnabled: false,
+    trackedEvents: {
+        isActive: false,
+        events: [],
+    },
 };
 
 const createStore = (instance, reducer) => {
@@ -68,7 +72,8 @@ const createStore = (instance, reducer) => {
     const notifyListeners = (changedKeys) => {
         listeners.forEach(({keys, cb}) => {
             if (keys.length === 0 || keys.some((key) => hasChanged(changedKeys, key))) {
-                cb(instance.store.state);
+                // send a copy of the store's state, in order to avoid mutation of the store
+                cb({...instance.store.state});
             }
         });
     };
@@ -131,6 +136,19 @@ const reducer = (state, action) => {
                 state.isMouseEventsEnabled = true;
             }
             break;
+        case 'ENABLE_TRACKED_EVENTS':
+            state.trackedEvents.isActive = action.payload;
+            break;
+        case 'ADD_TRACKED_EVENT':
+            if (!state.trackedEvents.isActive) {
+                return state;
+            }
+            state.trackedEvents.events.push(action.payload);
+
+            break;
+        case 'FLUSH_TRACKED_EVENTS':
+            state.trackedEvents.events.length = 0;
+            break;
         default:
             log.debug('Store not updated, action type :', action.type, ' unknown');
             break;

tests/unit/apiManager.test.js

@@ -0,0 +1,57 @@
+'use strict';
+
+const ApiManager = require('../../src/APIManager');
+const Instance = require('../mocks/DeviceRenderer');
+const Clipboard = require('../../src/plugins/Clipboard');
+const store = require('../../src/store/index');
+
+let apiManager;
+let instance;
+let exposedApiFunctions;
+
+describe('APIManager', () => {
+    beforeEach(() => {
+        instance = new Instance({});
+        apiManager = new ApiManager(instance);
+        exposedApiFunctions = apiManager.getExposedApiFunctions();
+        store(instance);
+
+        new Clipboard(instance, {
+            CLIPBOARD_TITLE: 'TEST CLIPBOARD PLUGIN TITLE',
+        });
+    });
+
+    describe('has exposed api', () => {
+        test('getRegisteredFunctions', () => {
+            const registeredFunctions = exposedApiFunctions.utils.getRegisteredFunctions();
+            expect(Object.keys(registeredFunctions)).toEqual(
+                expect.arrayContaining([
+                    'sendData',
+                    'getRegisteredFunctions',
+                    'addEventListener',
+                    'disconnect',
+                    'enableTrackEvents',
+                    'trackEvents',
+                ]),
+            );
+        });
+
+        test('sendTrackEvent', () => {
+            let events = [];
+
+            exposedApiFunctions.analytics.enableTrackEvents(true);
+
+            // attach callback to get events
+            exposedApiFunctions.analytics.trackEvents((evts) => {
+                events = evts;
+            });
+
+            const button = document.getElementsByClassName('gm-clipboard-button')[0];
+            expect(button).toBeTruthy();
+            button.click();
+
+            // expect object to be exactly the same
+            expect(events).toEqual([{category: 'widget', action: 'open', name: 'Clipboard'}]);
+        });
+    });
+});