feat add event on form submission (#394)

* feat add event on form submission * update format
amplication · Jul 26, 2023 · 8a807c4 · 8a807c4
1 parent e061d74
commit 8a807c4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/components/Common/HubSpotForm/index.jsx b/components/Common/HubSpotForm/index.jsx
@@ -1,6 +1,7 @@
 import {useRef, useState} from 'react';
 import {useRouter} from 'next/router';
 import PropTypes from 'prop-types';
+import * as analytics from '../../../lib/analytics';
 
 const SKIP_SUBMIT_TEST = false;
 
@@ -13,6 +14,7 @@ const HubSpotForm = ({
   hubSpotFormId,
   successMessage,
   pageName,
+  formName,
 }) => {
   const [formIsSending, setFormIsSending] = useState(false);
   const [successMsg, setSuccessMsg] = useState('');
@@ -59,6 +61,17 @@ const HubSpotForm = ({
           setSuccessMsg(successMessage);
         }
 
+        const params = {};
+        formData.forEach((value, key) => (params[key] = value));
+
+        analytics.event({
+          action: 'formSubmitted',
+          params: {
+            formName,
+            ...params,
+          },
+        });
+
         setFormIsSending(false);
       } catch (e) {
         console.log('error', e);
@@ -152,6 +165,7 @@ HubSpotForm.propTypes = {
   hubSpotFormId: PropTypes.string,
   successMessage: PropTypes.string,
   pageName: PropTypes.string,
+  formName: PropTypes.string,
 };
 
 export default HubSpotForm;
diff --git a/components/Common/SubscribeForm/index.jsx b/components/Common/SubscribeForm/index.jsx
@@ -1,6 +1,7 @@
 import {useState, useRef} from 'react';
 import {useRouter} from 'next/router';
 import PropTypes from 'prop-types';
+import * as analytics from '../../../lib/analytics';
 
 const SKIP_SUBMIT_TEST = false;
 
@@ -58,6 +59,17 @@ const SubscribeForm = ({isCompactView}) => {
           setSuccessMsg(SUCCESS_MESSAGE);
         }
 
+        const params = {};
+        formData.forEach((value, key) => (params[key] = value));
+
+        analytics.event({
+          action: 'formSubmitted',
+          params: {
+            formName: 'subscribeBlogForm',
+            ...params,
+          },
+        });
+
         setFormIsSending(false);
       } catch (e) {
         setSuccessMsg(ERROR_MESSAGE);

diff --git a/components/Sections/DbImportBeta/Form/index.jsx b/components/Sections/DbImportBeta/Form/index.jsx
@@ -17,6 +17,7 @@ const Form = () => {
       hubSpotPortalId="25691669"
       hubSpotFormId="7299e150-38e9-4dc5-9b44-7399be050d7c"
       pageName="DB Import Beta"
+      formName="DBImportBetaForm"
       successMessage="Congratulations! We appreciate your interest and will be in touch soon with further instructions."
     >
       <div className="block relative w-full !mt-6">

diff --git a/pages/contact-us.js b/pages/contact-us.js
@@ -19,6 +19,7 @@ import avatar5 from '../public/images/testimonials/testimonial-5.png';
 import avatar6 from '../public/images/testimonials/testimonial-6.png';
 import avatar7 from '../public/images/testimonials/testimonial-7.png';
 import Image from 'next/image';
+import * as analytics from '../lib/analytics';
 
 const ContactUs = () => {
   const [formIsSended, setFormIsSended] = useState(false);
@@ -65,6 +66,18 @@ const ContactUs = () => {
       const data = await response.json();
       if (data.inlineMessage) {
         setSuccessMsg(data.inlineMessage);
+
+        const params = {};
+        formData.forEach((value, key) => (params[key] = value));
+
+        analytics.event({
+          action: 'formSubmitted',
+          params: {
+            formName: 'contactUsForm',
+            ...params,
+          },
+        });
+
         await router.push('/contact-us/thank-you');
       }
       setFormIsSended(false);
@@ -343,8 +356,8 @@ const ContactUs = () => {
                           required
                         />
                         <span className="ml-2 font-normal text-[10px] leading-[13px]">
-                          By signing up, I agree to Amplication&apos;s Terms of
-                          Service and Privacy Policy.
+                          By submitting this form, I agree to Amplication&apos;s
+                          Terms of Service and Privacy Policy.
                         </span>
                       </label>
                     </div>