Skip to content

Commit

Permalink
feat: google analytics£
Browse files Browse the repository at this point in the history
  • Loading branch information
veeso committed Jan 31, 2025
1 parent fbfec34 commit 7c905a0
Show file tree
Hide file tree
Showing 12 changed files with 420 additions and 70 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

Powered by **Internet Computer**

GA TAG G-3SYTZ509HY

---

- [Marketplace D-App](#marketplace-d-app)
Expand Down
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@
"dependencies": {
"@ensdomains/ensjs": "^4.0.2",
"@metamask/jazzicon": "^2.0.0",
"animate.css": "^4.1.1",
"byte-size": "^9.0.1",
"chart.js": "^4.4.2",
"js-cookie": "^3.0.5",
"leaflet": "^1.9.4",
"metamask-react": "^2.7.0",
"property-information": "^6.5.0",
Expand All @@ -40,7 +42,7 @@
"react-dom": "^19",
"react-helmet": "^6.1.0",
"react-icons": "^5.4.0",
"react-leaflet": "v5.0.0-rc.1",
"react-leaflet": "v5.0.0",
"react-loading-skeleton": "^3.5.0",
"react-markdown": "^9.0.1",
"react-router-dom": "^6.26.1",
Expand All @@ -51,6 +53,8 @@
"@parcel/reporter-bundle-analyzer": "^2.13.0",
"@parcel/transformer-typescript-tsc": "^2.13.0",
"@types/byte-size": "^8.1.2",
"@types/gtag.js": "^0.0.20",
"@types/js-cookie": "^3.0.6",
"@types/leaflet": "^1.9.15",
"@types/node": "^22.10.2",
"@types/react": "^19",
Expand Down
62 changes: 39 additions & 23 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,26 +1,42 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="ekokedao.com" />
<meta property="og:site_name" content="EKOKEToken Marketplace DAO" />
<link
rel="icon"
type="image/png"
sizes="96x96"
href="./assets/images/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./assets/images/favicon-16x16.png"
/>
<link href="./styles.css" rel="stylesheet" />
<title>EKOKE DAO</title>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-3SYTZ509HY"
></script>
</head>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="ekokedao.com" />
<meta property="og:site_name" content="EKOKEToken Marketplace DAO" />
<link rel="icon" type="image/png" sizes="96x96" href="./assets/images/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png" />
<link href="./styles.css" rel="stylesheet" />
<title>EKOKE DAO</title>
<script async src="https://analytics.veeso.dev/script.js"
data-website-id="48ada2dc-040e-407f-9e36-431b3031e1dd"></script>
</head>

<body>
<div id="app"></div>
<script type="module" src="index.tsx"></script>
</body>

</html>
<body>
<div id="app"></div>
<script type="module" src="index.tsx"></script>
</body>
</html>
1 change: 1 addition & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import 'animate.css';

import App from './App';

Expand Down
2 changes: 2 additions & 0 deletions src/js/components/App/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Route as RouterRoute, Routes } from 'react-router-dom';
import { Route } from '../../utils/routes';
import SeoEngine from '../SeoEngine';
import Container from '../reusable/Container';
import CookieBar from '../CookieBar';

// pages
const Home = React.lazy(() => import('./pages/Home'));
Expand Down Expand Up @@ -181,6 +182,7 @@ const AppRouter = () => (
<RouterRoute path="*" element={<NotFound />} />
</Routes>
</React.Suspense>
<CookieBar />
</Container.Container>
</>
);
Expand Down
184 changes: 147 additions & 37 deletions src/js/components/App/pages/Cookies.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,153 @@ import Container from '../../reusable/Container';
import Heading from '../../reusable/Heading';
import Paragraph from '../../reusable/Paragraph';
import Link from '../../reusable/Link';
import {
CookiePreferences,
getCookiePreferences,
setAnalyticsCookiesPreference,
} from '../../../utils/cookies';
import { acceptGa4, rejectGa4 } from '../../../utils/analytics';
import Switch from '../../reusable/Switch';

const Cookies = () => (
<Container.Container>
<Heading.H1>Coookie Policy</Heading.H1>
<Paragraph.Leading>
On <strong>ekokedao.com</strong>, we do not use any cookies to track user
behavior
</Paragraph.Leading>
<Heading.H2>What are cookies?</Heading.H2>
<Paragraph.Default>
Cookies are small text files that are placed on your computer by websites
that you visit. They are widely used in order to make websites work, or
work more efficiently, as well as to provide information to the owners of
the site.
</Paragraph.Default>
<Heading.H2>How can I control cookies?</Heading.H2>
<Paragraph.Default>
You have the right to decide whether to accept or reject cookies. You can
exercise your cookie preferences by clicking on the appropriate opt-out
links provided in the cookie table above.
</Paragraph.Default>
<Heading.H2>How can I opt out of Cookies?</Heading.H2>
<Paragraph.Default>
If you do not wish to have cookies placed on your device, we suggest
setting your cookie preferences in your browser. If you want to remove
previously stored cookies, you can manually delete them at any time.
However, this will not prevent additional cookies from being stored on
your device in the future when you visit this website.
</Paragraph.Default>
<Paragraph.Default>
For more information on how to manage cookies, please visit{' '}
<Link.Paragraph href="https://www.allaboutcookies.org/manage-cookies/">
www.allaboutcookies.org/manage-cookies/
</Link.Paragraph>
</Paragraph.Default>
<span className="text-text">Last updated: 2025-12-13</span>
</Container.Container>
);
const Cookies = () => {
const [cookies, setCookies] = React.useState<CookiePreferences>(
getCookiePreferences(),
);

const onToggleAnalytics = () => {
const analytics = !cookies.analytics;
setAnalyticsCookiesPreference(analytics);
setCookies({ ...cookies, analytics });

if (analytics) {
acceptGa4();
} else {
rejectGa4();
}
};

return (
<Container.Container>
<Heading.H1>Coookie Policy</Heading.H1>
<Paragraph.Leading>
On <strong>ekokedao.com</strong>, we use Google Analytics cookies to
analyze our website traffic. These cookies help us to improve the
website&apos;s performance and user experience. Google Analytics is a
popular web analytics service that helps us understand how visitors
engage with our website. Google Analytics cookies may track things such
as how long you spend on the website and the pages that you visit so we
can continue to produce engaging content.
</Paragraph.Leading>
<Heading.H2>Google Analytics</Heading.H2>
<Paragraph.Default>
This website uses Google Analytics 4 (GA4) to analyze user interactions
and improve the overall experience. GA4 collects data through cookies,
which help us understand visitor behavior, traffic sources, and website
performance. The information gathered is anonymous and does not allow
for direct identification of users. By using this website, you consent
to the processing of data by Google in the manner and for the purposes
described in{' '}
<Link.Paragraph href="https://policies.google.com/privacy?hl=en-US">
Google&apos;s Privacy Policy
</Link.Paragraph>
. You can disable Google Analytics cookies at any time by adjusting your
browser settings or using the{' '}
<Link.Paragraph href="https://tools.google.com/dlpage/gaoptout">
Google Analytics Opt-out Add-on
</Link.Paragraph>
.
</Paragraph.Default>
<Heading.H2>The Cookies we use</Heading.H2>
<table className="border border-collapse border-gray-300 bg-white sm:!text-xs">
<thead>
<tr>
<th className="border border-gray-300 px-4 py-2">Cookie</th>
<th className="border border-gray-300 px-4 py-2">Description</th>
<th className="border border-gray-300 px-4 py-2">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border border-gray-300 px-4 py-2">_ga</td>
<td className="border border-gray-300 px-4 py-2">
Used to distinguish users by assigning a unique ID.
</td>
<td className="border border-gray-300 px-4 py-2">2 years</td>
</tr>
<tr>
<td className="border border-gray-300 px-4 py-2">
_ga_G-3SYTZ509HY
</td>
<td className="border border-gray-300 px-4 py-2">
Stores session state for GA4.
</td>
<td className="border border-gray-300 px-4 py-2">2 years</td>
</tr>
<tr>
<td className="border border-gray-300 px-4 py-2">_gid</td>
<td className="border border-gray-300 px-4 py-2">
Used to distinguish users.
</td>
<td className="border border-gray-300 px-4 py-2">24 hours</td>
</tr>
<tr>
<td className="border border-gray-300 px-4 py-2">_gat</td>
<td className="border border-gray-300 px-4 py-2">
Used to throttle request rate.
</td>
<td className="border border-gray-300 px-4 py-2">1 minute</td>
</tr>
<tr>
<td className="border border-gray-300 px-4 py-2">
_gac_G-3SYTZ509HY
</td>
<td className="border border-gray-300 px-4 py-2">
Contains campaign-related information for the user.
</td>
<td className="border border-gray-300 px-4 py-2">90 days</td>
</tr>
</tbody>
</table>
<Heading.H2>Change your cookie preferences</Heading.H2>
<Container.FlexCols className="mt-4">
<Container.FlexRow className="items-center">
<Switch
label="Analytics"
checked={cookies.analytics}
onChange={onToggleAnalytics}
/>
</Container.FlexRow>
</Container.FlexCols>
<Heading.H2>What are cookies?</Heading.H2>
<Paragraph.Default>
Cookies are small text files that are placed on your computer by
websites that you visit. They are widely used in order to make websites
work, or work more efficiently, as well as to provide information to the
owners of the site.
</Paragraph.Default>
<Heading.H2>How can I control cookies?</Heading.H2>
<Paragraph.Default>
You have the right to decide whether to accept or reject cookies. You
can exercise your cookie preferences by clicking on the appropriate
opt-out links provided in the cookie table above.
</Paragraph.Default>
<Heading.H2>How can I opt out of Cookies?</Heading.H2>
<Paragraph.Default>
If you do not wish to have cookies placed on your device, we suggest
setting your cookie preferences in your browser. If you want to remove
previously stored cookies, you can manually delete them at any time.
However, this will not prevent additional cookies from being stored on
your device in the future when you visit this website.
</Paragraph.Default>
<Paragraph.Default>
For more information on how to manage cookies, please visit{' '}
<Link.Paragraph href="https://www.allaboutcookies.org/manage-cookies/">
www.allaboutcookies.org/manage-cookies/
</Link.Paragraph>
</Paragraph.Default>
<span className="text-text">Last updated: 2025-01-31</span>
</Container.Container>
);
};

export default Cookies;
77 changes: 77 additions & 0 deletions src/js/components/CookieBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import * as React from 'react';

import { hasCookiePreferences, acceptAllCookies } from '../utils/cookies';
import { Route } from '../utils/routes';
import Container from './reusable/Container';
import Heading from './reusable/Heading';
import Paragraph from './reusable/Paragraph';
import Link from './reusable/Link';
import Button from './reusable/Button';
import { acceptGa4, initGa4 } from '../utils/analytics';

const CookieBar = () => {
const [hasCookieBar, setHasCookieBar] = React.useState(false);

const onAcceptAll = () => {
acceptAllCookies();
onCookieBarClose();
acceptGa4();
};

const onCookieBarClose = () => {
setHasCookieBar(false);
};

const onGoToPolicy = () => {
window.location.pathname = Route.url(Route.COOKIES);
};

// init GA consent
React.useEffect(() => {
initGa4();
setTimeout(() => {
setHasCookieBar(!hasCookiePreferences());
}, 1000);
}, []);

return (
<Container.Container
className={`${
hasCookieBar ? 'animate__animated animate__slideInUp' : 'hidden'
} fixed z-50 right-0 left-0 w-full bottom-4 max-w-[640px] sm:max-w-[768px]`}
>
<Container.Container className="bg-white shadow-2xl rounded border m-8 p-10 sm:h-2/6 sm:mx-8 sm:m-2 sm:p-4">
<Container.FlexCols className="justify-between sm:h-full">
<Container.Container className="sm:w-full sm:overflow-y-auto">
<Heading.H2 className="sm:py-0">Cookie Policy</Heading.H2>
<Paragraph.Default className="sm:text-sm">
This site uses cookies to enhance users' browsing experience and
to collect information about the site's usage. We use both
technical cookies and third-party cookies to analyze user behavior
for analytics. You can find more details by consulting our{' '}
<Link.Paragraph href={Route.COOKIES}>
Cookie Policy.
</Link.Paragraph>
</Paragraph.Default>
</Container.Container>
<Container.FlexRow className="justify-start gap-4 sm:my-2">
<Button.Primary
onClick={onAcceptAll}
className="sm:text-sm sm:px-4 sm:py-2"
>
Accept All
</Button.Primary>
<Button.Alternative
onClick={onGoToPolicy}
className="sm:text-sm sm:px-4 sm:py-2"
>
Customize
</Button.Alternative>
</Container.FlexRow>
</Container.FlexCols>
</Container.Container>
</Container.Container>
);
};

export default CookieBar;
Loading

0 comments on commit 7c905a0

Please sign in to comment.