cookie consent and ga tracking

Author: matas-bitbybit-dev

docs/docusaurus.config.ts

@@ -63,7 +63,6 @@ const config: Config = {
             } as Preset.Options,
         ],
     ],
-
     themeConfig: {
         // Replace with your project's social card
         image: "img/docusaurus-social-card.jpg",
@@ -111,7 +110,7 @@ const config: Config = {
                         {
                             label: "Learn",
                             to: "/learn/intro",
-                        }, 
+                        },
                         {
                             label: "Code",
                             to: "/learn/code/intro",

docs/package-lock.json

@@ -21,7 +21,8 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-cookie-consent": "9.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",

docs/package.json

@@ -1,5 +1,4 @@
 import type {SidebarsConfig} from "@docusaurus/plugin-content-docs";
-
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 /**

docs/sidebars.ts

@@ -51,7 +51,7 @@ const BitByBitRenderCanvas: React.FC<Props> = React.memo(({
     script: scriptProp,
     title = "Interactive Script",
     description,
-    iframeUrl: baseUrl = "http://localhost:4202",
+    iframeUrl: baseUrl = "http://s.bitbybit.dev",
     requireManualStart = false,
     backgroundImageUrl = "https://bitbybit.dev/assets/landscape.jpeg",
     height = "600px",

docs/src/components/BitByBitRenderCanvas/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState, type ReactNode } from "react";
+import Layout from "@theme-original/Layout";
+import type LayoutType from "@theme/Layout";
+import type { WrapperProps } from "@docusaurus/types";
+import CookieConsent, { Cookies } from "react-cookie-consent";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+
+type Props = WrapperProps<typeof LayoutType>;
+const GA_MEASUREMENT_ID = "G-VQHYSMBCKM";
+export default function LayoutWrapper(props: Props): ReactNode {
+
+    const [trackingInitialized, setTrackingInitialized] = useState(false);
+
+    const initializeGATracking = () => {
+        if (ExecutionEnvironment.canUseDOM && !window.gtag) {
+            const script = document.createElement("script");
+            script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`;
+            script.async = true;
+            document.head.appendChild(script);
+
+            script.onload = () => {
+                const w = window as any;
+                w.dataLayer = w.dataLayer || [];
+                function gtag() {
+                    (w.dataLayer as any).push(arguments);
+                }
+                w.gtag = gtag;
+                (gtag as any)("js", new Date());
+                (gtag as any)("config", GA_MEASUREMENT_ID);
+            };
+        }
+    };
+
+    const cookieConsent = Cookies.get("bitbybit-docs-cookie-consent");
+
+    if (cookieConsent === "true" && trackingInitialized === false) {
+        initializeGATracking();
+        setTrackingInitialized(true);
+    }
+
+    return (
+        <>
+            <Layout {...props} />
+            <CookieConsent
+                location="bottom"
+                buttonText="ACCEPT COOKIES ❤️"
+                declineButtonText="DECLINE"
+                cookieName="bitbybit-docs-cookie-consent"
+                style={{ background: "#2B373B" }}
+                enableDeclineButton
+                overlay
+                flipButtons
+                buttonStyle={{ backgroundColor: "#f0cebb", color: "#1a1c1f", fontWeight: "bold", fontSize: "13px", borderRadius: "5px", padding: "10px 20px" }}
+                declineButtonStyle={{ backgroundColor: "#1a1c1f", color: "#f0cebb", fontWeight: "bold", fontSize: "13px", borderRadius: "5px", padding: "10px 20px" }}
+
+                onAccept={(acceptedByScrolling) => {
+                    if (acceptedByScrolling) {
+                        // triggered if user scrolls past threshold
+                    } else {
+                        initializeGATracking();
+                    }
+                }}
+            >
+                <h2>Help us improve Bitbybit</h2>
+                <p>
+                    To help us improve Bitbybit and its documentation, we’d like to use Google Analytics, which requires setting cookies. Do you consent to this?
+                </p>
+            </CookieConsent>
+        </>
+    );
+}