remove partytown

manawiki · Aug 30, 2024 · 73b31c7 · 73b31c7
1 parent 8de48ed
commit 73b31c7
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 6,269 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,7 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 
-import { Partytown } from "@builder.io/partytown/react";
 import type {
    MetaFunction,
    LinksFunction,
@@ -16,7 +15,7 @@ import {
    Outlet,
    Scripts,
    useLoaderData,
-   useMatches,
+   useLocation,
 } from "@remix-run/react";
 import splideCSS from "@splidejs/splide/dist/css/splide-core.min.css";
 import { useTranslation } from "react-i18next";
@@ -26,9 +25,9 @@ import { getToast } from "remix-toast";
 import { Toaster, toast as notify } from "sonner";
 
 import customStylesheetUrl from "~/_custom/styles.css";
-import type { Site } from "~/db/payload-types";
 import fonts from "~/styles/fonts.css";
 import { ClientHintCheck, getHints, useTheme } from "~/utils/client-hints";
+import * as gtag from "~/utils/gtags.client";
 import { i18nextServer } from "~/utils/i18n/i18next.server";
 import { useIsBot } from "~/utils/isBotProvider";
 import { getTheme } from "~/utils/theme.server";
@@ -37,6 +36,7 @@ import { ScrollRestoration } from "./components/ScrollRestoration";
 import { settings } from "./config";
 import { getSiteSlug } from "./routes/_site+/_utils/getSiteSlug.server";
 import tailwindStylesheetUrl from "./styles/global.css";
+import { useSiteLoaderData } from "./utils/useSiteLoaderData";
 
 export { ErrorBoundary } from "~/components/ErrorBoundary";
 
@@ -144,9 +144,7 @@ function App() {
    useChangeLanguage(locale);
 
    //site data should live in layout, this may be potentially brittle if we shift site architecture around
-   const { site } = (useMatches()?.[1]?.data as { site: Site | null }) ?? {
-      site: null,
-   };
+   const { site } = useSiteLoaderData();
 
    // Hook to show the toasts
    useEffect(() => {
@@ -160,6 +158,16 @@ function App() {
 
    const [searchToggle, setSearchToggle] = useState(false);
 
+   const location = useLocation();
+
+   const gaTrackingId = site?.gaTagId;
+
+   useEffect(() => {
+      if (gaTrackingId?.length) {
+         gtag.pageview(location.pathname, gaTrackingId);
+      }
+   }, [location, gaTrackingId]);
+
    return (
       <html
          lang={locale}
@@ -214,31 +222,33 @@ function App() {
                   href="/favicon.ico"
                />
             )}
-            {/* {process.env.NODE_ENV === "production" && !isBot && (
-               <Partytown
-                  debug={false}
-                  forward={["dataLayer.push"]}
-                  resolveUrl={(url, location, type) => {
-                     //proxy gtag requests to avoid cors issues
-                     if (
-                        type === "script" &&
-                        url.host === "www.googletagmanager.com"
-                     ) {
-                        return new URL(
-                           location.origin +
-                              "/proxy" +
-                              url.pathname +
-                              url.search,
-                        );
-                     }
-                     return url;
-                  }}
-               />
-            )} */}
             <Meta />
             <Links />
          </head>
          <body className="text-light dark:text-dark">
+            {process.env.NODE_ENV === "development" || !gaTrackingId ? null : (
+               <>
+                  <script
+                     async
+                     src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}
+                  />
+                  <script
+                     async
+                     id="gtag-init"
+                     dangerouslySetInnerHTML={{
+                        __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+
+                gtag('config', '${gaTrackingId}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+                     }}
+                  />
+               </>
+            )}
             <div
                vaul-drawer-wrapper=""
                className="max-laptop:min-h-screen bg-white dark:bg-bg3Dark"

diff --git a/app/routes/_site+/_components/GAScripts.tsx b/app/routes/_site+/_components/GAScripts.tsx
diff --git a/app/routes/_site+/_layout.tsx b/app/routes/_site+/_layout.tsx
@@ -4,14 +4,12 @@ import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunctionArgs } from "@remix-run/react";
 import { Outlet, useLoaderData } from "@remix-run/react";
-import { ClientOnly } from "remix-utils/client-only";
 
 import { getSiteSlug } from "~/routes/_site+/_utils/getSiteSlug.server";
 
 import { ColumnOne } from "./_components/Column-1";
 import { ColumnTwo } from "./_components/Column-2";
 import { ColumnFour } from "./_components/Column-4";
-import { GAScripts } from "./_components/GAScripts";
 import { MobileHeader } from "./_components/MobileHeader";
 import { RampInit } from "./_components/RampInit";
 import { AdUnit } from "./_components/RampUnit";
@@ -33,7 +31,6 @@ export async function loader({
 
 export default function SiteLayout() {
    const { site } = useLoaderData<typeof loader>() || {};
-   const gaTag = site?.gaTagId;
    const adWebId = site?.adWebId;
 
    const [isPrimaryMenu, setPrimaryMenuOpen] = useState(false);
@@ -60,13 +57,6 @@ export default function SiteLayout() {
             <ColumnFour />
          </main>
          <RampInit adWebId={adWebId} />
-         <ClientOnly fallback={<></>}>
-            {() => (
-               <>
-                  <GAScripts gaTrackingId={gaTag} />
-               </>
-            )}
-         </ClientOnly>
          <AdUnit
             className="fixed bottom-0 left-0 w-full h-[50px] z-50 bg-3 flex items-center justify-center"
             enableAds={site?.enableAds}

diff --git a/app/utils/gtags.client.ts b/app/utils/gtags.client.ts
@@ -0,0 +1,48 @@
+declare global {
+   interface Window {
+      gtag: (
+         option: string,
+         gaTrackingId: string,
+         options: Record<string, unknown>,
+      ) => void;
+   }
+}
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ */
+export const pageview = (url: string, trackingId: string) => {
+   if (!window.gtag) {
+      console.warn(
+         "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+      );
+      return;
+   }
+   window.gtag("config", trackingId, {
+      page_path: url,
+   });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ */
+export const event = ({
+   action,
+   category,
+   label,
+   value,
+}: Record<string, string>) => {
+   if (!window.gtag) {
+      console.warn(
+         "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+      );
+      return;
+   }
+   window.gtag("event", action!, {
+      event_category: category,
+      event_label: label,
+      value: value,
+   });
+};
diff --git a/app/utils/third-parties/README.md b/app/utils/third-parties/README.md