@highfivve/ad-tag 5.7.2 → 5.8.4

package/lib/ads/googleAdManager.js

@@ -341,7 +341,7 @@ export const gptDefineSlots = () => (context, slots) => {
 const checkAndSwitchToWebInterstitial = (slotsToRefresh, context) => {
     const interstitialSlot = slotsToRefresh.find(({ moliSlot }) => moliSlot.position === 'interstitial');
     if (interstitialSlot && context.auction__.interstitialChannel() === 'gam') {
-        const targeting = { ...interstitialSlot.adSlot.getConfig('targeting') };
+        const targeting = { ...interstitialSlot.adSlot.getConfig('targeting').targeting };
         context.window__.googletag.destroySlots([interstitialSlot.adSlot]);
         const gamWebInterstitial = context.window__.googletag.defineOutOfPageSlot(resolveAdUnitPath(interstitialSlot.moliSlot.adUnitPath, context.adUnitPathVariables__), context.window__.googletag.enums.OutOfPageFormat.INTERSTITIAL);
         if (gamWebInterstitial) {

package/lib/ads/modules/custom/index.js

@@ -0,0 +1,58 @@
+import { mkInitStep } from 'ad-tag/ads/adPipeline';
+const name = 'custom';
+export const customModule = () => {
+    let customConfig = null;
+    const injectInlineJs = (context, config) => {
+        if (config.inlineJs && config.inlineJs.code) {
+            try {
+                const script = context.window__.document.createElement('script');
+                script.type = 'text/javascript';
+                script.innerHTML = config.inlineJs.code;
+                context.window__.document.head.appendChild(script);
+                context.logger__?.info(name, 'Injected inline JS');
+            }
+            catch (e) {
+                context.logger__?.error(name, 'Failed to inject inline JS', e);
+            }
+        }
+        if (config.scripts) {
+            config.scripts
+                .filter(scriptConfig => context.labelConfigService__.filterSlot(scriptConfig))
+                .forEach(scriptConfig => {
+                try {
+                    const script = context.window__.document.createElement('script');
+                    script.type = 'text/javascript';
+                    script.src = scriptConfig.src;
+                    if (scriptConfig.attributes) {
+                        Object.entries(scriptConfig.attributes).forEach(([key, value]) => {
+                            script.setAttribute(key, value);
+                        });
+                    }
+                    context.window__.document.head.appendChild(script);
+                    context.logger__?.info(name, `Injected script from URL: ${scriptConfig.src}`);
+                }
+                catch (e) {
+                    context.logger__?.error(name, 'Failed to inject script from config', scriptConfig, e);
+                }
+            });
+        }
+        return Promise.resolve();
+    };
+    return {
+        name,
+        description: 'Injects custom inline JavaScript code',
+        moduleType: 'custom',
+        config__: () => null,
+        configure__: (moduleConfig) => {
+            if (moduleConfig?.custom?.enabled) {
+                customConfig = moduleConfig.custom;
+            }
+        },
+        initSteps__: () => {
+            const config = customConfig;
+            return config ? [mkInitStep('custom-init', ctx => injectInlineJs(ctx, config))] : [];
+        },
+        configureSteps__: () => [],
+        prepareRequestAdsSteps__: () => []
+    };
+};

package/lib/ads/moli.js

@@ -1,15 +1,16 @@
-import { parseQueryString } from '../util/query';
 import { AssetLoadMethod, createAssetLoaderService } from '../util/assetLoaderService';
 import { getLogger } from '../util/logging';
 import { addNewInfiniteSlotToConfig } from '../util/addNewInfiniteSlotToConfig';
 import { AdService } from './adService';
 import { createEventService } from './eventService';
-import { getActiveEnvironmentOverride, setEnvironmentOverrideInStorage } from '../util/environmentOverride';
+import { getAbTestValues, getActiveEnvironmentOverride, setEnvironmentOverrideInStorage } from '../util/environmentOverride';
 import { packageJson } from '../gen/packageJson';
 import * as adUnitPath from './adUnitPath';
 import { extractTopPrivateDomainFromHostname } from '../util/extractTopPrivateDomainFromHostname';
 import { createLabelConfigService } from './labelConfigService';
 import { allowRefreshAdSlot, allowRequestAds } from './spa';
+import { QueryParameters } from 'ad-tag/util/queryParameters';
+import { BrowserStorageKeys } from 'ad-tag/util/browserStorageKeys';
 export const createMoliTag = (window) => {
     const assetLoaderService = createAssetLoaderService(window);
     const eventService = createEventService();
@@ -577,11 +578,9 @@ export const createMoliTag = (window) => {
         }
     }
     function setABtestTargeting() {
-        const key = 'ABtest';
-        const params = parseQueryString(window.location.search);
-        const param = params.get(key);
-        const abTest = param ? Number(param) : Math.floor(Math.random() * 100) + 1;
-        setTargeting(key, abTest.toString());
+        const abTestValues = getAbTestValues(window, QueryParameters.abTest, BrowserStorageKeys.abTest);
+        const abTestValue = abTestValues.length > 0 ? Number(abTestValues[0].value) : Math.floor(Math.random() * 100) + 1;
+        setTargeting(QueryParameters.abTest, abTestValue.toString());
     }
     function addDomainLabel(domainFromConfig) {
         const domain = domainFromConfig || extractTopPrivateDomainFromHostname(window.location.hostname);

package/lib/bundle/custom.js

@@ -0,0 +1,2 @@
+import { customModule } from 'ad-tag/ads/modules/custom';
+window.moli.registerModule(customModule());

package/lib/console/components/globalConfig.js

@@ -374,7 +374,8 @@ export class GlobalConfig extends Component {
                         React.createElement("div", { className: "MoliDebug-tagContainer" },
                             React.createElement(TagLabel, null, "Overall Mode"),
                             runtimeConfig.environment === 'test' ? (React.createElement(Tag, { variant: "yellow" }, "Test")) : (React.createElement(Tag, { variant: "green" }, "Production")),
-                            isEnvironmentOverridden ? (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: this.resetEnvironmentOverrides }, "\u25C0 Reset override")) : (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--yellow MoliDebug-button--greyText", onClick: this.overrideEnvironmentToTest }, "\u25B6 Override to test"))),
+                            isEnvironmentOverridden ? (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: this.resetEnvironmentOverrides }, "\u25C0 Reset override")) : (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--yellow MoliDebug-button--greyText", onClick: this.overrideEnvironmentToTest }, "\u25B6 Override to test")),
+                            React.createElement("button", { className: "MoliDebug-button MoliDebug-button--blue", onClick: () => this.props.onShowOverlaysChange(!this.props.showOverlays) }, this.props.showOverlays ? '◀ Hide overlays' : '▶ Show overlays')),
                         interstitialSlot && (React.createElement("div", { className: "MoliDebug-tagContainer" },
                             React.createElement(TagLabel, null, "Interstitital Test Mode"),
                             isInterstitialTestEnabled ? (React.createElement("button", { className: "MoliDebug-button MoliDebug-button--green", onClick: () => {
@@ -438,12 +439,13 @@ export class GlobalConfig extends Component {
                                         showOnlyRenderedSlots: e.target.checked
                                     }) }),
                                 "Show only rendered slots")),
-                        config.slots.map((slot, index) => this.isSlotRendered(slot) || !showOnlyRenderedSlots ? (React.createElement("div", { key: index },
-                            React.createElement("strong", null, slot.behaviour.loaded),
-                            " slot with DOM ID",
-                            ' ',
-                            React.createElement("strong", null, slot.domId),
-                            React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot }))) : null)))),
+                        this.props.showOverlays &&
+                            config.slots.map((slot, index) => this.isSlotRendered(slot) || !showOnlyRenderedSlots ? (React.createElement("div", { key: index },
+                                React.createElement("strong", null, slot.behaviour.loaded),
+                                " slot with DOM ID",
+                                ' ',
+                                React.createElement("strong", null, slot.domId),
+                                React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot }))) : null)))),
                 React.createElement("div", { className: "MoliDebug-sidebarSection  MoliDebug-sidebarSection--targeting" },
                     React.createElement("h4", null,
                         this.collapseToggle('targeting'),

package/lib/console/debug.js

@@ -15,23 +15,44 @@ if (moliConfig) {
     let container = document.createElement('div');
     container.classList.add('moli-console-container');
     const shadowRoot = container.attachShadow({ mode: 'open' });
-    const globalConfigComponent = (React.createElement(GlobalConfig, { config: moliConfig, runtimeConfig: window.moli.getRuntimeConfig(), modules: window.moli.getConfig()?.modules || {}, labelConfigService: labelConfigService, windowResizeService: new WindowResizeService(), themingService: themingService }));
+    const DebugConsole = () => {
+        const [showOverlays, setShowOverlays] = React.useState(false);
+        const slotRoots = React.useRef(new Map());
+        React.useEffect(() => {
+            setTimeout(() => {
+                const globalConfigComponentRoot = shadowRoot.getElementById('moli-console-global-config');
+                themingService.setRootElement(globalConfigComponentRoot);
+                themingService.applyTheme();
+                themingService.enableSystemThemeListener();
+            }, 200);
+        }, []);
+        React.useEffect(() => {
+            if (showOverlays) {
+                moliConfig.slots.forEach(slot => {
+                    const slotDomElement = document.getElementById(slot.domId);
+                    if (slotDomElement && labelConfigService.filterSlot(slot)) {
+                        let slotConfigRoot = slotRoots.current.get(slot.domId);
+                        if (!slotConfigRoot) {
+                            slotConfigRoot = createRoot(slotDomElement);
+                            slotRoots.current.set(slot.domId, slotConfigRoot);
+                        }
+                        slotConfigRoot.render(React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot, parentElement: slotDomElement }));
+                    }
+                });
+            }
+            else {
+                slotRoots.current.forEach(root => {
+                    root.unmount();
+                });
+                slotRoots.current.clear();
+            }
+        }, [showOverlays]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(GlobalConfig, { config: moliConfig, runtimeConfig: window.moli.getRuntimeConfig(), modules: window.moli.getConfig()?.modules || {}, labelConfigService: labelConfigService, windowResizeService: new WindowResizeService(), themingService: themingService, showOverlays: showOverlays, onShowOverlaysChange: setShowOverlays })));
+    };
     window.document.body.append(container);
     const root = createRoot(shadowRoot);
-    root.render(globalConfigComponent);
-    setTimeout(() => {
-        const globalConfigComponentRoot = shadowRoot.getElementById('moli-console-global-config');
-        themingService.setRootElement(globalConfigComponentRoot);
-        themingService.applyTheme();
-        themingService.enableSystemThemeListener();
-    }, 200);
-    moliConfig.slots.forEach(slot => {
-        const slotDomElement = document.getElementById(slot.domId);
-        if (slotDomElement && labelConfigService.filterSlot(slot)) {
-            const slotConfigRoot = createRoot(slotDomElement);
-            slotConfigRoot.render(React.createElement(AdSlotConfig, { labelConfigService: labelConfigService, slot: slot, parentElement: slotDomElement }));
-        }
-    });
+    root.render(React.createElement(DebugConsole, null));
 }
 else {
     window.alert('No moli config found. The console cannot be displayed');

package/lib/console/util/calculateAdDensity.js

@@ -29,7 +29,7 @@ export function calculateAdDensity(contentSelector, adSelectorOverride) {
         console.warn('Content area is zero');
         return { totalAdDensity: 0, totalAdArea: 0, adAreaPerSlot: [] };
     }
-    const totalAdDensity = (totalAdArea / pageArea) * 100;
+    const totalAdDensity = Math.round((totalAdArea / pageArea) * 100);
     logMessages.push(`Total ad area: ${totalAdArea}px², Page area: ${pageArea}px², Ad density: ${totalAdDensity.toFixed(2)}%`);
     console.log(logMessages.join('\n'));
     return { totalAdDensity, totalAdArea, adAreaPerSlot };

package/lib/gen/packageJson.js

@@ -1,3 +1,3 @@
 export const packageJson = {
-    version: '5.7.2'
+    version: '5.8.4'
 };

package/lib/util/browserStorageKeys.js

@@ -3,5 +3,6 @@ export const BrowserStorageKeys = {
     moliPubCode: 'moli-pub-code',
     moliVersion: 'moli-version',
     testSlotSize: (id) => `moli-test-slot-size-${id}`,
-    debugDelay: 'moli-debug-delay'
+    debugDelay: 'moli-debug-delay',
+    abTest: 'moli-ab-test'
 };

package/lib/util/environmentOverride.js

@@ -1,13 +1,36 @@
 import { BrowserStorageKeys } from './browserStorageKeys';
-import { removeBrowserStorageValue, setBrowserStorageValue } from './localStorage';
-import { updateQueryString } from './query';
+import { getBrowserStorageValue, removeBrowserStorageValue, setBrowserStorageValue } from './localStorage';
+import { parseQueryString, updateQueryString } from './query';
 import { QueryParameters } from './queryParameters';
 import { resolveOverrides } from './resolveOverrides';
+import { isNotNull } from 'ad-tag/util/arrayUtils';
 const isEnvironmentString = (environment) => {
     const validValues = ['production', 'test'];
     return !!validValues.find(value => value === environment);
 };
+const isValidAbTestValue = (value) => {
+    const num = Number(value);
+    return !isNaN(num) && num >= 1 && num <= 100;
+};
 export const getActiveEnvironmentOverride = (window) => resolveOverrides(window, QueryParameters.moliEnv, BrowserStorageKeys.moliEnv, isEnvironmentString)[0] || undefined;
+export const getAbTestValues = (window, abTestQueryParam, abTestBrowserStorageKey) => {
+    return [
+        {
+            source: 'queryParam',
+            value: parseQueryString(window.location.search).get(abTestQueryParam)
+        },
+        {
+            source: 'sessionStorage',
+            value: getBrowserStorageValue(abTestBrowserStorageKey, window.sessionStorage)
+        },
+        {
+            source: 'localStorage',
+            value: getBrowserStorageValue(abTestBrowserStorageKey, window.localStorage)
+        }
+    ]
+        .map(({ source, value }) => !!value && isValidAbTestValue(value) ? { source, value } : undefined)
+        .filter(isNotNull);
+};
 export const setEnvironmentOverrideInStorage = (value, storage) => setBrowserStorageValue(BrowserStorageKeys.moliEnv, value, storage);
 export const resetEnvironmentOverrides = (window) => {
     removeBrowserStorageValue(BrowserStorageKeys.moliEnv, window.sessionStorage);

package/lib/util/queryParameters.js

@@ -1,5 +1,6 @@
 export const QueryParameters = {
     moliEnv: 'moliEnv',
     moliPubCode: 'moliPubCode',
-    moliVersion: 'moliVersion'
+    moliVersion: 'moliVersion',
+    abTest: 'ABtest'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highfivve/ad-tag",
-  "version": "5.7.2",
+  "version": "5.8.4",
   "license": "Apache-2.0",
   "description": "An ad tag implementation called moli",
   "main": "./lib/index.js",