From 0c092da53ced28b9a15b7520d831027c562cfad6 Mon Sep 17 00:00:00 2001 From: Sofiia Danylchenko Date: Sun, 11 Aug 2024 23:03:55 +0200 Subject: [PATCH 01/10] feat: add google analytics banner without measurement ID --- app/layout.tsx | 8 ++++- components/CookieBanner.tsx | 60 ++++++++++++++++++++++++++++++++ components/GoogleAnalytics.tsx | 47 +++++++++++++++++++++++++ components/lib/cookieStorage.tsx | 15 ++++++++ components/lib/gtagHelper.tsx | 7 ++++ package.json | 2 ++ 6 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 components/CookieBanner.tsx create mode 100644 components/GoogleAnalytics.tsx create mode 100644 components/lib/cookieStorage.tsx create mode 100644 components/lib/gtagHelper.tsx diff --git a/app/layout.tsx b/app/layout.tsx index e29b219..bb4f4f1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,8 @@ import { Providers } from "./providers"; import "../styles/globals.css"; import { Header } from "@components/Header"; import Footer from "@components/Footer"; +import GoogleAnalytics from "@components/GoogleAnalytics"; +import CookieBanner from "@components/CookieBanner"; export default function RootLayout({ children, @@ -11,6 +13,8 @@ export default function RootLayout({ }) { return ( + {/* Google Analytics Component */} +
@@ -18,8 +22,10 @@ export default function RootLayout({
{children}
+ {/* Cookie Banner Component */} + ); -} +} \ No newline at end of file diff --git a/components/CookieBanner.tsx b/components/CookieBanner.tsx new file mode 100644 index 0000000..d073150 --- /dev/null +++ b/components/CookieBanner.tsx @@ -0,0 +1,60 @@ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ +/* eslint-disable @typescript-eslint/no-unsafe-argument */ +"use client"; + +import Link from "next/link"; +import { getLocalStorage, setLocalStorage } from "./lib/cookieStorage"; +import { useState, useEffect } from "react"; + +export default function CookieBanner() { + const [cookieConsent, setCookieConsent] = useState(false); + + useEffect(() => { + const storedCookieConsent = getLocalStorage("cookie_consent", null); + + setCookieConsent(storedCookieConsent); + }, [setCookieConsent]); + + useEffect(() => { + const newValue = cookieConsent ? "granted" : "denied"; + + window.gtag("consent", "update", { + analytics_storage: newValue, + }); + + setLocalStorage("cookie_consent", cookieConsent); + }, [cookieConsent]); + return ( +
+
+ +

+ We use cookies on + our site. +

+ +
+ +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/components/GoogleAnalytics.tsx b/components/GoogleAnalytics.tsx new file mode 100644 index 0000000..961360f --- /dev/null +++ b/components/GoogleAnalytics.tsx @@ -0,0 +1,47 @@ +"use client"; +import Script from "next/script"; +import { usePathname, useSearchParams } from "next/navigation"; +import { useEffect } from "react"; +import { pageview } from "./lib/gtagHelper"; + +export default function GoogleAnalytics({ + GA_MEASUREMENT_ID, +}: { + GA_MEASUREMENT_ID: string; +}) { + const pathname = usePathname(); + const searchParams = useSearchParams(); + + useEffect(() => { + const url = pathname + searchParams.toString(); + + pageview(GA_MEASUREMENT_ID, url); + }, [pathname, searchParams, GA_MEASUREMENT_ID]); + return ( + <> +