Merge pull request #4243 from seanquinn917/search-bar-2024-handle-key…

…-press Search bar 2024 handle key press
wevote · Feb 5, 2025 · 51396a0 · 51396a0
2 parents 4c92d25 + 9dc0010
commit 51396a0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/src/js/common/components/Challenge/ChallengesHomeFilter.jsx b/src/js/common/components/Challenge/ChallengesHomeFilter.jsx
@@ -18,6 +18,8 @@ function ChallengesHomeFilter (props) {
           searchFunction={props.searchFunction}
           clearFunction={props.clearSearchFunction}
           searchUpdateDelayTime={500}
+          trackSearch={true}
+          parentComponentName="ChallengesHomeFilter"
         />
       </SearchBarWrapper>
     </ChallengesHomeFilterWrapper>

diff --git a/src/js/common/components/Search/SearchBar2024.jsx b/src/js/common/components/Search/SearchBar2024.jsx
@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { blurTextFieldAndroid, focusTextFieldAndroid } from '../../utils/cordovaUtils';
 import { renderLog } from '../../utils/logging';
 import SearchBase from './SearchBase';
+import VoterStore from '../../../stores/VoterStore';
+import TagManager from 'react-gtm-module';
 
 /* eslint-disable jsx-a11y/control-has-associated-label  */
 class SearchBar2024 extends Component {
@@ -56,12 +58,30 @@ class SearchBar2024 extends Component {
     }
   }
 
-  handleKeyPress () {
-    if (this.timer) clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      this.props.searchFunction(this.state.searchString);
-    }, this.props.searchUpdateDelayTime);
+
+ handleKeyPress = () => {
+  if (this.timer) {
+    clearTimeout(this.timer);
   }
+  this.timer = setTimeout(() => {
+    const { searchString } = this.state;
+    if (searchString.length === 0) {
+      return;
+    }
+    this.props.searchFunction(searchString);
+    if(this.props.trackSearch){
+    const dataLayerObject = {
+      event: 'KeyWord Search',
+      search_keyword: searchString,
+      voterWeVoteId: VoterStore.getVoterWeVoteId(),
+    };
+    console.log(dataLayerObject)
+    TagManager.dataLayer({dataLayer: dataLayerObject});
+  }
+  }, 3000);
+  const { searchString } = this.state;
+  this.props.searchFunction(searchString);
+};
 
   clearQuery () {
     this.props.clearFunction();