Metrics and Privacy

.netlify/config/_headers

@@ -2,5 +2,5 @@
     X-XSS-Protection: 1; mode=block
     X-Frame-Options: SAMEORIGIN
     X-Content-Type-Options: nosniff
-    Content-Security-Policy: default-src https: 'unsafe-inline'
+    Referrer-Policy: no-referrer-when-downgrade
     Feature-Policy: accelerometer 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; payment 'none'; usb 'none'

index.html

@@ -51,6 +51,7 @@
     property="og:locale:alternate"
     content="ru_RU"
 />
+
 <link
     rel="stylesheet"
     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

package.json

@@ -46,6 +46,7 @@
         "react-country-flag": "^3.1.0",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.0.13",
+        "react-ga4": "^2.1.0",
         "react-helmet": "^6.1.0",
         "react-i18next": "^14.1.1",
         "react-icons": "^5.3.0",

scripts/json-linter

@@ -5,7 +5,7 @@ if [[ -z $(command -v python) ]]; then
 fi
 
 if [[ -z $(command -v pipx) ]]; then
-  python -m pip install pipx
+  python -m install pipx -U > /dev/null
 fi
 
 if [[ -z $(command -v json-linter) ]]; then

src/@types/globals.d.ts

@@ -1,2 +1,7 @@
 declare const DB_BUILD_TIME: number;
+declare const DB_ENABLE_ADS: boolean;
 declare const DB_DEVMODE: boolean;
+declare const DB_DISPLAY_AD_PLACEHOLDERS: boolean;
+declare const DB_GA4_MEASUREMENT_ID: string | null;
+declare const DB_PW_PUBLISHER_ID: string | null;
+declare const DB_PW_WEBSITE_ID: string | null;

src/@types/playwire.d.ts

@@ -0,0 +1,19 @@
+interface PlaywireUnit {
+    type: string;
+    selectorId?: string;
+}
+
+interface Window {
+    ramp: {
+        que: unknown[];
+        passiveMode: boolean;
+        addUnits: (units: PlaywireUnit[]) => Promise<void>;
+        displayUnits: () => void;
+        destroyUnits: (what: string) => Promise<void>;
+        processPage: (path: string) => void;
+    };
+
+    _pwGA4PageviewId: string;
+    dataLayer: unknown[];
+    gtag: (...args: unknown[]) => void;
+}

src/app.tsx

@@ -22,8 +22,6 @@ import BackgroundTasks from "@src/components/BackgroundTasks";
 import Favorites from "@src/pages/favorites/Favorites";
 import useIsMobile from "@src/hooks/is-mobile";
 import log from "@src/utils/logger";
-import SomethingWentWrong from "@src/components/SomethingWentWrong";
-import { ErrorBoundary } from "react-error-boundary";
 import useIsLightMode from "@src/hooks/light-mode";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { isRtlLanguage, Language } from "@src/i18n";
@@ -33,6 +31,10 @@ import rtlPlugin from "stylis-plugin-rtl";
 import { prefixer } from "stylis";
 import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";
+import { ErrorBoundary } from "react-error-boundary";
+import SomethingWentWrong from "@src/components/SometingWentWrong";
+import Privacy from "./pages/about/Privacy";
+import TrackingRampSetup from "@src/components/TrackingRampSetup";
 
 const DauntlessBuilderApp = () => {
     const isMobile = useIsMobile();
@@ -66,6 +68,7 @@ const DauntlessBuilderApp = () => {
                 >
                     <QueryClientProvider client={queryClient}>
                         <BrowserRouter>
+                            <TrackingRampSetup />
                             <SnackbarProvider
                                 TransitionComponent={Slide}
                                 anchorOrigin={{
@@ -135,6 +138,11 @@ const DauntlessBuilderApp = () => {
                                                 path="/about"
                                             />
 
+                                            <Route
+                                                element={<Privacy />}
+                                                path="/privacy"
+                                            />
+
                                             <Route
                                                 element={<Settings />}
                                                 path="/settings"

src/components/AdSpace.tsx

@@ -0,0 +1,110 @@
+import { FeaturedVideo } from "@mui/icons-material";
+import { Box, useTheme } from "@mui/material";
+import { eventsAtom, playwireAddInitializedUnit } from "@src/state/events";
+import { adsEnabled } from "@src/utils/env-tools";
+import log from "@src/utils/logger";
+import { useAtom } from "jotai";
+import md5 from "md5";
+import React, { useEffect } from "react";
+
+export enum UnitType {
+    BottomRail = "bottom_rail",
+    Skyscraper = "sky_atf",
+    MediumRect = "med_rect_atf",
+    RightRail = "right_rail",
+}
+
+export const adSpaceSize = {
+    [UnitType.BottomRail]: { height: 50, width: 320 },
+    [UnitType.Skyscraper]: { height: 600, width: 160 },
+    [UnitType.MediumRect]: { height: 250, width: 300 },
+    [UnitType.RightRail]: { height: 600, width: 120 },
+};
+
+interface AdSpaceProps {
+    name: string;
+    unitType: UnitType;
+}
+
+const AdSpace: React.FC<AdSpaceProps> = ({ name, unitType }) => {
+    const theme = useTheme();
+
+    const [events, setEvents] = useAtom(eventsAtom);
+
+    const selectorName = `dbu_${md5(name + unitType.toString())}`;
+
+    const size = unitType in adSpaceSize ? adSpaceSize[unitType as keyof typeof adSpaceSize] : null;
+
+    useEffect(() => {
+        if (events.playwireInitializedUnits.indexOf(name) > -1) {
+            log.error(`ramp: Unit ${name} (${unitType}) has already been initialized...`);
+            return;
+        }
+
+        if (DB_DISPLAY_AD_PLACEHOLDERS) {
+            setEvents(playwireAddInitializedUnit(name));
+            log.debug(`not ramp: initialized unit ${name} (${unitType})`);
+        }
+
+        if (!adsEnabled) {
+            return;
+        }
+
+        if (!events.playwireSetupHasFinished) {
+            return;
+        }
+
+        const initUnit = async () => {
+            try {
+                await window.ramp.addUnits([
+                    {
+                        selectorId: selectorName,
+                        type: unitType,
+                    },
+                ]);
+                window.ramp.displayUnits();
+            } catch (error) {
+                log.error("ramp: could not add unit", { error });
+                window.ramp.displayUnits();
+            }
+
+            setEvents(playwireAddInitializedUnit(name));
+            log.debug(`ramp: initialized unit ${name} (${unitType})`);
+        };
+        initUnit();
+
+        return () => {
+            window.ramp.destroyUnits(selectorName).then(() => window.ramp.processPage(window.location.pathname));
+        };
+    }, [events.playwireSetupHasFinished, events.playwireInitializedUnits, selectorName, unitType, setEvents, name]);
+
+    if (DB_DISPLAY_AD_PLACEHOLDERS) {
+        return (
+            <Box
+                id={selectorName}
+                sx={{
+                    alignItems: "center",
+                    background: theme.palette.background.default,
+                    border: `5px dashed ${theme.palette.primary.main}`,
+                    color: theme.palette.primary.main,
+                    display: "flex",
+                    height: `${size?.height}px`,
+                    justifyContent: "center",
+                    m: 1,
+                    p: 1,
+                    width: `${size?.width}px`,
+                }}
+            >
+                <FeaturedVideo />
+            </Box>
+        );
+    }
+
+    if (!adsEnabled) {
+        return null;
+    }
+
+    return <div id={selectorName} />;
+};
+
+export default React.memo(AdSpace);

src/components/AdSpaceFloating.tsx

@@ -0,0 +1,65 @@
+import { Box, useTheme } from "@mui/material";
+import { Breakpoint } from "@mui/system";
+import AdSpace, { UnitType } from "@src/components/AdSpace";
+import useWindowSize from "@src/hooks/window-size";
+import { adsEnabled } from "@src/utils/env-tools";
+import React from "react";
+
+interface AdSpaceFloatingProps {
+    name: string;
+    unitType: UnitType;
+    fromBreakpoint?: Breakpoint;
+    untilBreakpoint?: Breakpoint;
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+}
+
+const AdSpaceFloating: React.FC<AdSpaceFloatingProps> = ({
+    name,
+    unitType,
+    fromBreakpoint,
+    untilBreakpoint,
+    left,
+    right,
+    top,
+    bottom,
+}) => {
+    const theme = useTheme();
+    const { width } = useWindowSize();
+
+    if (!adsEnabled && !DB_DISPLAY_AD_PLACEHOLDERS) {
+        return null;
+    }
+
+    const canRenderUsingFromRule = fromBreakpoint ? width >= theme.breakpoints.values[fromBreakpoint] : true;
+    const canRenderUsingUntilRule = untilBreakpoint ? width <= theme.breakpoints.values[untilBreakpoint] : true;
+
+    if (!canRenderUsingFromRule || !canRenderUsingUntilRule) {
+        return null;
+    }
+
+    return (
+        <Box
+            sx={{
+                bottom,
+                display: "flex",
+                justifyContent: "center",
+                left,
+                pointerEvents: "none",
+                position: "fixed",
+                right,
+                top,
+                zIndex: 99999,
+            }}
+        >
+            <AdSpace
+                name={name}
+                unitType={unitType}
+            />
+        </Box>
+    );
+};
+
+export default AdSpaceFloating;

src/components/BuildMenu.tsx

@@ -1,8 +1,11 @@
 import { Bookmark, BookmarkBorder, ContentCopy, Undo } from "@mui/icons-material";
 import { Fab, IconButton, useTheme } from "@mui/material";
+import { adSpaceSize, UnitType } from "@src/components/AdSpace";
 import InputDialog from "@src/components/InputDialog";
+import { playwireUnitMobileBottomRail } from "@src/constants";
 import useIsMobile from "@src/hooks/is-mobile";
 import { buildModelView, lastSelectedBuildModelView } from "@src/state/build";
+import { eventsAtom, playwireIsUnitInitialized } from "@src/state/events";
 import {
     addFavorite,
     favoritesAtom,
@@ -12,6 +15,7 @@ import {
 } from "@src/state/favorites";
 import { buildIdRegex } from "@src/utils/build-id";
 import { defaultBuildName } from "@src/utils/default-build-name";
+import { adsEnabled } from "@src/utils/env-tools";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useSnackbar } from "notistack";
 import React, { useState } from "react";
@@ -39,6 +43,8 @@ const BuildMenu: React.FC = () => {
     const isFavorite = isBuildInFavorites(favorites, buildId);
     const isCopyToClipboardEnabled = navigator.clipboard !== undefined;
 
+    const events = useAtomValue(eventsAtom);
+
     if (buildIdRegex.exec(location.pathname) === null) {
         return null;
     }
@@ -93,7 +99,14 @@ const BuildMenu: React.FC = () => {
                         color="primary"
                         onClick={handleCopyToClipboardClicked}
                         sx={{
-                            bottom: theme.spacing(2),
+                            bottom:
+                                (adsEnabled || DB_DISPLAY_AD_PLACEHOLDERS) &&
+                                playwireIsUnitInitialized(events, playwireUnitMobileBottomRail)
+                                    ? `${
+                                        adSpaceSize[UnitType.BottomRail].height +
+                                          parseInt(theme.spacing(3).slice(0, -2))
+                                    }px`
+                                    : theme.spacing(2), // TODO: edit this
                             position: "fixed",
                             right: theme.spacing(3),
                         }}

src/components/CenterBox.tsx

@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import React from "react";
+
+interface CenterBoxProps {
+    flexGrow?: number;
+    children: React.ReactElement;
+}
+
+const CenterBox: React.FC<CenterBoxProps> = ({ flexGrow, children }) => (
+    <Box
+        sx={{
+            alignItems: "center",
+            display: "flex",
+            flexGrow,
+            justifyContent: "center",
+        }}
+    >
+        {children}
+    </Box>
+);
+
+export default React.memo(CenterBox);