diff --git a/website/components/Calculator/CalculatorInputs.tsx b/website/components/Calculator/CalculatorInputs.tsx index 891f4157..6f37cf61 100644 --- a/website/components/Calculator/CalculatorInputs.tsx +++ b/website/components/Calculator/CalculatorInputs.tsx @@ -1,15 +1,16 @@ "use client"; -import { FiArrowRight, FiChevronDown } from "react-icons/fi"; +import { useEffect } from "react"; +import { FiChevronDown } from "react-icons/fi"; import styled from "styled-components"; -import { ButtonPrimary } from "@/components/Button"; import { tablet } from "@/constants/breakpoints"; import { ResourceRequirement } from "@/constants/calculator"; import { CostInterval, useCalculatorContext, } from "@/context/CalculatorContext"; +import analytics from "@/lib/analytics"; const resourceRequirementsOptions: ResourceRequirement[] = [ ResourceRequirement.MICRO, @@ -31,6 +32,20 @@ const CostSavingsCalculator = () => { setCostInterval, } = useCalculatorContext(); + const trackCalculate = () => { + analytics.track("CALCULATE", { + numEngineers: engineers, + numServices: microservices, + costInterval, + resourceRequirement, + }); + }; + + useEffect(() => { + trackCalculate(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [costInterval, resourceRequirement]); + return ( @@ -41,6 +56,8 @@ const CostSavingsCalculator = () => { setEngineers(parseInt(e.target.value))} + onMouseUp={trackCalculate} + onTouchEnd={trackCalculate} /> {engineers} @@ -52,6 +69,8 @@ const CostSavingsCalculator = () => { setMicroservices(parseInt(e.target.value))} + onMouseUp={trackCalculate} + onTouchEnd={trackCalculate} /> {microservices} diff --git a/website/lib/analytics.ts b/website/lib/analytics.ts index 9b59562c..b1aeb15d 100644 --- a/website/lib/analytics.ts +++ b/website/lib/analytics.ts @@ -79,6 +79,8 @@ interface Payload { // CALCULATE payload numEngineers?: number; numServices?: number; + costInterval?: string; + resourceRequirement?: string; // FORM_SUBMIT payload formType?: string; // which form is the user submitting