From 2da397a958072b6a4bfabda9701948085ecca86e Mon Sep 17 00:00:00 2001 From: David Fridley Date: Tue, 31 Oct 2023 11:46:47 -0700 Subject: [PATCH 1/3] gtags added to companies page --- .../controllers/CorporateHackathonController.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/common/components/controllers/CorporateHackathonController.jsx b/common/components/controllers/CorporateHackathonController.jsx index d9efec9ce..6b7f7c4af 100644 --- a/common/components/controllers/CorporateHackathonController.jsx +++ b/common/components/controllers/CorporateHackathonController.jsx @@ -43,6 +43,13 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { ? tabOptions[tabArg] : tabOptions.hackathon, }; + // if GOOGLE_PROPERTY_ID is not set in the environment, then google's gtag snippet will not get loaded and + // window.gtag won't be defined. We should make a global fix to this issue, but for now we are tring to limit changes + // to this one file as we research the differences and tradeoffs between gtags and google tag managers + // + // it is called like this (gtag('event',tab_option),true) within events because event handlers need to return true + // for the event propogation to continue. + if(!window.gtag) window.gtag=()=>{} } render(): $React$Node { @@ -112,7 +119,8 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { return (
- + (gtag('event',tab_option),true)}> { variant="primary" href="#contact-hackathon" className="corporate-block-button" + onClick={e=>(gtag('event','contact-hackathon'),true)} > Get Started @@ -333,6 +342,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { variant="primary" href="#contact-sponsor" className="corporate-block-button" + onClick={e=>(gtag('event','contact-sponsor'),true)} > Get Started @@ -443,6 +453,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { href={cdn.document( "2023+DemocracyLab+Corporate+Hackathon+Prospectus.pdf" )} + onClick={e=>(gtag('event','HackathonProspectus'),true)} > Corporate Tech-for-Good Hackathons PDF{" "} @@ -455,6 +466,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { href={cdn.document( "2023+DemocracyLab+Sponsorship+Prospectus.pdf" )} + onClick={e=>(gtag('event','SponsorProspectus'),true)} > Sponsor Prospectus PDF{" "} From e32f7693a9a7741511e6d182b45d272c63239edf Mon Sep 17 00:00:00 2001 From: David Fridley Date: Tue, 7 Nov 2023 10:14:48 -0800 Subject: [PATCH 2/3] can not dummy gtag --- .../controllers/CorporateHackathonController.jsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/common/components/controllers/CorporateHackathonController.jsx b/common/components/controllers/CorporateHackathonController.jsx index 6b7f7c4af..93a442369 100644 --- a/common/components/controllers/CorporateHackathonController.jsx +++ b/common/components/controllers/CorporateHackathonController.jsx @@ -43,13 +43,6 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { ? tabOptions[tabArg] : tabOptions.hackathon, }; - // if GOOGLE_PROPERTY_ID is not set in the environment, then google's gtag snippet will not get loaded and - // window.gtag won't be defined. We should make a global fix to this issue, but for now we are tring to limit changes - // to this one file as we research the differences and tradeoffs between gtags and google tag managers - // - // it is called like this (gtag('event',tab_option),true) within events because event handlers need to return true - // for the event propogation to continue. - if(!window.gtag) window.gtag=()=>{} } render(): $React$Node { From 49c68f9525a1baec9f13d8cf27ad9b17d8e4fab8 Mon Sep 17 00:00:00 2001 From: David Fridley Date: Tue, 7 Nov 2023 11:03:06 -0800 Subject: [PATCH 3/3] safeGtag --- .../controllers/CorporateHackathonController.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/common/components/controllers/CorporateHackathonController.jsx b/common/components/controllers/CorporateHackathonController.jsx index 93a442369..1134f4e29 100644 --- a/common/components/controllers/CorporateHackathonController.jsx +++ b/common/components/controllers/CorporateHackathonController.jsx @@ -33,6 +33,11 @@ const tabOptions: Dictionary = { sponsorship: "tab-sponsorship", }; +// for now we are trying to test this with a one file change. In the future we should handle this when and where the GOOGLE PROPERTY ID is set +// safeGtag needs to return true because event handlers need to return true for the event to keep propogating +// +const safeGtag=(...args)=>(window.gtag && gtag(...args),true) + class CorporateHackathonController extends React.PureComponent<{||}, State> { constructor(props) { super(props); @@ -113,7 +118,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> {
(gtag('event',tab_option),true)}> + onSelect={tab_option=>safeGtag('event',tab_option)}> { variant="primary" href="#contact-hackathon" className="corporate-block-button" - onClick={e=>(gtag('event','contact-hackathon'),true)} + onClick={e=>safeGtag('event','contact-hackathon')} > Get Started @@ -335,7 +340,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { variant="primary" href="#contact-sponsor" className="corporate-block-button" - onClick={e=>(gtag('event','contact-sponsor'),true)} + onClick={e=>safeGtag('event','contact-sponsor')} > Get Started @@ -446,7 +451,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { href={cdn.document( "2023+DemocracyLab+Corporate+Hackathon+Prospectus.pdf" )} - onClick={e=>(gtag('event','HackathonProspectus'),true)} + onClick={e=>safeGtag('event','HackathonProspectus')} > Corporate Tech-for-Good Hackathons PDF{" "} @@ -459,7 +464,7 @@ class CorporateHackathonController extends React.PureComponent<{||}, State> { href={cdn.document( "2023+DemocracyLab+Sponsorship+Prospectus.pdf" )} - onClick={e=>(gtag('event','SponsorProspectus'),true)} + onClick={e=>safeGtag('event','SponsorProspectus')} > Sponsor Prospectus PDF{" "}