From fdc376b9c044e9194bfde94ac0243f476217b354 Mon Sep 17 00:00:00 2001 From: RaenonX Date: Sat, 31 Oct 2020 08:14:21 -0500 Subject: [PATCH] IMP - Minor style improvements FIX - Google Analytics Signed-off-by: RaenonX --- package.json | 1 - public/index.html | 2 +- .../elements/analysisPostOutput.tsx | 6 +- src/components/elements/googleSignin.tsx | 5 ++ src/components/elements/langSwitch.tsx | 6 +- src/constants/ga.ts | 80 ++++++++++++++----- src/index.tsx | 6 -- src/main.tsx | 6 +- 8 files changed, 73 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index ac14dd38..42f8fbd5 100644 --- 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 index 36f65169..359ea863 100644 --- 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}); diff --git a/src/components/elements/analysisPostOutput.tsx b/src/components/elements/analysisPostOutput.tsx index 53ce6fd7..682879af 100644 --- a/src/components/elements/analysisPostOutput.tsx +++ b/src/components/elements/analysisPostOutput.tsx @@ -285,7 +285,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon post.ultimate ? <>

{t('posts.analysis.ultimate')}

-
+
{post.ultimate || 'N/A'}
: @@ -296,7 +296,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon post.notes ? <>

{t('posts.analysis.notes_dragon')}

-
+
{post.notes || 'N/A'}
: @@ -307,7 +307,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon post.suitableCharacters ? <>

{t('posts.analysis.suitable')}

-
+
{post.suitableCharacters || 'N/A'}
: diff --git a/src/components/elements/googleSignin.tsx b/src/components/elements/googleSignin.tsx index 40acc39f..cba71097 100644 --- 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 index b8fff239..be27aba0 100644 --- 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 index 419c3085..33310461 100644 --- 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 index cd5276c9..63ae7735 100644 --- 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(
diff --git a/src/main.tsx b/src/main.tsx index 6c41622c..3e36d596 100644 --- 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 (