Try Ramp as React component

app/components/Main.tsx

@@ -21,7 +21,7 @@ export const Main = ({
 }) => {
   const data = useMatches()[0]?.data as RootLoaderData | undefined;
   const user = useUser();
-  const showLeaderboard = data?.gtagId && !user?.patronTier;
+  const showLeaderboard = data?.publisherId && !user?.patronTier;
 
   return (
     <main

app/components/Ramp.tsx

@@ -0,0 +1,124 @@
+/* eslint-disable */
+// @ts-nocheck
+
+//
+// From: https://github.com/intergi/pw-react-component
+//
+
+import React from "react";
+
+window.ramp = window.ramp || {};
+window.ramp.que = window.ramp.que || [];
+window.ramp.passiveMode = true;
+window._pwRampComponentLoaded = window._pwRampComponentLoaded || false;
+
+const oopUnits = [
+  "trendi_slideshow",
+  "trendi_video",
+  "site_skin",
+  "flex_leaderboard",
+  "top_rail",
+  "right_rail",
+  "bottom_rail",
+  "left_rail",
+];
+
+// destroy the units when componenent unmounts
+const cleanUp = (parentId) =>
+  new Promise((resolve, reject) => {
+    // possible that component was removed before first ad was created
+    if (!window.ramp.settings || !window.ramp.settings.slots) return;
+
+    delete window.ramp.forcePath;
+
+    let slotsToRemove = [];
+    Object.entries(window.ramp.settings.slots).forEach(([slotName, slot]) => {
+      if (oopUnits.includes(slot.type) || slot.videoType === "Bolt Player") {
+        slotsToRemove.push(slotName);
+      }
+    });
+
+    if (slotsToRemove.length > 0) {
+      window.ramp.destroyUnits(slotsToRemove).finally(() => resolve());
+    }
+  });
+
+export default class Ramp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    if (!props || !props.publisherId || !props.id) {
+      console.error("publisherId and id are required props.");
+      return;
+    }
+    this.init(props);
+  }
+
+  init({ publisherId, id, forcePath }) {
+    if (forcePath) window.ramp.forcePath = forcePath;
+
+    // make sure we only do this once per "app" load
+    if (!window._pwRampComponentLoaded) {
+      window._pwRampComponentLoaded = true;
+
+      window.ramp.config = `https://config.playwire.com/${publisherId}/v2/websites/${id}/banner.json`;
+      const configScript = document.createElement("script");
+      // configScript.src = `https://cdn.intergient.com/${publisherId}/${id}/ramp.js`;
+      configScript.src = "https://cdn.intergient.com/ramp_core.js";
+      document.head.appendChild(configScript);
+    }
+
+    this.displayTaglessUnits();
+  }
+
+  displayTaglessUnits() {
+    window.ramp.que.push(() => {
+      window.ramp
+        .addUnits([
+          { type: "trendi_slideshow" },
+          { type: "trendi_video" },
+          { type: "site_skin" },
+          { type: "flex_leaderboard" },
+          { type: "top_rail" },
+          { type: "right_rail" },
+          { type: "bottom_rail" },
+          { type: "left_rail" },
+          // {type: 'behind_page'},
+          // {type: 'in_image'},
+          // {type: 'above_page'},
+          // {type: 'in_content'},
+          // {type: 'inimg'},
+          // {type: 'skin'}
+        ])
+        .finally(() => {
+          window.ramp.displayUnits();
+        });
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.forcePath && prevProps.forcePath !== this.props.forcePath) {
+      window.ramp.forcePath = this.props.forcePath;
+      window.ramp.que.push(() => {
+        window.ramp
+          .setPath(this.props.forcePath)
+          .then(() => {
+            return cleanUp();
+          })
+          .then(() => {
+            this.displayTaglessUnits();
+          });
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    window.ramp.que.push(() => {
+      cleanUp(this.unitToAdd.selectorId);
+    });
+  }
+
+  render() {
+    return null;
+  }
+}

app/components/layout/index.tsx

@@ -50,7 +50,7 @@ export const Layout = React.memo(function Layout({
 
   const showLeaderboard =
     data &&
-    data.gtagId &&
+    data.publisherId &&
     !data?.user?.patronTier &&
     !location.pathname.includes("plans");
 

app/root.tsx

@@ -14,6 +14,7 @@ import {
   type ShouldRevalidateFunction,
   useLoaderData,
   useMatches,
+  useLocation,
 } from "@remix-run/react";
 import * as React from "react";
 import commonStyles from "~/styles/common.css";
@@ -88,7 +89,6 @@ export interface RootLoaderData {
     | "discordName"
     | "patronTier"
   >;
-  gtagId?: string;
   publisherId?: string;
   websiteId?: string;
 }
@@ -106,7 +106,6 @@ export const loader: LoaderFunction = async ({ request }) => {
       theme: themeSession.getTheme(),
       patrons: db.users.findAllPatrons(),
       baseUrl: process.env["BASE_URL"],
-      gtagId: process.env["GTAG_ID"],
       publisherId: process.env["PLAYWIRE_PUBLISHER_ID"],
       websiteId: process.env["PLAYWIRE_WEBSITE_ID"],
       user: user
@@ -152,7 +151,6 @@ function Document({
     <html lang={locale} dir={i18n.dir()} className={htmlThemeClass}>
       <head>
         <Meta />
-        <PlaywireScripts data={data} />
         <Links />
         <ThemeHead />
         <link rel="manifest" href="/app.webmanifest" />
@@ -162,6 +160,7 @@ function Document({
       <body style={customizedCSSVars}>
         {process.env.NODE_ENV === "development" && <HydrationTestIndicator />}
         <React.StrictMode>
+          <MyRamp data={data} />
           <Layout data={data} isErrored={isErrored}>
             {children}
           </Layout>
@@ -281,100 +280,6 @@ function Fonts() {
   );
 }
 
-function PlaywireScripts({ data }: { data: RootLoaderData | undefined }) {
-  if (
-    !data ||
-    !data.gtagId ||
-    !data.publisherId ||
-    !data.websiteId ||
-    data.user?.patronTier
-  ) {
-    return null;
-  }
-
-  const units: Array<{ selectorId?: string; type: string }> = [
-    {
-      selectorId: "top-leaderboard",
-      type: "leaderboard_atf",
-    },
-    {
-      type: "bottom_rail",
-    },
-  ];
-
-  return (
-    <>
-      {/* Step 1. */}
-      <script
-        async
-        src={`https://www.googletagmanager.com/gtag/js?id=${data.gtagId}`}
-      />
-      <script
-        type="text/javascript"
-        dangerouslySetInnerHTML={{
-          __html: `
-      window.ramp = window.ramp || {};
-      window.ramp.que = window.ramp.que || [];
-      window.ramp.passiveMode = true;`,
-        }}
-      />
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-              window._pwGA4PageviewId = ''.concat(Date.now());
-              window.dataLayer = window.dataLayer || [];
-              window.gtag = window.gtag || function () {
-                  dataLayer.push(arguments);
-              };
-              gtag('js', new Date());
-              gtag('config', '${data.gtagId}', { 'send_page_view': false });
-              gtag(
-                  'event',
-                  'ramp_js',
-                  {
-                      'send_to': '${data.gtagId}',
-                      'pageview_id': window._pwGA4PageviewId
-                  }
-              );
-            `,
-        }}
-      />
-      {/* Step 2.-3. */}
-      <script
-        type="text/javascript"
-        dangerouslySetInnerHTML={{
-          __html: `
-        var pwUnits = ${JSON.stringify(units)}
-    
-        var init = function () {
-            ramp.destroyUnits('all').then(() => {
-              ramp
-              .addUnits(pwUnits)
-              .then(() => {
-                  ramp.displayUnits()
-              }).catch((e) =>{
-                  ramp.displayUnits()
-                  console.log(e)
-              })
-            })  
-        }
-    
-        ramp.onReady = function() {
-          init()
-        }
-      `,
-        }}
-      />
-      {/* Step 4. */}
-      <script
-        type="text/javascript"
-        async
-        src={`//cdn.intergient.com/${data.publisherId}/${data.websiteId}/ramp.js`}
-      />
-    </>
-  );
-}
-
 function PWALinks() {
   return (
     <>
@@ -552,3 +457,25 @@ function PWALinks() {
     </>
   );
 }
+
+const Ramp = React.lazy(() => import("./components/Ramp"));
+function MyRamp({ data }: { data: RootLoaderData | undefined }) {
+  const location = useLocation();
+  if (
+    !data ||
+    !data.publisherId ||
+    !data.websiteId ||
+    data.user?.patronTier ||
+    typeof window === "undefined"
+  ) {
+    return null;
+  }
+
+  return (
+    <Ramp
+      publisherId={data.publisherId}
+      id={data.websiteId}
+      forcePath={location.pathname}
+    />
+  );
+}