Skip to content
This repository was archived by the owner on Mar 23, 2022. It is now read-only.

Commit b625664

Browse files
RaenonXRaenonX
authored
Merge pull request #13 from RaenonX-DL/dev
v1.2.0 Release
2 parents e8e2188 + fdc376b commit b625664

File tree

8 files changed

+73
-39
lines changed

8 files changed

+73
-39
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"react": "^17.0.1",
2222
"react-bootstrap": "^1.3.0",
2323
"react-dom": "^17.0.0",
24-
"react-ga": "^3.2.0",
2524
"react-google-login": "^5.1.22",
2625
"react-i18next": "^11.7.3",
2726
"react-markdown": "^5.0.1",

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050

5151
gtag('js', new Date());
5252

53-
gtag('config', 'G-796E69CFJG');
53+
gtag('config', 'G-796E69CFJG', {'send_page_view': false});
5454
</script>
5555
</head>
5656
<body>

‎src/components/elements/analysisPostOutput.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon
285285
post.ultimate ?
286286
<>
287287
<h3 className="mb-3">{t('posts.analysis.ultimate')}</h3>
288-
<div className="rounded bg-black-32 p-3">
288+
<div className="rounded bg-black-32 p-3 mb-3">
289289
<Markdown>{post.ultimate || 'N/A'}</Markdown>
290290
</div>
291291
</> :
@@ -296,7 +296,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon
296296
post.notes ?
297297
<>
298298
<h3 className="mb-3">{t('posts.analysis.notes_dragon')}</h3>
299-
<div className="rounded bg-black-32 p-3">
299+
<div className="rounded bg-black-32 p-3 mb-3">
300300
<Markdown>{post.notes || 'N/A'}</Markdown>
301301
</div>
302302
</> :
@@ -307,7 +307,7 @@ const AnalysisPostPartialOutputDragon = ({post}: AnalysisPostPartialOutputDragon
307307
post.suitableCharacters ?
308308
<>
309309
<h3 className="mb-3">{t('posts.analysis.suitable')}</h3>
310-
<div className="rounded bg-black-32 p-3">
310+
<div className="rounded bg-black-32 p-3 mb-3">
311311
<Markdown>{post.suitableCharacters || 'N/A'}</Markdown>
312312
</div>
313313
</> :

‎src/components/elements/googleSignin.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {useGoogleLogin, useGoogleLogout} from 'react-google-login';
66
import {ExpressModal} from './modalExpress';
77
import {ApiRequestSender} from '../../constants/api';
88
import {GOOGLE_CLIENT_ID} from '../../constants/config';
9+
import {GoogleAnalytics} from '../../constants/ga';
910

1011

1112
const STORAGE_KEY = 'X_GOOGLE_UID';
@@ -57,6 +58,8 @@ export const GoogleSigninButton = () => {
5758
};
5859

5960
const onLoginSuccess = (response) => {
61+
GoogleAnalytics.login('Google', true);
62+
6063
const googleUid = response.getId();
6164
const googleEmail = response.getBasicProfile().getEmail();
6265

@@ -66,6 +69,8 @@ export const GoogleSigninButton = () => {
6669
};
6770

6871
const onLoginFailure = (response) => {
72+
GoogleAnalytics.login('Google', false);
73+
6974
setModalLoginFailedState({
7075
show: true,
7176
title: t('google_signin.login_failed'),

‎src/components/elements/langSwitch.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {useTranslation} from 'react-i18next';
44
import {NavDropdown} from 'react-bootstrap';
55

66
import {SUPPORTED_LANG, SUPPORTED_LANG_NAME} from '../../constants/lang';
7-
import {GAEvent} from '../../constants/ga';
7+
import {GoogleAnalytics} from '../../constants/ga';
88

99

1010
export const LanguageSwitch = () => {
@@ -23,11 +23,11 @@ export const LanguageSwitch = () => {
2323
const changeLanguage = (newLanguage?: string) => {
2424
const newLang: string = newLanguage || new URLSearchParams(locations.search).get('lang') || 'dev';
2525

26+
GoogleAnalytics.languageChange(i18n.language, newLang);
27+
2628
// noinspection JSIgnoredPromiseFromCall
2729
i18n.changeLanguage(newLang);
2830

29-
GAEvent.languageChange(newLang);
30-
3131
setRedirected(true);
3232
};
3333

‎src/constants/ga.ts‎

Lines changed: 59 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,72 @@
1-
import ReactGA from 'react-ga';
2-
3-
/**
4-
* Google Analytics custom event category.
5-
*/
6-
export class GACategory {
7-
static APP_ACTION = 'App action'
8-
}
9-
101
/**
11-
* Google Analytics custom event action.
2+
* Google Analytics custom event name.
123
*/
13-
export class GAAction {
14-
static SWITCH_LANG = 'Switch Language'
4+
export class GAEvent {
5+
static LANG_CHANGE = 'lang_change';
6+
static LOGIN = 'login';
7+
static PAGE_VIEW = 'page_view';
158
}
169

1710
/**
18-
* Class for sending custom GA event
11+
* Class for sending custom GA events.
1912
*/
20-
export class GAEvent {
13+
export class GoogleAnalytics {
2114
/**
2215
* Record the event of switching the language.
2316
*
17+
* @param {string} oldLang old language
2418
* @param {string} newLang new language
2519
*/
26-
static languageChange(newLang: string) {
27-
ReactGA.event({
28-
category: GACategory.APP_ACTION,
29-
action: GAAction.SWITCH_LANG,
30-
label: newLang,
31-
nonInteraction: false,
32-
});
20+
static languageChange(oldLang: string, newLang: string) {
21+
GoogleAnalytics.sendEvent(
22+
GAEvent.LANG_CHANGE,
23+
{
24+
'old': oldLang,
25+
'new': newLang,
26+
},
27+
);
28+
}
29+
30+
/**
31+
* Record the event of an user logged in.
32+
*
33+
* @param {string} method method used for login
34+
* @param {boolean} success if the login succeed
35+
*/
36+
static login(method: string = 'Google', success: boolean = true) {
37+
GoogleAnalytics.sendEvent(
38+
GAEvent.LOGIN,
39+
{
40+
'method': method,
41+
'success': success,
42+
},
43+
);
44+
}
45+
46+
/**
47+
* Record the event of a page view.
48+
*
49+
* @param {Location} location location object
50+
*/
51+
static pageView(location: Location) {
52+
GoogleAnalytics.sendEvent(
53+
GAEvent.PAGE_VIEW,
54+
{
55+
'page_location': location.href,
56+
'page_title': document.title,
57+
'page_path': location.pathname,
58+
},
59+
);
60+
}
61+
62+
/**
63+
* Send a Google Analytics event via gtag.js.
64+
*
65+
* @param {string} eventName name of the event
66+
* @param {Object} parameters parameters of the event
67+
*/
68+
private static sendEvent(eventName: string, parameters: Object) {
69+
// @ts-ignore
70+
window.gtag('event', eventName, parameters);
3371
}
3472
}

‎src/index.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import {BrowserRouter} from 'react-router-dom';
4-
import ReactGA from 'react-ga';
54

65
import './index.css';
76
import Main from './main';
@@ -13,11 +12,6 @@ import './bootstrap.css';
1312
// import i18n (needs to be bundled)
1413
import './i18n';
1514

16-
// Initialize Google Analytics
17-
// https://www.npmjs.com/package/react-ga#upgrading-from-1x-to-2x
18-
// ReactGA.initialize('G-796E69CFJG', {debug: true}); // FIXME: Currently ReactGA seems not working
19-
ReactGA.initialize('G-796E69CFJG');
20-
2115
ReactDOM.render(
2216
<BrowserRouter>
2317
<Main/>

‎src/main.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {Suspense, useEffect} from 'react';
22
import {Route, useHistory} from 'react-router-dom';
33
import {Container, Spinner} from 'react-bootstrap';
44
import {useTranslation} from 'react-i18next';
5-
import ReactGA from 'react-ga';
65

76
import {
87
About,
@@ -20,6 +19,7 @@ import {
2019
} from './components/pages';
2120
import {Footer, Navigation} from './components/elements';
2221
import Path from './constants/path';
22+
import {GoogleAnalytics} from './constants/ga';
2323

2424

2525
// TODO: Add delete post function
@@ -157,11 +157,9 @@ const Main = () => {
157157
useEffect(
158158
() => {
159159
return history.listen((location) => {
160-
ReactGA.set({page: location.pathname});
161-
ReactGA.pageview(location.pathname);
160+
GoogleAnalytics.pageView(location);
162161
});
163162
},
164-
[history],
165163
);
166164

167165
return (

0 commit comments

Comments
 (0)