From 18aa232df48f35fae60be72ad06afe3f97a35606 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Mon, 2 Mar 2020 16:10:54 -0500 Subject: [PATCH 1/4] Add GA events for new pages --- src/Feedback.js | 14 ++++++++++++++ src/SeparateBoiler.js | 21 +++++++++++++++++++++ src/UnitBreakdown.js | 14 ++++++++++++++ 3 files changed, 49 insertions(+) diff --git a/src/Feedback.js b/src/Feedback.js index f6113122d..bb2930ae5 100644 --- a/src/Feedback.js +++ b/src/Feedback.js @@ -1,6 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; +import ReactGA from 'react-ga'; export default class Feedback extends React.Component { constructor(props) { @@ -10,6 +11,12 @@ export default class Feedback extends React.Component { }; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/feedback'); + } + } + handleInputChange = (event) => { const val = event.target.value; const name = event.target.name; @@ -24,6 +31,13 @@ export default class Feedback extends React.Component { } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "feedback" + }); + } this.props.nextQuestion( 'feedback', [], diff --git a/src/SeparateBoiler.js b/src/SeparateBoiler.js index a225dc101..75afd6a84 100644 --- a/src/SeparateBoiler.js +++ b/src/SeparateBoiler.js @@ -1,6 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; +import ReactGA from 'react-ga'; export default class SeparateBoiler extends React.Component { constructor(props) { @@ -15,11 +16,24 @@ export default class SeparateBoiler extends React.Component { ]; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/separate-boiler'); + } + } + prevQuestion = () => { this.props.prevQuestion('separateBoiler'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "separate-boiler" + }); + } this.props.setSeparateBoiler(this.state.answer); this.props.nextQuestion( 'separateBoiler', @@ -29,6 +43,13 @@ export default class SeparateBoiler extends React.Component { } chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose fuel type", + label: "separate-boiler" + }); + } this.setState({ answer }); } diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index 0ba7871c6..1dac8c000 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -1,6 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; +import ReactGA from 'react-ga'; export default class UnitBreakDown extends React.Component { constructor(props) { @@ -31,6 +32,12 @@ export default class UnitBreakDown extends React.Component { ] } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/unit-breakdown'); + } + } + handleInputChange = (event) => { const val = event.target.value; const name = event.target.name; @@ -46,6 +53,13 @@ export default class UnitBreakDown extends React.Component { nextQuestion = () => { if(this.validateEmptyInputs()) { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "unit-breakdown" + }); + } this.props.nextQuestion( 'unitBreakdown', [], -- GitLab From 2f958c62c750239c8028c54960cb350b568470c6 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Mon, 2 Mar 2020 17:00:39 -0500 Subject: [PATCH 2/4] Add GA event for waitlist --- src/SeparateBoiler.js | 2 +- src/WaitList.js | 22 +++++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/SeparateBoiler.js b/src/SeparateBoiler.js index 75afd6a84..1e07355ec 100644 --- a/src/SeparateBoiler.js +++ b/src/SeparateBoiler.js @@ -46,7 +46,7 @@ export default class SeparateBoiler extends React.Component { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ category: "Intake Survey", - action: "Chose fuel type", + action: "Chose DHW boiler type", label: "separate-boiler" }); } diff --git a/src/WaitList.js b/src/WaitList.js index 513ec7397..51ad68864 100644 --- a/src/WaitList.js +++ b/src/WaitList.js @@ -1,7 +1,7 @@ import React from "react"; import { Row, Col, Button } from 'reactstrap'; import './index.css'; - +import ReactGA from 'react-ga'; export default class WaitList extends React.Component { constructor(props) { @@ -15,15 +15,35 @@ export default class WaitList extends React.Component { }; } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/wait-list'); + } + } + prevQuestion = () => { this.props.prevQuestion('waitList'); } nextQuestion = () => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Clicked continue button", + label: "wait-list" + }); + } this.props.nextQuestion('waitList', this.names[this.state.answer], this.state.answer); } chooseAnswer = (answer) => { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.event({ + category: "Intake Survey", + action: "Chose waitlist type", + label: "wait-list" + }); + } this.setState({ answer }); } -- GitLab From 3cc4e894fb0770734133149b7570000f2a73ddb1 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Mon, 2 Mar 2020 17:15:01 -0500 Subject: [PATCH 3/4] Add GA events on Congrats and Thank you page --- src/Congrats.js | 19 +++++++-- src/ThankYou.js | 105 +++++++++++++++++++++++++++--------------------- 2 files changed, 74 insertions(+), 50 deletions(-) diff --git a/src/Congrats.js b/src/Congrats.js index 7884170fa..d90ad302b 100644 --- a/src/Congrats.js +++ b/src/Congrats.js @@ -1,8 +1,20 @@ import React from "react"; import congrats from './utils/images/spot-results-congratulations.svg'; // with import import './index.css'; +import ReactGA from 'react-ga'; -const Congrats = (props) => { +export default class Congrats extends React.Component { + constructor(props) { + super(props); + } + + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/congratulations'); + } + } + + render() { const items = [ 'Air source heat pumps use less energy than your current system', 'Air source heat pumps require less maintanence than your current system', @@ -14,7 +26,7 @@ const Congrats = (props) => { 'You can then remove your radiators and open up more usable space in your units', ]; - const data = props.naturalGas === true ? + const data = this.props.naturalGas === true ? items.slice(1).map(item => { return (
  • {item}
    • ) }) : items.map(item => { return (
  • {item}
    • ) }); const content = ( @@ -44,6 +56,5 @@ const Congrats = (props) => { {content} ); + } } - -export default Congrats; diff --git a/src/ThankYou.js b/src/ThankYou.js index 6da414970..516cb63aa 100644 --- a/src/ThankYou.js +++ b/src/ThankYou.js @@ -1,57 +1,70 @@ import React from "react"; import result from './utils/images/spot-results-more-info.svg'; // with import import './index.css'; +import ReactGA from 'react-ga'; -const ThankYou = (props) => { - // If building type is not single family (for NYC BIS) and for other surveys - var data = -
    - Looks like we need more information to see if your building is a good fit for air source heat pumps. - We'll send you an email to find a time to chat or you can {' '} - call us at {process.env.REACT_APP_BLOCPOWER_CONTACT}. -
    +export default class ThankYou extends React.Component { + constructor(props) { + super(props); + } - // If building type is single family and user has joined the waitlist - if (props.singleFamily === true) { - data = - props.waitList === true ? -
    - Thanks for joining our waitlist! - We'll be in touch as soon as we expand our services! -
    - If you’d like to reach out to us in the meantime you can call us at {process.env.REACT_APP_BLOCPOWER_CONTACT}. -
    : -
    - Sorry to see you go! Come back any time if you change your mind! -
    - } + componentDidMount () { + if(process.env.REACT_APP_ENVIRONMENT==='production'){ + ReactGA.pageview('/thank-you'); + } + } - if (props.milwaukee === true) { - data = + render() { + // If building type is not single family (for NYC BIS) and for other surveys + var data =
    - Looks like we need more information to see what energy saving projects are a good fit for your building. -
    - We’ll send you an email to find a time to chat or you - can call us at {process.env.REACT_APP_BLOCPOWER_CONTACT} - or email us at welcome.milwaukee@blocpower.io. -
    - } - - const content = ( -
    - -
    - Thank You! + Looks like we need more information to see if your building is a good fit for air source heat pumps. + We'll send you an email to find a time to chat or you can {' '} + call us at {process.env.REACT_APP_BLOCPOWER_CONTACT}. +
    + + // If building type is single family and user has joined the waitlist + if (this.props.singleFamily === true) { + data = + this.props.waitList === true ? +
    + Thanks for joining our waitlist! + We'll be in touch as soon as we expand our services! +
    + If you’d like to reach out to us in the meantime you can call us at {process.env.REACT_APP_BLOCPOWER_CONTACT}. +
    : +
    + Sorry to see you go! Come back any time if you change your mind!
    - { data } -
    - ); + } - return ( -
    - {content} -
    - ); + if (this.props.milwaukee === true) { + data = +
    + Looks like we need more information to see what energy saving projects are a good fit for your building. +
    + We’ll send you an email to find a time to chat or you + can call us at {process.env.REACT_APP_BLOCPOWER_CONTACT} + or email us at welcome.milwaukee@blocpower.io. +
    + } + + const content = ( +
    + +
    + Thank You! +
    + { data } +
    + ); + + return ( +
    + {content} +
    + ); + } } -export default ThankYou; +// export default ThankYou; -- GitLab From f73128ec46d56bfd9cc7ac0349884b39d29b0731 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Mon, 2 Mar 2020 17:20:41 -0500 Subject: [PATCH 4/4] Change the GA category to Intake Survey NYC --- src/AddressSearch.js | 2 +- src/BuildingTypes.js | 4 ++-- src/ComfortIssues.js | 4 ++-- src/Contact.js | 2 +- src/Feedback.js | 2 +- src/FinanceInterest.js | 2 +- src/Fuels.js | 4 ++-- src/HeatDistribution.js | 4 ++-- src/HeatingSystemAge.js | 4 ++-- src/HeatingSystemPlan.js | 4 ++-- src/ReviewAnswers.js | 2 +- src/SeparateBoiler.js | 4 ++-- src/UnitBreakdown.js | 2 +- src/UtilityBills.js | 4 ++-- src/WaitList.js | 4 ++-- 15 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/AddressSearch.js b/src/AddressSearch.js index b28b0c2e6..eed611c28 100644 --- a/src/AddressSearch.js +++ b/src/AddressSearch.js @@ -70,7 +70,7 @@ export default class AddressSearch extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "address-search" }); diff --git a/src/BuildingTypes.js b/src/BuildingTypes.js index c17a22e08..dae415112 100644 --- a/src/BuildingTypes.js +++ b/src/BuildingTypes.js @@ -40,7 +40,7 @@ export default class BuildingTypes extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "building-type" }); @@ -55,7 +55,7 @@ export default class BuildingTypes extends React.Component { chooseAnswer = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose building type", label: "building-type" }); diff --git a/src/ComfortIssues.js b/src/ComfortIssues.js index 0de86a9eb..eed94f2f2 100644 --- a/src/ComfortIssues.js +++ b/src/ComfortIssues.js @@ -34,7 +34,7 @@ export default class ComfortIssues extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "comfort-issues" }); @@ -49,7 +49,7 @@ export default class ComfortIssues extends React.Component { chooseAnswer = (answerId) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Select answer", label: "comfort-issues" }); diff --git a/src/Contact.js b/src/Contact.js index 0aa7fdacb..ce86da535 100644 --- a/src/Contact.js +++ b/src/Contact.js @@ -37,7 +37,7 @@ export default class Contact extends React.Component { submitContact = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "contact-information" }); diff --git a/src/Feedback.js b/src/Feedback.js index bb2930ae5..30beb7618 100644 --- a/src/Feedback.js +++ b/src/Feedback.js @@ -33,7 +33,7 @@ export default class Feedback extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "feedback" }); diff --git a/src/FinanceInterest.js b/src/FinanceInterest.js index d465d7df3..3aae4e51e 100644 --- a/src/FinanceInterest.js +++ b/src/FinanceInterest.js @@ -29,7 +29,7 @@ export default class FinanceInterest extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "finance-interest" }); diff --git a/src/Fuels.js b/src/Fuels.js index 6b5715194..41ec2aecf 100644 --- a/src/Fuels.js +++ b/src/Fuels.js @@ -38,7 +38,7 @@ export default class Fuels extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "fuel-type" }); @@ -54,7 +54,7 @@ export default class Fuels extends React.Component { chooseFuel = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose fuel type", label: "fuel-type" }); diff --git a/src/HeatDistribution.js b/src/HeatDistribution.js index ef984f60e..caace3de5 100644 --- a/src/HeatDistribution.js +++ b/src/HeatDistribution.js @@ -37,7 +37,7 @@ export default class HeatDistribution extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "heat-distribution" }); @@ -54,7 +54,7 @@ export default class HeatDistribution extends React.Component { chooseAnswer = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose type of heat distribution", label: "heat-distribution" }); diff --git a/src/HeatingSystemAge.js b/src/HeatingSystemAge.js index 71e893d98..995f0987f 100644 --- a/src/HeatingSystemAge.js +++ b/src/HeatingSystemAge.js @@ -33,7 +33,7 @@ export default class HeatingSystemAge extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "heating-system-age" }); @@ -49,7 +49,7 @@ export default class HeatingSystemAge extends React.Component { chooseAnswer = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose heating system age", label: "heating-system-age" }); diff --git a/src/HeatingSystemPlan.js b/src/HeatingSystemPlan.js index fff1d2278..78a37c06b 100644 --- a/src/HeatingSystemPlan.js +++ b/src/HeatingSystemPlan.js @@ -32,7 +32,7 @@ export default class HeatingSystemPlan extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "heating-system-plan" }); @@ -48,7 +48,7 @@ export default class HeatingSystemPlan extends React.Component { chooseAnswer = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose heating system plan", label: "heating-system-plan" }); diff --git a/src/ReviewAnswers.js b/src/ReviewAnswers.js index 309d83b4f..6a80950d1 100644 --- a/src/ReviewAnswers.js +++ b/src/ReviewAnswers.js @@ -27,7 +27,7 @@ export default class ReviewAnswers extends React.Component { submit = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked submit button", label: "review-answers" }); diff --git a/src/SeparateBoiler.js b/src/SeparateBoiler.js index 1e07355ec..e1daa7cc9 100644 --- a/src/SeparateBoiler.js +++ b/src/SeparateBoiler.js @@ -29,7 +29,7 @@ export default class SeparateBoiler extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "separate-boiler" }); @@ -45,7 +45,7 @@ export default class SeparateBoiler extends React.Component { chooseAnswer = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose DHW boiler type", label: "separate-boiler" }); diff --git a/src/UnitBreakdown.js b/src/UnitBreakdown.js index 1dac8c000..fa278124c 100644 --- a/src/UnitBreakdown.js +++ b/src/UnitBreakdown.js @@ -55,7 +55,7 @@ export default class UnitBreakDown extends React.Component { if(this.validateEmptyInputs()) { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "unit-breakdown" }); diff --git a/src/UtilityBills.js b/src/UtilityBills.js index 5e997cb80..9f1cff8b7 100644 --- a/src/UtilityBills.js +++ b/src/UtilityBills.js @@ -27,7 +27,7 @@ export default class UtilityBills extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "utility-bills" }); @@ -45,7 +45,7 @@ export default class UtilityBills extends React.Component { chooseAnswer = (utility, answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose who pays the bills", label: "utility-bills" }); diff --git a/src/WaitList.js b/src/WaitList.js index 51ad68864..7128623c0 100644 --- a/src/WaitList.js +++ b/src/WaitList.js @@ -28,7 +28,7 @@ export default class WaitList extends React.Component { nextQuestion = () => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Clicked continue button", label: "wait-list" }); @@ -39,7 +39,7 @@ export default class WaitList extends React.Component { chooseAnswer = (answer) => { if(process.env.REACT_APP_ENVIRONMENT==='production'){ ReactGA.event({ - category: "Intake Survey", + category: "Intake Survey NYC", action: "Chose waitlist type", label: "wait-list" }); -- GitLab