Merge pull request #1505 from RodriSanchez1/feature/ElectronAnalytics

Feature - Add Google Analytics support for Electron platform
cboard-org · Dec 18, 2023 · 03eb5c0 · 03eb5c0
2 parents 0d3c5d5 + 6c8536c
commit 03eb5c0
Show file tree

Hide file tree

Showing 9 changed files with 552 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "private": false,
   "license": "GPL-3.0-only",
   "dependencies": {
+    "@analytics-debugger/ga4mp": "git+https://github.com/RodriSanchez1/ga4mp.git#fix/fullVersionList",
     "@cospired/i18n-iso-languages": "^2.2.0",
     "@crowdin/crowdin-api-client": "^1.26.0",
     "@ctrl/react-adsense": "^1.7.0",
@@ -91,10 +92,11 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "babel-plugin-transform-import-meta": "^2.2.1",
     "@craco/craco": "^7.1.0",
     "@types/mime-types": "^2.1.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-transform-import-meta": "^2.2.1",
     "decompress-zip": "^0.3.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "3.3.5",
@@ -125,7 +127,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [
-      "node_modules/(?!idb|microsoft-cognitiveservices-speech-sdk)"
+      "node_modules/(?!idb|microsoft-cognitiveservices-speech-sdk|@analytics-debugger/ga4mp)"
     ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js"

diff --git a/src/components/Account/Login/Login.actions.js b/src/components/Account/Login/Login.actions.js
@@ -14,6 +14,7 @@ import {
 } from '../../App/App.actions';
 import { getVoiceURI } from '../../../i18n';
 import { isCordova, isElectron } from '../../../cordova-util';
+import ga4track from '../../../ga4mp';
 
 export function loginSuccess(payload) {
   return dispatch => {
@@ -22,9 +23,11 @@ export function loginSuccess(payload) {
       payload
     });
     if (payload.isFirstLogin) firstLoginActions(dispatch, payload);
-    if (isCordova() && !isElectron())
+    if (isCordova())
       try {
-        window.FirebasePlugin.setUserId(payload.id);
+        isElectron()
+          ? ga4track.setUserId(payload.id)
+          : window.FirebasePlugin.setUserId(payload.id);
       } catch (err) {
         console.error(err);
       }
@@ -41,9 +44,11 @@ async function firstLoginActions(dispatch, payload) {
 }
 
 export function logout() {
-  if (isCordova() && !isElectron())
+  if (isCordova())
     try {
-      window.FirebasePlugin.setUserId(undefined);
+      isElectron()
+        ? ga4track.setUserId(undefined)
+        : window.FirebasePlugin.setUserId(undefined);
     } catch (err) {
       console.error(err);
     }

diff --git a/src/components/App/App.container.js b/src/components/App/App.container.js
@@ -17,6 +17,8 @@ import {
   updateConnectivity
 } from '../App/App.actions';
 import { isCordova, isElectron } from '../../cordova-util';
+import ga4track from '../../ga4mp';
+
 export class AppContainer extends Component {
   static propTypes = {
     /**
@@ -66,15 +68,17 @@ export class AppContainer extends Component {
 
     const initCVAGa4 = () => {
       const { isLogged, userId } = this.props;
-      if (!isElectron()) {
-        try {
-          if (isLogged) {
-            window.FirebasePlugin.setUserId(userId);
-          }
-          window.FirebasePlugin.logEvent('page_view');
-        } catch (err) {
-          console.error(err);
-        }
+      try {
+        if (isLogged)
+          isElectron()
+            ? ga4track.setUserId(userId)
+            : window.FirebasePlugin.setUserId(userId);
+
+        isElectron()
+          ? ga4track.trackEvent('page_view')
+          : window.FirebasePlugin.logEvent('page_view');
+      } catch (err) {
+        console.error(err);
       }
     };
 

diff --git a/src/components/Board/Board.analytics.js b/src/components/Board/Board.analytics.js
@@ -1,6 +1,6 @@
 import { trackEvent } from '@redux-beacon/google-analytics-gtag';
 import { isCordova, cvaTrackEvent } from '../../cordova-util';
-
+import ga4track from '../../ga4mp';
 import {
   IMPORT_BOARDS,
   CREATE_BOARD,
@@ -27,7 +27,7 @@ const importBoards = trackEvent((action, prevState, nextState) => {
     action: 'Import Boards'
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, false, ga4track);
   }
   return gaEvent;
 });
@@ -46,7 +46,7 @@ const changeBoard = trackEvent((action, prevState, nextState) => {
     label: boardName
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -58,7 +58,7 @@ const createBoard = trackEvent((action, prevState, nextState) => {
     label: action.boardName
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -70,7 +70,7 @@ const createTile = trackEvent((action, prevState, nextState) => {
     label: action.tile.label
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -87,7 +87,7 @@ const deleteTiles = trackEvent((action, prevState, nextState) => {
     label: deletedTiles
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -103,7 +103,7 @@ const editTiles = trackEvent((action, prevState, nextState) => {
     label: editedTiles
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -115,7 +115,7 @@ const clickSymbol = trackEvent((action, prevState, nextState) => {
     label: action.symbolLabel
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -127,7 +127,7 @@ const clickOutput = trackEvent((action, prevState, nextState) => {
     label: action.outputPhrase
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });

diff --git a/src/constants.js b/src/constants.js
@@ -56,3 +56,6 @@ export const PAYPAL_CLIENT_ID =
 // Google related constants
 export const GOOGLE_FIREBASE_WEB_CLIENT_ID =
   process.env.REACT_APP_GOOGLE_FIREBASE_WEB_CLIENT_ID || '';
+
+// Google Analytics related constants
+export const GA4_MEASUREMENT_ID = 'G-60S79265FY';
diff --git a/src/cordova-util.js b/src/cordova-util.js
@@ -137,7 +137,7 @@ const configFacebookPlugin = () => {
   );
 };
 
-export const cvaTrackEvent = (category, action, label) => {
+export const cvaTrackEvent = (category, action, label, ga4mp) => {
   try {
     const convertEventToNewNomenclature = name => {
       const inLowerCase = name.toLowerCase();
@@ -154,9 +154,13 @@ export const cvaTrackEvent = (category, action, label) => {
       : {
           event_category: category
         };
-    if (!isElectron()) window.FirebasePlugin.logEvent(event_name, eventOptions);
+
+    if (isAndroid() || isIOS())
+      window.FirebasePlugin.logEvent(event_name, eventOptions);
+
+    if (isElectron()) ga4mp.trackEvent(event_name, eventOptions);
   } catch (err) {
-    console.log(err.message);
+    console.error(err.message);
   }
 };
 

diff --git a/src/ga4mp.js b/src/ga4mp.js
@@ -0,0 +1,11 @@
+import ga4mp from '@analytics-debugger/ga4mp';
+import { GA4_MEASUREMENT_ID } from './constants';
+
+const ga4track = ga4mp([GA4_MEASUREMENT_ID], {
+  non_personalized_ads: true,
+  debug: false,
+  user_agent:
+    'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
+});
+
+export default ga4track;
diff --git a/src/providers/SpeechProvider/SpeechProvider.analytics.js b/src/providers/SpeechProvider/SpeechProvider.analytics.js
@@ -8,6 +8,7 @@ import {
   EMPTY_VOICES
 } from './SpeechProvider.constants';
 import { isCordova, cvaTrackEvent } from '../../cordova-util';
+import ga4track from '../../ga4mp';
 
 const changeVoice = trackEvent((action, prevState, nextState) => {
   const gaEvent = {
@@ -16,7 +17,7 @@ const changeVoice = trackEvent((action, prevState, nextState) => {
     label: action ? action.voiceURI : EMPTY_VOICES
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -28,7 +29,7 @@ const changePitch = trackEvent((action, prevState, nextState) => {
     label: action.pitch
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -40,7 +41,7 @@ const changeRate = trackEvent((action, prevState, nextState) => {
     label: action.rate
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });
@@ -52,7 +53,7 @@ const startSpeech = trackEvent((action, prevState, nextState) => {
     label: action.text
   };
   if (isCordova()) {
-    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label);
+    cvaTrackEvent(gaEvent.category, gaEvent.action, gaEvent.label, ga4track);
   }
   return gaEvent;
 });