IMP - Minor style improvements

FIX - Google Analytics Signed-off-by: RaenonX <[email protected]>
RaenonX-DL · Oct 31, 2020 · fdc376b · fdc376b
1 parent 763470b
commit fdc376b
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^17.0.0",
-    "react-ga": "^3.2.0",
     "react-google-login": "^5.1.22",
     "react-i18next": "^11.7.3",
     "react-markdown": "^5.0.1",

diff --git a/public/index.html b/public/index.html
@@ -50,7 +50,7 @@
 
       gtag('js', new Date());
 
-      gtag('config', 'G-796E69CFJG');
+      gtag('config', 'G-796E69CFJG', {'send_page_view': false});
     </script>
 </head>
 <body>

diff --git a/src/components/elements/analysisPostOutput.tsx b/src/components/elements/analysisPostOutput.tsx
@@ -285,7 +285,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon
         post.ultimate ?
           <>
             <h3 className="mb-3">{t('posts.analysis.ultimate')}</h3>
-            <div className="rounded bg-black-32 p-3">
+            <div className="rounded bg-black-32 p-3 mb-3">
               <Markdown>{post.ultimate || 'N/A'}</Markdown>
             </div>
           </> :
@@ -296,7 +296,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon
         post.notes ?
           <>
             <h3 className="mb-3">{t('posts.analysis.notes_dragon')}</h3>
-            <div className="rounded bg-black-32 p-3">
+            <div className="rounded bg-black-32 p-3 mb-3">
               <Markdown>{post.notes || 'N/A'}</Markdown>
             </div>
           </> :
@@ -307,7 +307,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon
         post.suitableCharacters ?
           <>
             <h3 className="mb-3">{t('posts.analysis.suitable')}</h3>
-            <div className="rounded bg-black-32 p-3">
+            <div className="rounded bg-black-32 p-3 mb-3">
               <Markdown>{post.suitableCharacters || 'N/A'}</Markdown>
             </div>
           </> :

diff --git a/src/components/elements/googleSignin.tsx b/src/components/elements/googleSignin.tsx
@@ -6,6 +6,7 @@ import {useGoogleLogin, useGoogleLogout} from 'react-google-login';
 import {ExpressModal} from './modalExpress';
 import {ApiRequestSender} from '../../constants/api';
 import {GOOGLE_CLIENT_ID} from '../../constants/config';
+import {GoogleAnalytics} from '../../constants/ga';
 
 
 const STORAGE_KEY = 'X_GOOGLE_UID';
@@ -57,6 +58,8 @@ export const GoogleSigninButton = () => {
   };
 
   const onLoginSuccess = (response) => {
+    GoogleAnalytics.login('Google', true);
+
     const googleUid = response.getId();
     const googleEmail = response.getBasicProfile().getEmail();
 
@@ -66,6 +69,8 @@ export const GoogleSigninButton = () => {
   };
 
   const onLoginFailure = (response) => {
+    GoogleAnalytics.login('Google', false);
+
     setModalLoginFailedState({
       show: true,
       title: t('google_signin.login_failed'),

diff --git a/src/components/elements/langSwitch.tsx b/src/components/elements/langSwitch.tsx
@@ -4,7 +4,7 @@ import {useTranslation} from 'react-i18next';
 import {NavDropdown} from 'react-bootstrap';
 
 import {SUPPORTED_LANG, SUPPORTED_LANG_NAME} from '../../constants/lang';
-import {GAEvent} from '../../constants/ga';
+import {GoogleAnalytics} from '../../constants/ga';
 
 
 export const LanguageSwitch = () => {
@@ -23,11 +23,11 @@ export const LanguageSwitch = () => {
   const changeLanguage = (newLanguage?: string) => {
     const newLang: string = newLanguage || new URLSearchParams(locations.search).get('lang') || 'dev';
 
+    GoogleAnalytics.languageChange(i18n.language, newLang);
+
     // noinspection JSIgnoredPromiseFromCall
     i18n.changeLanguage(newLang);
 
-    GAEvent.languageChange(newLang);
-
     setRedirected(true);
   };
 

diff --git a/src/constants/ga.ts b/src/constants/ga.ts
@@ -1,34 +1,72 @@
-import ReactGA from 'react-ga';
-
-/**
- * Google Analytics custom event category.
- */
-export class GACategory {
-  static APP_ACTION = 'App action'
-}
-
 /**
- * Google Analytics custom event action.
+ * Google Analytics custom event name.
  */
-export class GAAction {
-  static SWITCH_LANG = 'Switch Language'
+export class GAEvent {
+  static LANG_CHANGE = 'lang_change';
+  static LOGIN = 'login';
+  static PAGE_VIEW = 'page_view';
 }
 
 /**
- * Class for sending custom GA event
+ * Class for sending custom GA events.
  */
-export class GAEvent {
+export class GoogleAnalytics {
   /**
    * Record the event of switching the language.
    *
+   * @param {string} oldLang old language
    * @param {string} newLang new language
    */
-  static languageChange(newLang: string) {
-    ReactGA.event({
-      category: GACategory.APP_ACTION,
-      action: GAAction.SWITCH_LANG,
-      label: newLang,
-      nonInteraction: false,
-    });
+  static languageChange(oldLang: string, newLang: string) {
+    GoogleAnalytics.sendEvent(
+      GAEvent.LANG_CHANGE,
+      {
+        'old': oldLang,
+        'new': newLang,
+      },
+    );
+  }
+
+  /**
+   * Record the event of an user logged in.
+   *
+   * @param {string} method method used for login
+   * @param {boolean} success if the login succeed
+   */
+  static login(method: string = 'Google', success: boolean = true) {
+    GoogleAnalytics.sendEvent(
+      GAEvent.LOGIN,
+      {
+        'method': method,
+        'success': success,
+      },
+    );
+  }
+
+  /**
+   * Record the event of a page view.
+   *
+   * @param {Location} location location object
+   */
+  static pageView(location: Location) {
+    GoogleAnalytics.sendEvent(
+      GAEvent.PAGE_VIEW,
+      {
+        'page_location': location.href,
+        'page_title': document.title,
+        'page_path': location.pathname,
+      },
+    );
+  }
+
+  /**
+   * Send a Google Analytics event via gtag.js.
+   *
+   * @param {string} eventName name of the event
+   * @param {Object} parameters parameters of the event
+   */
+  private static sendEvent(eventName: string, parameters: Object) {
+    // @ts-ignore
+    window.gtag('event', eventName, parameters);
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {BrowserRouter} from 'react-router-dom';
-import ReactGA from 'react-ga';
 
 import './index.css';
 import Main from './main';
@@ -13,11 +12,6 @@ import './bootstrap.css';
 // import i18n (needs to be bundled)
 import './i18n';
 
-// Initialize Google Analytics
-// https://www.npmjs.com/package/react-ga#upgrading-from-1x-to-2x
-// ReactGA.initialize('G-796E69CFJG', {debug: true}); // FIXME: Currently ReactGA seems not working
-ReactGA.initialize('G-796E69CFJG');
-
 ReactDOM.render(
   <BrowserRouter>
     <Main/>

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,7 +2,6 @@ import React, {Suspense, useEffect} from 'react';
 import {Route, useHistory} from 'react-router-dom';
 import {Container, Spinner} from 'react-bootstrap';
 import {useTranslation} from 'react-i18next';
-import ReactGA from 'react-ga';
 
 import {
   About,
@@ -20,6 +19,7 @@ import {
 } from './components/pages';
 import {Footer, Navigation} from './components/elements';
 import Path from './constants/path';
+import {GoogleAnalytics} from './constants/ga';
 
 
 // TODO: Add delete post function
@@ -157,11 +157,9 @@ const Main = () => {
   useEffect(
     () => {
       return history.listen((location) => {
-        ReactGA.set({page: location.pathname});
-        ReactGA.pageview(location.pathname);
+        GoogleAnalytics.pageView(location);
       });
     },
-    [history],
   );
 
   return (