{
test(' should handle toggle clicks correctly', async () => {
const toggleSpy = jest.fn();
const toggleMapSpy = jest.fn();
+ const executeGA = jest.fn();
const props = {
blockDashedName: 'block-a',
@@ -51,6 +52,7 @@ test(' should handle toggle clicks correctly', async () => {
completedChallenges: mockCompleted,
intro: mockIntroNodes[0],
isExpanded: false,
+ executeGA: executeGA,
toggleBlock: toggleSpy,
toggleMapModal: toggleMapSpy
};
diff --git a/client/src/components/YearEndGift/YearEndDonationForm.js b/client/src/components/YearEndGift/YearEndDonationForm.js
index 53fefdad19..8f48c38695 100644
--- a/client/src/components/YearEndGift/YearEndDonationForm.js
+++ b/client/src/components/YearEndGift/YearEndDonationForm.js
@@ -26,9 +26,10 @@ const numToCommas = num =>
num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
const propTypes = {
- showCloseBtn: PropTypes.func,
+ handleProcessing: PropTypes.func,
defaultTheme: PropTypes.string,
isDonating: PropTypes.bool,
+ executeGA: PropTypes.func,
stripe: PropTypes.shape({
createToken: PropTypes.func.isRequired
})
@@ -47,6 +48,7 @@ class YearEndDonationForm extends Component {
this.handleSelectAmount = this.handleSelectAmount.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
+ this.handlePaypalSubmission = this.handlePaypalSubmission.bind(this);
}
componentDidMount() {
@@ -89,14 +91,13 @@ class YearEndDonationForm extends Component {
renderDonationOptions() {
const { donationAmount, stripe } = this.state;
-
- const { showCloseBtn, defaultTheme } = this.props;
+ const { handleProcessing, defaultTheme } = this.props;
return (
diff --git a/client/src/components/layouts/Certification.js b/client/src/components/layouts/Certification.js
index fc113724d9..9756ec4de1 100644
--- a/client/src/components/layouts/Certification.js
+++ b/client/src/components/layouts/Certification.js
@@ -2,8 +2,7 @@ import React, { Fragment, Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import ga from '../../analytics';
-import { fetchUser, isSignedInSelector } from '../../redux';
+import { fetchUser, isSignedInSelector, executeGA } from '../../redux';
import { createSelector } from 'reselect';
const mapStateToProps = createSelector(
@@ -13,7 +12,7 @@ const mapStateToProps = createSelector(
})
);
-const mapDispatchToProps = { fetchUser };
+const mapDispatchToProps = { fetchUser, executeGA };
class CertificationLayout extends Component {
componentDidMount() {
@@ -21,7 +20,7 @@ class CertificationLayout extends Component {
if (!isSignedIn) {
fetchUser();
}
- ga.pageview(pathname);
+ this.props.executeGA({ type: 'page', data: pathname });
}
render() {
return {this.props.children};
@@ -31,6 +30,7 @@ class CertificationLayout extends Component {
CertificationLayout.displayName = 'CertificationLayout';
CertificationLayout.propTypes = {
children: PropTypes.any,
+ executeGA: PropTypes.func,
fetchUser: PropTypes.func.isRequired,
isSignedIn: PropTypes.bool,
pathname: PropTypes.string.isRequired
diff --git a/client/src/components/layouts/Default.js b/client/src/components/layouts/Default.js
index 3fe129b2e6..382b931d7e 100644
--- a/client/src/components/layouts/Default.js
+++ b/client/src/components/layouts/Default.js
@@ -6,13 +6,13 @@ import { createSelector } from 'reselect';
import Helmet from 'react-helmet';
import fontawesome from '@fortawesome/fontawesome';
-import ga from '../../analytics';
import {
fetchUser,
isSignedInSelector,
onlineStatusChange,
isOnlineSelector,
- userSelector
+ userSelector,
+ executeGA
} from '../../redux';
import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
@@ -68,6 +68,7 @@ const metaKeywords = [
const propTypes = {
children: PropTypes.node.isRequired,
+ executeGA: PropTypes.func,
fetchUser: PropTypes.func.isRequired,
flashMessage: PropTypes.shape({
id: PropTypes.string,
@@ -101,27 +102,27 @@ const mapStateToProps = createSelector(
const mapDispatchToProps = dispatch =>
bindActionCreators(
- { fetchUser, removeFlashMessage, onlineStatusChange },
+ { fetchUser, removeFlashMessage, onlineStatusChange, executeGA },
dispatch
);
class DefaultLayout extends Component {
componentDidMount() {
- const { isSignedIn, fetchUser, pathname } = this.props;
+ const { isSignedIn, fetchUser, pathname, executeGA } = this.props;
if (!isSignedIn) {
fetchUser();
}
- ga.pageview(pathname);
+ executeGA({ type: 'page', data: pathname });
window.addEventListener('online', this.updateOnlineStatus);
window.addEventListener('offline', this.updateOnlineStatus);
}
componentDidUpdate(prevProps) {
- const { pathname } = this.props;
+ const { pathname, executeGA } = this.props;
const { pathname: prevPathname } = prevProps;
if (pathname !== prevPathname) {
- ga.pageview(pathname);
+ executeGA({ type: 'page', data: pathname });
}
}
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index f2464d302b..7000debfb4 100644
--- a/client/src/pages/donate.js
+++ b/client/src/pages/donate.js
@@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react';
import Helmet from 'react-helmet';
import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
@@ -9,10 +10,11 @@ import { stripePublicKey } from '../../config/env.json';
import { Spacer, Loader } from '../components/helpers';
import DonateForm from '../components/Donation/DonateForm';
import DonateText from '../components/Donation/DonateText';
-import { signInLoadingSelector, userSelector } from '../redux';
+import { signInLoadingSelector, userSelector, executeGA } from '../redux';
import { stripeScriptLoader } from '../utils/scriptLoaders';
const propTypes = {
+ executeGA: PropTypes.func,
isDonating: PropTypes.bool,
showLoading: PropTypes.bool.isRequired
};
@@ -26,6 +28,14 @@ const mapStateToProps = createSelector(
})
);
+const mapDispatchToProps = dispatch =>
+ bindActionCreators(
+ {
+ executeGA
+ },
+ dispatch
+ );
+
export class DonatePage extends Component {
constructor(...props) {
super(...props);
@@ -33,11 +43,19 @@ export class DonatePage extends Component {
stripe: null,
enableSettings: false
};
-
+ this.handleProcessing = this.handleProcessing.bind(this);
this.handleStripeLoad = this.handleStripeLoad.bind(this);
}
componentDidMount() {
+ this.props.executeGA({
+ type: 'event',
+ data: {
+ category: 'Donation',
+ action: `Displayed donate page`,
+ nonInteraction: true
+ }
+ });
if (window.Stripe) {
this.handleStripeLoad();
} else if (document.querySelector('#stripe-js')) {
@@ -56,6 +74,18 @@ export class DonatePage extends Component {
}
}
+ handleProcessing(duration, amount) {
+ this.props.executeGA({
+ type: 'event',
+ data: {
+ category: 'donation',
+ action: 'donate page stripe form submission',
+ label: duration,
+ value: amount
+ }
+ });
+ }
+
handleStripeLoad() {
// Create Stripe instance once Stripe.js loads
console.info('stripe has loaded');
@@ -88,6 +118,7 @@ export class DonatePage extends Component {
@@ -105,4 +136,7 @@ export class DonatePage extends Component {
DonatePage.displayName = 'DonatePage';
DonatePage.propTypes = propTypes;
-export default connect(mapStateToProps)(DonatePage);
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(DonatePage);
diff --git a/client/src/pages/year-end-gift.js b/client/src/pages/year-end-gift.js
index 05f4477410..2a19cd8c4e 100644
--- a/client/src/pages/year-end-gift.js
+++ b/client/src/pages/year-end-gift.js
@@ -1,11 +1,48 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import Helmet from 'react-helmet';
import { Grid } from '@freecodecamp/react-bootstrap';
+import { connect } from 'react-redux';
+import { executeGA } from '../redux';
+import { bindActionCreators } from 'redux';
+import PropTypes from 'prop-types';
import { Spacer, FullWidthRow } from '../components/helpers';
import YearEndDonationForm from '../components/YearEndGift/YearEndDonationForm';
-function YearEndGiftPage() {
+const mapDispatchToProps = dispatch =>
+ bindActionCreators(
+ {
+ executeGA
+ },
+ dispatch
+ );
+
+const propTypes = {
+ executeGA: PropTypes.func
+};
+
+function YearEndGiftPage({ executeGA }) {
+ useEffect(() => {
+ executeGA({
+ type: 'event',
+ data: {
+ category: 'Donation',
+ action: `Displayed year end gift page`,
+ nonInteraction: true
+ }
+ });
+ }, [executeGA]);
+ const handleProcessing = (duration, amount) => {
+ executeGA({
+ type: 'event',
+ data: {
+ category: 'donation',
+ action: 'year-end-gift strip form submission',
+ label: duration,
+ value: amount
+ }
+ });
+ };
return (
<>
@@ -13,7 +50,11 @@ function YearEndGiftPage() {
-
+
@@ -24,5 +65,9 @@ function YearEndGiftPage() {
}
YearEndGiftPage.displayName = 'YearEndGiftPage';
+YearEndGiftPage.propTypes = propTypes;
-export default YearEndGiftPage;
+export default connect(
+ null,
+ mapDispatchToProps
+)(YearEndGiftPage);
diff --git a/client/src/redux/ga-saga.js b/client/src/redux/ga-saga.js
new file mode 100644
index 0000000000..b2545b98c0
--- /dev/null
+++ b/client/src/redux/ga-saga.js
@@ -0,0 +1,11 @@
+import { takeEvery } from 'redux-saga/effects';
+import ga from '../analytics';
+
+function* callGaType({ payload: { type, data } }) {
+ const GaTypes = { event: ga.event, page: ga.pageview, modal: ga.modalview };
+ GaTypes[type](data);
+}
+
+export function createGaSaga(types) {
+ return [takeEvery(types.executeGA, callGaType)];
+}
diff --git a/client/src/redux/index.js b/client/src/redux/index.js
index b67bf24b37..439d5f18fa 100644
--- a/client/src/redux/index.js
+++ b/client/src/redux/index.js
@@ -11,6 +11,7 @@ import { createReportUserSaga } from './report-user-saga';
import { createShowCertSaga } from './show-cert-saga';
import { createNightModeSaga } from './night-mode-saga';
import { createDonationSaga } from './donation-saga';
+import { createGaSaga } from './ga-saga';
import hardGoToEpic from './hard-go-to-epic';
import failedUpdatesEpic from './failed-updates-epic';
@@ -65,6 +66,7 @@ export const types = createTypes(
'onlineStatusChange',
'resetUserData',
'tryToShowDonationModal',
+ 'executeGA',
'submitComplete',
'updateComplete',
'updateCurrentChallengeId',
@@ -84,6 +86,7 @@ export const sagas = [
...createAcceptTermsSaga(types),
...createAppMountSaga(types),
...createDonationSaga(types),
+ ...createGaSaga(types),
...createFetchUserSaga(types),
...createShowCertSaga(types),
...createReportUserSaga(types),
@@ -95,6 +98,9 @@ export const appMount = createAction(types.appMount);
export const tryToShowDonationModal = createAction(
types.tryToShowDonationModal
);
+
+export const executeGA = createAction(types.executeGA);
+
export const allowBlockDonationRequests = createAction(
types.allowBlockDonationRequests
);
diff --git a/client/src/templates/Challenges/components/CompletionModal.js b/client/src/templates/Challenges/components/CompletionModal.js
index 663ed6fc3e..d0c9286e07 100644
--- a/client/src/templates/Challenges/components/CompletionModal.js
+++ b/client/src/templates/Challenges/components/CompletionModal.js
@@ -6,10 +6,8 @@ import { createSelector } from 'reselect';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
import { useStaticQuery, graphql } from 'gatsby';
-import ga from '../../../analytics';
import Login from '../../../components/Header/components/Login';
import CompletionModalBody from './CompletionModalBody';
-
import { dasherize } from '../../../../../utils/slugs';
import './completion-modal.css';
@@ -25,7 +23,7 @@ import {
lastBlockChalSubmitted
} from '../redux';
-import { isSignedInSelector } from '../../../redux';
+import { isSignedInSelector, executeGA } from '../../../redux';
const mapStateToProps = createSelector(
challengeFilesSelector,
@@ -60,7 +58,8 @@ const mapDispatchToProps = function(dispatch) {
},
lastBlockChalSubmitted: () => {
dispatch(lastBlockChalSubmitted());
- }
+ },
+ executeGA
};
return () => dispatchers;
};
@@ -70,6 +69,7 @@ const propTypes = {
close: PropTypes.func.isRequired,
completedChallengesIds: PropTypes.array,
currentBlockIds: PropTypes.array,
+ executeGA: PropTypes.func,
files: PropTypes.object.isRequired,
id: PropTypes.string,
isOpen: PropTypes.bool,
@@ -190,7 +190,7 @@ export class CompletionModalInner extends Component {
const { completedPercent } = this.state;
if (isOpen) {
- ga.modalview('/completion-modal');
+ executeGA({ type: 'modal', data: '/completion-modal' });
}
const dashedName = dasherize(title);
return (
diff --git a/client/src/templates/Challenges/components/HelpModal.js b/client/src/templates/Challenges/components/HelpModal.js
index 18b819a473..6580ddc2fd 100644
--- a/client/src/templates/Challenges/components/HelpModal.js
+++ b/client/src/templates/Challenges/components/HelpModal.js
@@ -4,21 +4,22 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
-import ga from '../../../analytics';
import { createQuestion, closeModal, isHelpModalOpenSelector } from '../redux';
+import { executeGA } from '../../../redux';
import './help-modal.css';
const mapStateToProps = state => ({ isOpen: isHelpModalOpenSelector(state) });
const mapDispatchToProps = dispatch =>
bindActionCreators(
- { createQuestion, closeHelpModal: () => closeModal('help') },
+ { createQuestion, executeGA, closeHelpModal: () => closeModal('help') },
dispatch
);
const propTypes = {
closeHelpModal: PropTypes.func.isRequired,
createQuestion: PropTypes.func.isRequired,
+ executeGA: PropTypes.func,
isOpen: PropTypes.bool
};
@@ -27,9 +28,9 @@ const RSA =
export class HelpModal extends Component {
render() {
- const { isOpen, closeHelpModal, createQuestion } = this.props;
+ const { isOpen, closeHelpModal, createQuestion, executeGA } = this.props;
if (isOpen) {
- ga.modalview('/help-modal');
+ executeGA({ type: 'modal', data: '/help-modal' });
}
return (
diff --git a/client/src/templates/Challenges/components/ResetModal.js b/client/src/templates/Challenges/components/ResetModal.js
index cc80a78917..b6d55ceeed 100644
--- a/client/src/templates/Challenges/components/ResetModal.js
+++ b/client/src/templates/Challenges/components/ResetModal.js
@@ -5,13 +5,14 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
-import ga from '../../../analytics';
import { isResetModalOpenSelector, closeModal, resetChallenge } from '../redux';
+import { executeGA } from '../../../redux';
import './reset-modal.css';
const propTypes = {
close: PropTypes.func.isRequired,
+ executeGA: PropTypes.func,
isOpen: PropTypes.bool.isRequired,
reset: PropTypes.func.isRequired
};
@@ -25,7 +26,11 @@ const mapStateToProps = createSelector(
const mapDispatchToProps = dispatch =>
bindActionCreators(
- { close: () => closeModal('reset'), reset: () => resetChallenge() },
+ {
+ close: () => closeModal('reset'),
+ executeGA,
+ reset: () => resetChallenge()
+ },
dispatch
);
@@ -35,7 +40,7 @@ function withActions(...fns) {
function ResetModal({ reset, close, isOpen }) {
if (isOpen) {
- ga.modalview('/reset-modal');
+ executeGA({ type: 'modal', data: '/reset-modal' });
}
return (
({ isOpen: isVideoModalOpenSelector(state) });
const mapDispatchToProps = dispatch =>
- bindActionCreators({ closeVideoModal: () => closeModal('video') }, dispatch);
+ bindActionCreators(
+ { closeVideoModal: () => closeModal('video'), executeGA },
+ dispatch
+ );
const propTypes = {
closeVideoModal: PropTypes.func.isRequired,
+ executeGA: propTypes.func,
isOpen: PropTypes.bool,
videoUrl: PropTypes.string
};
export class VideoModal extends Component {
render() {
- const { isOpen, closeVideoModal, videoUrl } = this.props;
+ const { isOpen, closeVideoModal, videoUrl, executeGA } = this.props;
if (isOpen) {
- ga.modalview('/video-modal');
+ executeGA({ type: 'modal', data: '/completion-modal' });
}
return (