Merge pull request #1365 from fedspendingtransparency/FDG-hover-fix

FDG 9526 GA4 Hover Fix

Author: jdach

src/components/home-main-content/home-main-content.jsx

@@ -4,10 +4,19 @@ import HomeHighlightCards from '../home-highlight-cards/home-highlight-cards';
 import { mainContent, sectionHeader, highlightCardsHeader } from './home-main-content.module.scss';
 import { faChartColumn } from '@fortawesome/free-solid-svg-icons';
 import CustomLink from '../links/custom-link/custom-link';
+import Analytics from '../../utils/analytics/analytics';
+import { ga4DataLayerPush } from '../../helpers/google-analytics/google-analytics-helper';
 
 const HomeMainContent = () => {
+  const analyticsHandler = label => {
+    Analytics.event({
+      category: 'Homepage Navigation',
+      action: 'Citation Click',
+      label: label,
+    });
+  };
   const datasetSearchPage = (
-    <CustomLink url="/datasets/" id="Dataset Search">
+    <CustomLink url="/datasets/" id="Dataset Search" onClick={() => analyticsHandler('Dataset Search')}>
       Dataset Search page
     </CustomLink>
   );

src/components/topics-section/homepage-tile/homepage-tile.jsx

@@ -22,6 +22,7 @@ import { Grid } from '@material-ui/core';
 import Analytics from '../../../utils/analytics/analytics';
 import { ga4DataLayerPush } from '../../../helpers/google-analytics/google-analytics-helper';
 
+let homepageTile;
 const ExplainerTile = ({ content, images, width, layout, hasMobileImage, explainerTile }) => {
   let desktopImage, mobileImage;
   if (images) {
@@ -87,10 +88,28 @@ const ExplainerTile = ({ content, images, width, layout, hasMobileImage, explain
     });
   };
 
+  const handleMouseEnter = label => {
+    homepageTile = setTimeout(() => {
+      Analytics.event({
+        category: 'Homepage Cards',
+        action: 'Card Hover',
+        label: label,
+      });
+    }, 3000);
+  };
+  const handleMouseLeave = () => {
+    clearTimeout(homepageTile);
+  };
   return (
     <>
       {content.path ? (
-        <Link to={content.path} data-testid={'tile-link'} onClick={() => analyticsHandler('Citation Click', content.analyticsName)}>
+        <Link
+          to={content.path}
+          data-testid={'tile-link'}
+          onClick={() => analyticsHandler('Citation Click', content.analyticsName)}
+          onMouseEnter={() => handleMouseEnter(content.analyticsName)}
+          onMouseLeave={handleMouseLeave}
+        >
           {card}
         </Link>
       ) : (