Merge pull request #171 from UnsignedArduino/staging

External script optimization and more analytics

.env.sample

@@ -1,8 +1,8 @@
 // Enable analytics during development - for debugging purposes
-// Analytics are always enabled in non-dev environments
+// Analytics are always enabled in non-dev environments if a measurement ID is provided
 NEXT_PUBLIC_ENABLE_ANALYTICS=false
 // Enables ads during development - for debugging purposes
-// Ads are always enabled in non-dev environments
+// Ads are always enabled in non-dev environments if a publisher ID is provided
 NEXT_PUBLIC_ENABLE_ADS=false
 
 // Google Analytics measurement ID - not required

src/components/Adsense/adsense.tsx

@@ -3,7 +3,16 @@ import React from "react";
 import { getEnvironment } from "@/scripts/Utils/Environment";
 
 export function Adsense(): React.ReactNode {
+  const [useGA, setUseGA] = React.useState<boolean>(false);
+
   React.useEffect(() => {
+    if (
+      process.env.NEXT_PUBLIC_ADSENSE_PUBLISHER_ID === "pub-XXXXXXXXXXXXXXXX" ||
+      !process.env.NEXT_PUBLIC_ADSENSE_PUBLISHER_ID
+    ) {
+      // console.info("No publisher ID provided, disabling Google Adsense");
+      return;
+    }
     if (getEnvironment() === "development") {
       if (process.env.NEXT_PUBLIC_ENABLE_ADS) {
         console.info("Enabling Google Adsense during development");
@@ -12,13 +21,11 @@ export function Adsense(): React.ReactNode {
         return;
       }
     }
+
+    setUseGA(true);
   }, []);
 
-  return getEnvironment() === "development" ? (
-    <></>
-  ) : (
-    <GoogleAdSense publisherId="pub-XXXXXXXXXXXXXXXX" />
-  );
+  return useGA ? <></> : <GoogleAdSense publisherId="pub-XXXXXXXXXXXXXXXX" />;
 }
 
 export default Adsense;

src/components/Analytics/analytics.tsx

@@ -67,6 +67,13 @@ export function Analytics(): React.ReactNode {
       analytics_storage: getAnalyticsStorageConsent(),
     });
 
+    if (
+      process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID === "G-XXXXXXXXXX" ||
+      !process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
+    ) {
+      console.info("No measurement ID provided, disabling Google Analytics");
+      return;
+    }
     if (getEnvironment() === "development") {
       if (process.env.NEXT_PUBLIC_ENABLE_ANALYTICS) {
         console.info("Enabling Google Analytics during development");

src/components/Analytics/specific.ts

@@ -1,3 +1,5 @@
+import { ListLayout } from "@/components/AwesomeArcadeList/listLayout";
+
 export namespace AnalyticEvents {
   export function sendAwesomeClick(type: "extension" | "tool", repo: string) {
     window.gtag("event", "click_awesome", {
@@ -31,4 +33,17 @@ export namespace AnalyticEvents {
       variationId,
     });
   }
+
+  export function setUserPreferredTheme(
+    theme: "light" | "dark" | "auto light" | "auto dark",
+  ) {
+    // https://ithoughthecamewithyou.com/post/user-scoped-custom-dimensions-in-google-analytics-4-using-gtag
+    console.log(`Setting user preferred theme to ${theme}`);
+    window.gtag("set", "user_properties", { theme: theme });
+  }
+
+  export function setUserPreferredLayout(layout: ListLayout) {
+    console.log(`Setting user preferred layout to ${layout}`);
+    window.gtag("set", "user_properties", { layout: layout });
+  }
 }

src/components/AwesomeArcadeList/listLayout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { AnalyticEvents } from "@/components/Analytics/specific";
 
 const ListLayouts = ["masonry", "grid", "github"] as const;
 export type ListLayout = (typeof ListLayouts)[number];
@@ -28,12 +29,10 @@ export default function NavbarDropdownListLayoutPicker({
   const [layout, setLayout] = React.useState<ListLayout>("masonry");
 
   React.useEffect(() => {
-    const l = window.localStorage.getItem("listLayout");
-    if (l) {
-      setLayout(l as ListLayout);
-    } else {
-      setLayout("masonry");
-    }
+    const l = (window.localStorage.getItem("listLayout") ??
+      "masonry") as ListLayout;
+    setLayout(l);
+    AnalyticEvents.setUserPreferredLayout(l);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/components/Navbar/ThemePicker/themePicker.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { AnalyticEvents } from "@/components/Analytics/specific";
 
 export type Theme = "Light" | "Dark";
 export type ThemeOptions = Theme | "Auto";
@@ -175,6 +176,16 @@ export function ThemeProxy({
         }),
       );
       window.localStorage.setItem("theme", dropdownTheme);
+
+      if (dropdownTheme === "Auto") {
+        AnalyticEvents.setUserPreferredTheme(
+          osWantsDark.matches ? "auto dark" : "auto light",
+        );
+      } else {
+        AnalyticEvents.setUserPreferredTheme(
+          dropdownTheme.toLowerCase() as "light" | "dark",
+        );
+      }
     }
   }, [dropdownTheme, loadedPreferredTheme]);