diff --git a/ui/index.html b/ui/index.html index 1f9241f1..39f30bd8 100644 --- a/ui/index.html +++ b/ui/index.html @@ -43,12 +43,12 @@ /> - + > --> - --> diff --git a/ui/package.json b/ui/package.json index 719a4eda..f62210d0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -32,8 +32,10 @@ "lucide-react": "^0.262.0", "marked": "^7.0.1", "react": "^18.2.0", + "react-cookie-consent": "^8.0.1", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.10", + "react-ga4": "^2.1.0", "react-head": "^3.4.2", "react-markdown": "6", "react-router-dom": "^6.11.1", diff --git a/ui/src/App.tsx b/ui/src/App.tsx index e9adb58a..e9f81ddf 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -5,6 +5,7 @@ import { ErrorBoundary } from "react-error-boundary"; import RoutesWithPageTitle from "pages/Routes"; import Sidebar from "components/Layouts/Sidebar"; import FloatingHeader from "components/Layouts/FloatingHeader"; +import CookieConsent from "pages/Footer/CookieConsent"; const { Content } = Layout; @@ -26,6 +27,7 @@ const App: React.FC = () => { + ); }; diff --git a/ui/src/pages/Footer/CookieConsent/index.tsx b/ui/src/pages/Footer/CookieConsent/index.tsx new file mode 100644 index 00000000..42e7f079 --- /dev/null +++ b/ui/src/pages/Footer/CookieConsent/index.tsx @@ -0,0 +1,72 @@ +import React, { useEffect } from "react"; +import CookiConsent, { + Cookies, + getCookieConsentValue, +} from "react-cookie-consent"; +import { Link } from "react-router-dom"; +import ReactGA from "react-ga4"; + +const CookieConsent: React.FC = () => { + const handleAcceptCookie = () => { + const GOOGLE_ANALYTICS_ID = "G-9K8N22TZZS"; + if (GOOGLE_ANALYTICS_ID) { + ReactGA.initialize(GOOGLE_ANALYTICS_ID); + ReactGA.send({ + hitType: "pageview", + page: window.location.pathname, + title: "Custom Title", + }); + } + }; + + const handleDeclineCookie = () => { + Cookies.remove("_ga"); + Cookies.remove("_gat"); + Cookies.remove("_gid"); + }; + + useEffect(() => { + const isConsent = getCookieConsentValue(); + if (isConsent === "true") { + handleAcceptCookie(); + } + }, []); + return ( + +
+ This website uses cookies to enhance the user experience. if you + are interested to know about our cookie policy then{" "} + + check out + {" "} + here +
+
+ ); +}; + +export default CookieConsent; diff --git a/ui/yarn.lock b/ui/yarn.lock index caf95936..7a5a877e 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -3128,8 +3128,10 @@ __metadata: lucide-react: ^0.262.0 marked: ^7.0.1 react: ^18.2.0 + react-cookie-consent: ^8.0.1 react-dom: ^18.2.0 react-error-boundary: ^4.0.10 + react-ga4: ^2.1.0 react-head: ^3.4.2 react-markdown: 6 react-router-dom: ^6.11.1 @@ -5622,6 +5624,13 @@ __metadata: languageName: node linkType: hard +"js-cookie@npm:^2.2.1": + version: 2.2.1 + resolution: "js-cookie@npm:2.2.1" + checksum: 9b1fb980a1c5e624fd4b28ea4867bb30c71e04c4484bb3a42766344c533faa684de9498e443425479ec68609e96e27b60614bfe354877c449c631529b6d932f2 + languageName: node + linkType: hard + "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0": version: 4.0.0 resolution: "js-tokens@npm:4.0.0" @@ -8207,6 +8216,17 @@ __metadata: languageName: node linkType: hard +"react-cookie-consent@npm:^8.0.1": + version: 8.0.1 + resolution: "react-cookie-consent@npm:8.0.1" + dependencies: + js-cookie: ^2.2.1 + peerDependencies: + react: ">=16" + checksum: c99f3e40e3091c439956498158b5b8906cce170763836d6fade98a06ce667eca25aaf3bc407e10a6fb72fc44e5178a2ebf14cbbe4e1b5684a74b7d7f484bd359 + languageName: node + linkType: hard + "react-dom@npm:^18.2.0": version: 18.2.0 resolution: "react-dom@npm:18.2.0" @@ -8230,6 +8250,13 @@ __metadata: languageName: node linkType: hard +"react-ga4@npm:^2.1.0": + version: 2.1.0 + resolution: "react-ga4@npm:2.1.0" + checksum: f7fb41141418d4ad14756f1126a1e9958db37d4d84ae6cd798043dc03a390b6dba74d69311af0349f0b9580a43bda8930138194ccc29c4100efe446e2d6eb057 + languageName: node + linkType: hard + "react-head@npm:^3.4.2": version: 3.4.2 resolution: "react-head@npm:3.4.2"