feat: wrap paypal form with ReactGA
This commit is contained in:
committed by
Stuart Taylor
parent
37f7dd1800
commit
c0d05cc96a
@ -1,7 +1,9 @@
|
|||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
import React, { Component, Fragment } from 'react';
|
import React, { Component, Fragment } from 'react';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
|
import ReactGA from 'react-ga';
|
||||||
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
|
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
|
||||||
|
|
||||||
import Spacer from '../components/helpers/Spacer';
|
import Spacer from '../components/helpers/Spacer';
|
||||||
|
|
||||||
const payPalPayments = [
|
const payPalPayments = [
|
||||||
@ -45,53 +47,48 @@ const payPalPayments = [
|
|||||||
class IndexPage extends Component {
|
class IndexPage extends Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
this.state = {
|
|
||||||
category: '',
|
|
||||||
action: '',
|
|
||||||
label: ''
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
formbuilder(eventLabel, eventValue, defaultValueHash, defaultValue) {
|
formbuilder(eventLabel, eventValue, defaultValueHash, defaultValue) {
|
||||||
return (
|
return (
|
||||||
<form
|
<div onClick={()=> ReactGA.event({category: 'Donation', action: 'paypal', label: eventValue.toString()})}>
|
||||||
action='//www.paypal.com/cgi-bin/webscr'
|
<form
|
||||||
method='post'
|
action='//www.paypal.com/cgi-bin/webscr'
|
||||||
onSubmit={`ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: ${eventLabel} 'paypal', eventValue: ${eventValue} } );`}
|
method='post'
|
||||||
target='_blank'
|
onSubmit={`ga('send', { hitType: 'event', eventCategory: 'donation', eventAction: 'click', eventLabel: ${eventLabel} 'paypal', eventValue: ${eventValue} } );`}
|
||||||
>
|
target='_blank'
|
||||||
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
>
|
||||||
<input
|
<input defaultValue='_s-xclick' name='cmd' type='hidden' />{' '}
|
||||||
defaultValue={defaultValueHash}
|
<input
|
||||||
name='hosted_button_id'
|
defaultValue={defaultValueHash}
|
||||||
type='hidden'
|
name='hosted_button_id'
|
||||||
/>{' '}
|
type='hidden'
|
||||||
<input
|
/>{' '}
|
||||||
className='btn btn-cta signup-btn btn-block'
|
<input
|
||||||
defaultValue={defaultValue}
|
className='btn btn-cta signup-btn btn-block'
|
||||||
name='submit'
|
defaultValue={defaultValue}
|
||||||
type='submit'
|
name='submit'
|
||||||
/>
|
type='submit'
|
||||||
</form>
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
formfilter = (array, frequency) => {
|
formfilter = (array, frequency) => {
|
||||||
let returnVal;
|
|
||||||
if (frequency === 'monthly') {
|
if (frequency === 'monthly') {
|
||||||
returnVal = array
|
return array
|
||||||
.filter(item => item.eventValue > 0)
|
.filter(item => item.eventValue > 0)
|
||||||
.map((item) => {
|
.map((item) => {
|
||||||
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
|
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
returnVal = array
|
return array
|
||||||
.filter(item => item.eventValue === 0)
|
.filter(item => item.eventValue === 0)
|
||||||
.map((item) => {
|
.map((item) => {
|
||||||
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
|
return this.formbuilder(item.eventLabel, item.eventValue, item.defaultValueHash, item.defaultValue);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return returnVal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
Reference in New Issue
Block a user