diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts index a866a53b7..8b3026d5d 100644 --- a/frontend/src/ts/controllers/ad-controller.ts +++ b/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(``); - $("body") - .prepend(``); + 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 { - //@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 { @@ -164,13 +158,10 @@ export async function reinstate(): Promise { 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 { return; } - if (widerThanBreakpoint) { - // $("#ad-result-wrapper").html(` - //
- //
- // `); - // 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(` - //
- //
- // `); - // 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"); + } } }; diff --git a/frontend/src/ts/controllers/eg-ad-controller.ts b/frontend/src/ts/controllers/eg-ad-controller.ts new file mode 100644 index 000000000..1daf053d0 --- /dev/null +++ b/frontend/src/ts/controllers/eg-ad-controller.ts @@ -0,0 +1,65 @@ +export function init(): void { + $("head").append(``); + $("body") + .prepend(``); +} + +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 { + //@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); +} diff --git a/frontend/src/ts/controllers/pw-ad-controller.ts b/frontend/src/ts/controllers/pw-ad-controller.ts new file mode 100644 index 000000000..e339cdd89 --- /dev/null +++ b/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 { + ramp.triggerRefresh(); +} + +export function renderResult(): void { + ramp.addUnits(resultUnits); +} diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts index dabb60e90..e82fcbed9 100644 --- a/frontend/src/ts/ready.ts +++ b/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 + // ); } }); diff --git a/frontend/webpack/config.base.js b/frontend/webpack/config.base.js index 50500c46d..94b11a89a 100644 --- a/frontend/webpack/config.base.js +++ b/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`,