Merge pull request #2534 from airqo-platform/website-doc-readme

Website: Added More event triggers to website
airqo-platform · Feb 27, 2025 · 09d3e67 · 09d3e67
2 parents e4c8c8a + 80ac62c
commit 09d3e67
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 3 deletions.
diff --git a/src/website2/src/components/dialogs/EngagementDialog.tsx b/src/website2/src/components/dialogs/EngagementDialog.tsx
@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from '@/hooks';
 import { postContactUs } from '@/services/externalService';
 import { closeModal } from '@/store/slices/modalSlice';
 
+import { trackEvent } from '../GoogleAnalytics';
 import { CustomButton } from '../ui';
 
 interface EngagementOption {
@@ -172,6 +173,17 @@ const EngagementDialog = () => {
         const res = await postContactUs(requestBody);
         if (res.success) {
           setSubmissionSuccess(true);
+
+          // Fire the tracking event only on successful submission.
+          trackEvent({
+            action: 'submit_form',
+            category: 'engagement_dialog',
+            label: selectedCategory
+              ? `engagement_dialog_submit_form_success_${selectedCategory}`
+              : 'engagement_dialog_submit_form_success',
+          });
+
+          // Reset form data after successful submission
           setFormData({
             firstName: '',
             lastName: '',

diff --git a/src/website2/src/components/layouts/Navbar.tsx b/src/website2/src/components/layouts/Navbar.tsx
@@ -225,13 +225,27 @@ const Navbar: React.FC = () => {
                 </NavigationMenuItem>
               ))}
               <CustomButton
-                onClick={() => dispatch(openModal())}
+                onClick={() => {
+                  trackEvent({
+                    action: 'button_click',
+                    category: 'engagement',
+                    label: 'get_involved',
+                  });
+                  dispatch(openModal());
+                }}
                 className="text-blue-600 bg-blue-50 transition rounded-none"
               >
                 Get involved
               </CustomButton>
               <CustomButton
-                onClick={() => router.push('/explore-data')}
+                onClick={() => {
+                  trackEvent({
+                    action: 'button_click',
+                    category: 'navigation',
+                    label: 'explore_data',
+                  });
+                  router.push('/explore-data');
+                }}
                 className="rounded-none"
               >
                 Explore data

diff --git a/src/website2/src/components/layouts/NewsLetter.tsx b/src/website2/src/components/layouts/NewsLetter.tsx
@@ -5,6 +5,8 @@ import { CustomButton } from '@/components/ui';
 import mainConfig from '@/configs/mainConfigs';
 import { subscribeToNewsletter } from '@/services/externalService';
 
+import { trackEvent } from '../GoogleAnalytics';
+
 const NewsLetter: React.FC = () => {
   const [formStatus, setFormStatus] = useState<'idle' | 'success' | 'error'>(
     'idle',
@@ -32,6 +34,11 @@ const NewsLetter: React.FC = () => {
       const response = await subscribeToNewsletter(formData);
       if (response.success) {
         setFormStatus('success');
+        trackEvent({
+          action: 'submit_form',
+          category: 'newsletter',
+          label: 'newsletter_subscription',
+        });
       } else {
         setFormStatus('error');
       }

diff --git a/src/website2/src/components/sections/footer/CountrySelectorDialog.tsx b/src/website2/src/components/sections/footer/CountrySelectorDialog.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FiChevronDown } from 'react-icons/fi';
 import { IoLocationSharp } from 'react-icons/io5';
 
+import { trackEvent } from '@/components/GoogleAnalytics';
 import {
   CustomButton,
   Dialog,
@@ -224,7 +225,16 @@ const CountrySelectorDialog: React.FC = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <button className="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-xl text-gray-800 hover:bg-gray-200 transition-all">
+        <button
+          onClick={() => {
+            trackEvent({
+              action: 'button_click',
+              category: 'navigation',
+              label: 'country_selector',
+            });
+          }}
+          className="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-xl text-gray-800 hover:bg-gray-200 transition-all"
+        >
           <IoLocationSharp size={20} color="#2563eb" />
           <span>
             {selectedCountryData?.long_name.replace('_', ' ') ||

diff --git a/src/website2/src/views/home/HomePlayerSection.tsx b/src/website2/src/views/home/HomePlayerSection.tsx
@@ -192,6 +192,11 @@ const HomePlayerSection: React.FC = () => {
   const modalPlayerRef = useRef<any>(null);
 
   const handlePlayButtonClick = useCallback(() => {
+    trackEvent({
+      action: 'video_play',
+      category: 'video',
+      label: 'home_page_video',
+    });
     setVideoState((prev) => ({ ...prev, isModalOpen: true }));
   }, []);