pw

frontend/src/ts/controllers/ad-controller.ts

@@ -4,6 +4,8 @@ import * as ConfigEvent from "../observables/config-event";
 import * as BannerEvent from "../observables/banner-event";
 import Config from "../config";
 import * as TestActive from "../states/test-active";
+import * as EG from "./eg-ad-controller";
+import * as PW from "./pw-ad-controller";
 
 const breakpoint = 900;
 let widerThanBreakpoint = true;
@@ -13,24 +15,25 @@ let initialised = false;
 export let adBlock: boolean;
 export let cookieBlocker: boolean;
 
+// const choice: "eg" | "pw" = Math.random() < 0.5 ? "eg" : "pw";
+const choice: "eg" | "pw" = "eg";
+
 export function init(): void {
-  $("head").append(`<script>
-!function(e){var s=new XMLHttpRequest;s.open("GET","https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=monkeytype.com",!0),s.onreadystatechange=function(){var t;4==s.readyState&&(200<=s.status&&s.status<300||304==s.status)&&((t=e.createElement("script")).type="text/javascript",t.text=s.responseText,e.head.appendChild(t))},s.send(null)}(document);
-(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-W7WN5QV');
-</script>`);
-  $("body")
-    .prepend(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
-height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`);
+  if (choice === "eg") {
+    EG.init();
+  } else {
+    PW.init();
+  }
 
   setInterval(() => {
     if (TestActive.get()) {
       return;
     }
-    refreshVisible();
+    if (choice === "eg") {
+      EG.refreshVisible();
+    } else {
+      PW.refreshVisible();
+    }
   }, 60000);
 
   initialised = true;
@@ -88,29 +91,20 @@ function updateBreakpoint(noReinstate = false): void {
   }
   if (noReinstate) return;
   if (beforeUpdate !== widerThanBreakpoint) {
-    reinstate();
+    if (choice === "eg") {
+      EG.reinstate();
+    } else {
+      PW.reinstate();
+    }
   }
 }
 
 export async function refreshVisible(): Promise<void> {
-  //@ts-ignore
-  const adDivs = Object.keys(window.egAdPack.gptAdSlots);
-  const visibleAdDivs = [];
-
-  for (let i = 0; i < adDivs.length; i++) {
-    const el = document.querySelectorAll(
-      "[data-adunit-name='" + adDivs[i] + "']"
-    )[0];
-    if (!el) continue;
-    const elParent = el.parentElement as HTMLElement;
-    if (
-      window.getComputedStyle(elParent).getPropertyValue("display") != "none"
-    ) {
-      visibleAdDivs.push(adDivs[i]);
-    }
+  if (choice === "eg") {
+    await EG.refreshVisible();
+  } else {
+    await PW.refreshVisible();
   }
-  //@ts-ignore
-  window.egAps.refreshAds(visibleAdDivs);
 }
 
 export async function checkAdblock(): Promise<void> {
@@ -164,13 +158,10 @@ export async function reinstate(): Promise<boolean> {
   await checkCookieblocker();
   if (adBlock || cookieBlocker) return false;
 
-  try {
-    //@ts-ignore
-    window.egAps.reinstate();
-    return true;
-  } catch (e) {
-    console.error(e);
-    return false;
+  if (choice === "eg") {
+    return EG.reinstate();
+  } else {
+    return PW.reinstate();
   }
 }
 
@@ -210,40 +201,10 @@ export async function renderResult(): Promise<void> {
     return;
   }
 
-  if (widerThanBreakpoint) {
-    // $("#ad-result-wrapper").html(`
-    // <div class="icon"><i class="fas fa-ad"></i></div>
-    // <div id="ad-result"></div>
-    // `);
-    // if ($("#ad-result-wrapper").is(":empty")) {
-    //@ts-ignore
-    // window.egAps.render(["ad-result"]);
-    // } else {
-    //@ts-ignore
-    window.egAps.refreshAds([
-      "ad-result",
-      "ad-vertical-left",
-      "ad-vertical-right",
-      "ad-footer",
-    ]);
-    // }
+  if (choice === "eg") {
+    EG.renderResult(widerThanBreakpoint);
   } else {
-    // $("#ad-result-small-wrapper").html(`
-    // <div class="icon small"><i class="fas fa-ad"></i></div>
-    // <div id="ad-result-small"></div>
-    // `);
-    // if ($("#ad-result-small-wrapper").is(":empty")) {
-    //@ts-ignore
-    // window.egAps.render(["ad-result-small"]);
-    // } else {
-    //@ts-ignore
-    window.egAps.refreshAds([
-      "ad-result-small",
-      "ad-vertical-left",
-      "ad-vertical-right",
-      "ad-footer-small",
-    ]);
-    // }
+    PW.renderResult();
   }
 }
 
@@ -296,7 +257,10 @@ $(document).ready(() => {
 });
 
 window.onerror = function (error): void {
-  if (typeof error === "string" && error.substring(0, 6) === "EG APS") {
-    $("#ad-result-wrapper .iconAndText").addClass("withLeft");
+  //@ts-ignore
+  if (choice === "eg") {
+    if (typeof error === "string" && error.substring(0, 6) === "EG APS") {
+      $("#ad-result-wrapper .iconAndText").addClass("withLeft");
+    }
   }
 };

frontend/src/ts/controllers/eg-ad-controller.ts

@@ -0,0 +1,65 @@
+export function init(): void {
+  $("head").append(`<script>
+  !function(e){var s=new XMLHttpRequest;s.open("GET","https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=monkeytype.com",!0),s.onreadystatechange=function(){var t;4==s.readyState&&(200<=s.status&&s.status<300||304==s.status)&&((t=e.createElement("script")).type="text/javascript",t.text=s.responseText,e.head.appendChild(t))},s.send(null)}(document);
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-W7WN5QV');
+  </script>`);
+  $("body")
+    .prepend(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`);
+}
+
+export function renderResult(widerThanBreakpoint: boolean): void {
+  if (widerThanBreakpoint) {
+    //@ts-ignore
+    window.egAps.refreshAds([
+      "ad-result",
+      "ad-vertical-left",
+      "ad-vertical-right",
+      "ad-footer",
+    ]);
+  } else {
+    //@ts-ignore
+    window.egAps.refreshAds([
+      "ad-result-small",
+      "ad-vertical-left",
+      "ad-vertical-right",
+      "ad-footer-small",
+    ]);
+  }
+}
+
+export function reinstate(): boolean {
+  try {
+    //@ts-ignore
+    window.egAps.reinstate();
+    return true;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+}
+
+export async function refreshVisible(): Promise<void> {
+  //@ts-ignore
+  const adDivs = Object.keys(window.egAdPack.gptAdSlots);
+  const visibleAdDivs = [];
+
+  for (let i = 0; i < adDivs.length; i++) {
+    const el = document.querySelectorAll(
+      "[data-adunit-name='" + adDivs[i] + "']"
+    )[0];
+    if (!el) continue;
+    const elParent = el.parentElement as HTMLElement;
+    if (
+      window.getComputedStyle(elParent).getPropertyValue("display") != "none"
+    ) {
+      visibleAdDivs.push(adDivs[i]);
+    }
+  }
+  //@ts-ignore
+  window.egAps.refreshAds(visibleAdDivs);
+}

frontend/src/ts/controllers/pw-ad-controller.ts

@@ -0,0 +1,132 @@
+//@ts-nocheck
+
+import Config from "../config";
+
+// Step 1: Create the Ramp Object, NOTE: selector id needed for tagged units only
+const resultUnits = [
+  {
+    type: "leaderboard_atf",
+    selectorId: "ad-result-wrapper", // fill in appropriate selectorId as needed.
+  },
+];
+const onUnits = [
+  {
+    type: "leaderboard_atf",
+    selectorId: "ad-result-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "skyscraper_atf",
+    selectorId: "ad-vertical-right-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "skyscraper_btf",
+    selectorId: "ad-vertical-left-wrapper", // fill in appropriate selectorId as needed.
+  },
+];
+const selloutUnits = [
+  {
+    type: "leaderboard_atf",
+    selectorId: "ad-result-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-vertical-right-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "leaderboard_btf",
+    selectorId: "ad-vertical-left-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "skyscraper_atf", //160x600
+    selectorId: "ad-vertical-right-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "skyscraper_btf", //160x600
+    selectorId: "ad-vertical-left-wrapper", // fill in appropriate selectorId as needed.
+  },
+  {
+    type: "bottom_rail", //OOP or out-of-page unit do not need a selectorId. 728x90.
+  },
+];
+
+export function init(): void {
+  // Set Values with your PubID and Website ID
+  const pubId = "1024888";
+  const websiteId = "74058";
+
+  window.ramp = {
+    que: [],
+    passiveMode: true,
+    // onReady: (): void => {
+    //   const units = getUnits();
+
+    //   if (units) {
+    //     ramp.addUnits(units).then(() => {
+    //       ramp.displayUnits();
+    //     });
+    //   }
+    // },
+  };
+
+  const headOfDocument = document.getElementsByTagName("head")[0];
+
+  // Step 2: Creates the Ramp Scripts
+  const rampScript = document.createElement("script");
+  rampScript.setAttribute("async", true);
+  rampScript.src = `//cdn.intergient.com/${pubId}/${websiteId}/ramp.js`;
+  headOfDocument.appendChild(rampScript);
+
+  window._pwGA4PageviewId = "".concat(Date.now());
+  window.dataLayer = window.dataLayer || [];
+  window.gtag =
+    window.gtag ||
+    function (): void {
+      // eslint-disable-next-line prefer-rest-params
+      dataLayer.push(arguments);
+    };
+  gtag("js", new Date());
+  gtag("config", "G-KETCPNHRJF", { send_page_view: false });
+  gtag("event", "ramp_js", {
+    send_to: "G-KETCPNHRJF",
+    pageview_id: window._pwGA4PageviewId,
+  });
+}
+
+function getUnits(): unknown {
+  let units = undefined;
+
+  if (Config.ads === "result") {
+    units = resultUnits;
+  } else if (Config.ads === "on") {
+    units = onUnits;
+  } else if (Config.ads === "sellout") {
+    units = selloutUnits;
+  }
+
+  return units;
+}
+
+//add logic so script selects the correct ad units array, 'default', 'on', 'sellout'
+//Since ad units do not populate until results page is shown, trigger the API methods when results are
+//shown for user so the containers do not populate with hidden ads before the ad containers are shown.  Current example below will populate the container with an ad on page load.
+//use onClick's or other user events to trigger applicable API methods.  For example, if user clicks to a new area of the site, ramp.destroyUnits('all')...
+//then run ramp.addUnits(defaultUnits).then(
+//            () => {
+//                ramp.displayUnits()
+//            }
+//        )
+
+export function reinstate(): boolean {
+  //@ts-ignore
+  ramp.destroyUnits("all");
+  //@ts-ignore
+  return ramp.addUnits(getUnits());
+}
+
+export async function refreshVisible(): Promise<void> {
+  ramp.triggerRefresh();
+}
+
+export function renderResult(): void {
+  ramp.addUnits(resultUnits);
+}

frontend/src/ts/ready.ts

@@ -104,12 +104,12 @@ if ("serviceWorker" in navigator) {
             (event.isUpdate || event2.isUpdate) &&
             updateBannerId === undefined
           ) {
-            updateBannerId = Notifications.addBanner(
-              "Update ready - please refresh",
-              1,
-              "gift",
-              true
-            );
+            // updateBannerId = Notifications.addBanner(
+            //   "Update ready - please refresh",
+            //   1,
+            //   "gift",
+            //   true
+            // );
           }
         });
 

frontend/webpack/config.base.js

@@ -11,6 +11,7 @@ const htmlWebpackPlugins = [
   "security-policy",
   "privacy-policy",
   "email-handler",
+  "adtest",
 ].map((name) => {
   return new HtmlWebpackPlugin({
     filename: `${name}.html`,