diff --git a/client/src/components/Donation/DonateForm.js b/client/src/components/Donation/DonateForm.js
index 30881c980b..8d96b979b1 100644
--- a/client/src/components/Donation/DonateForm.js
+++ b/client/src/components/Donation/DonateForm.js
@@ -34,6 +34,7 @@ const numToCommas = num =>
num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
const propTypes = {
+ handleProcessing: PropTypes.func,
isDonating: PropTypes.bool,
isSignedIn: PropTypes.bool,
navigate: PropTypes.func.isRequired,
@@ -191,7 +192,7 @@ class DonateForm extends Component {
}
renderDonationOptions() {
- const { stripe } = this.props;
+ const { stripe, handleProcessing } = this.props;
const { donationAmount, donationDuration, paymentType } = this.state;
return (
@@ -203,6 +204,7 @@ class DonateForm extends Component {
donationAmount={donationAmount}
donationDuration={donationDuration}
getDonationButtonLabel={this.getDonationButtonLabel}
+ handleProcessing={handleProcessing}
hideAmountOptionsCB={this.hideAmountOptionsCB}
/>
diff --git a/client/src/components/Donation/DonateFormChildViewForHOC.js b/client/src/components/Donation/DonateFormChildViewForHOC.js
index 57a825ace7..db57f7e9a7 100644
--- a/client/src/components/Donation/DonateFormChildViewForHOC.js
+++ b/client/src/components/Donation/DonateFormChildViewForHOC.js
@@ -24,6 +24,7 @@ const propTypes = {
donationDuration: PropTypes.string.isRequired,
email: PropTypes.string,
getDonationButtonLabel: PropTypes.func.isRequired,
+ handleProcessing: PropTypes.func,
isSignedIn: PropTypes.bool,
showCloseBtn: PropTypes.func,
stripe: PropTypes.shape({
@@ -146,8 +147,11 @@ class DonateFormChildViewForHOC extends Component {
// change the donation modal button label to close
// or display the close button for the cert donation section
- if (this.props.showCloseBtn) {
- this.props.showCloseBtn();
+ if (this.props.handleProcessing) {
+ this.props.handleProcessing(
+ this.state.donationDuration,
+ Math.round(this.state.donationAmount / 100)
+ );
}
return postChargeStripe({
diff --git a/client/src/components/Donation/DonationModal.js b/client/src/components/Donation/DonationModal.js
index 10835c191d..531545a3dc 100644
--- a/client/src/components/Donation/DonationModal.js
+++ b/client/src/components/Donation/DonationModal.js
@@ -11,11 +11,11 @@ import Heart from '../../assets/icons/Heart';
import Cup from '../../assets/icons/Cup';
import MinimalDonateForm from './MinimalDonateForm';
-import ga from '../../analytics';
import {
closeDonationModal,
isDonationModalOpenSelector,
- isBlockDonationModalSelector
+ isBlockDonationModalSelector,
+ executeGA
} from '../../redux';
import { challengeMetaSelector } from '../../templates/Challenges/redux';
@@ -36,7 +36,8 @@ const mapStateToProps = createSelector(
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
- closeDonationModal
+ closeDonationModal,
+ executeGA
},
dispatch
);
@@ -45,18 +46,44 @@ const propTypes = {
activeDonors: PropTypes.number,
block: PropTypes.string,
closeDonationModal: PropTypes.func.isRequired,
+ executeGA: PropTypes.func,
isBlockDonation: PropTypes.bool,
show: PropTypes.bool
};
-function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
+function DonateModal({
+ show,
+ block,
+ isBlockDonation,
+ closeDonationModal,
+ executeGA
+}) {
const [closeLabel, setCloseLabel] = React.useState(false);
- const showCloseBtn = () => {
+ const handleProcessing = (duration, amount) => {
+ executeGA({
+ type: 'event',
+ data: {
+ category: 'donation',
+ action: 'Modal strip form submission',
+ label: duration,
+ value: amount
+ }
+ });
setCloseLabel(true);
};
if (show) {
- ga.modalview('/donation-modal');
+ executeGA({ type: 'modal', data: '/donation-modal' });
+ executeGA({
+ type: 'event',
+ data: {
+ category: 'Donation',
+ action: `Displayed ${
+ isBlockDonation ? 'block' : 'progress'
+ } donation modal`,
+ nonInteraction: true
+ }
+ });
}
const donationText = (
@@ -101,7 +128,7 @@ function DonateModal({ show, block, isBlockDonation, closeDonationModal }) {
{isBlockDonation ? blockDonationText : progressDonationText}
-
+
diff --git a/client/src/components/Donation/MinimalDonateForm.js b/client/src/components/Donation/MinimalDonateForm.js
index 1b32441f73..487c266dbd 100644
--- a/client/src/components/Donation/MinimalDonateForm.js
+++ b/client/src/components/Donation/MinimalDonateForm.js
@@ -19,8 +19,8 @@ import './Donation.css';
const propTypes = {
defaultTheme: PropTypes.string,
+ handleProcessing: PropTypes.func,
isDonating: PropTypes.bool,
- showCloseBtn: PropTypes.func,
stripe: PropTypes.shape({
createToken: PropTypes.func.isRequired
})
@@ -79,7 +79,7 @@ class MinimalDonateForm extends Component {
render() {
const { donationAmount, donationDuration, stripe } = this.state;
- const { showCloseBtn, defaultTheme } = this.props;
+ const { handleProcessing, defaultTheme } = this.props;
return (
@@ -93,7 +93,7 @@ class MinimalDonateForm extends Component {
getDonationButtonLabel={() =>
`Confirm your donation of $5 per month`
}
- showCloseBtn={showCloseBtn}
+ handleProcessing={handleProcessing}
/>
diff --git a/client/src/components/Map/components/Block.js b/client/src/components/Map/components/Block.js
index aff1187813..437178342b 100644
--- a/client/src/components/Map/components/Block.js
+++ b/client/src/components/Map/components/Block.js
@@ -5,9 +5,8 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Link } from 'gatsby';
-import ga from '../../../analytics';
import { makeExpandedBlockSelector, toggleBlock } from '../redux';
-import { completedChallengesSelector } from '../../../redux';
+import { completedChallengesSelector, executeGA } from '../../../redux';
import Caret from '../../../assets/icons/Caret';
import { blockNameify } from '../../../../utils/blockNameify';
import GreenPass from '../../../assets/icons/GreenPass';
@@ -29,12 +28,13 @@ const mapStateToProps = (state, ownProps) => {
};
const mapDispatchToProps = dispatch =>
- bindActionCreators({ toggleBlock }, dispatch);
+ bindActionCreators({ toggleBlock, executeGA }, dispatch);
const propTypes = {
blockDashedName: PropTypes.string,
challenges: PropTypes.array,
completedChallenges: PropTypes.arrayOf(PropTypes.string),
+ executeGA: PropTypes.func,
intro: PropTypes.shape({
fields: PropTypes.shape({ slug: PropTypes.string.isRequired }),
frontmatter: PropTypes.shape({
@@ -58,19 +58,25 @@ export class Block extends Component {
}
handleBlockClick() {
- const { blockDashedName, toggleBlock } = this.props;
- ga.event({
- category: 'Map Block Click',
- action: blockDashedName
+ const { blockDashedName, toggleBlock, executeGA } = this.props;
+ executeGA({
+ type: 'event',
+ data: {
+ category: 'Map Block Click',
+ action: blockDashedName
+ }
});
return toggleBlock(blockDashedName);
}
handleChallengeClick(slug) {
return () => {
- return ga.event({
- category: 'Map Challenge Click',
- action: slug
+ return this.props.executeGA({
+ type: 'event',
+ data: {
+ category: 'Map Challenge Click',
+ action: slug
+ }
});
};
}
diff --git a/client/src/components/Map/components/Block.test.js b/client/src/components/Map/components/Block.test.js
index 1c8ef63ee0..762f30dcc9 100644
--- a/client/src/components/Map/components/Block.test.js
+++ b/client/src/components/Map/components/Block.test.js
@@ -44,6 +44,7 @@ test(' {
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/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 0a82331133..a60e98b3fc 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');
@@ -98,6 +128,7 @@ export class DonatePage extends Component {
@@ -117,4 +148,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/redux/ga-saga.js b/client/src/redux/ga-saga.js
new file mode 100644
index 0000000000..728af78495
--- /dev/null
+++ b/client/src/redux/ga-saga.js
@@ -0,0 +1,12 @@
+import { takeEvery, call, all } from 'redux-saga/effects';
+import ga from '../analytics';
+
+const GaTypes = { event: ga.event, page: ga.pageview, modal: ga.modalview };
+
+function* callGaType({ payload: { type, data } }) {
+ yield call(GaTypes[type], data);
+}
+
+export function* createGaSaga(types) {
+ yield all([takeEvery(types.executeGA, callGaType)]);
+}
diff --git a/client/src/redux/ga-saga.test.js b/client/src/redux/ga-saga.test.js
new file mode 100644
index 0000000000..2c3401fec5
--- /dev/null
+++ b/client/src/redux/ga-saga.test.js
@@ -0,0 +1,28 @@
+import { types } from '.';
+import { createGaSaga } from './ga-saga';
+import ga from '../analytics';
+import { expectSaga } from 'redux-saga-test-plan';
+
+describe('ga-saga', () => {
+ it('calls GA after executeGA action', () => {
+ const GaTypes = { event: ga.event, page: ga.pageview, modal: ga.modalview };
+ const mockEventPayload = {
+ type: 'event',
+ data: {
+ category: 'donation',
+ action: 'year end gift paypal button click'
+ }
+ };
+ return (
+ expectSaga(createGaSaga, types)
+ // Assert that the `call` with expected pramater will eventually happen.
+ .call(GaTypes.event, mockEventPayload.data)
+
+ // Dispatch any actions that the saga will `take`.
+ .dispatch({ type: types.executeGA, payload: mockEventPayload })
+
+ // Start the test.
+ .run()
+ );
+ });
+});
diff --git a/client/src/redux/index.js b/client/src/redux/index.js
index 66eb79fd4d..b17818bcd5 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 (