@highfivve/ad-tag 5.10.3 → 5.11.0

package/lib/ads/auctions/anchorContext.js

@@ -0,0 +1,50 @@
+import { formatKey } from 'ad-tag/ads/keyValues';
+import { createWaterfallContext, createOnEmptyBidRotationTrigger } from 'ad-tag/ads/auctions/waterfallContext';
+export const isGamAnchor = (slot, window) => {
+    const [value] = slot.getTargeting(formatKey);
+    return (!!value &&
+        (value === window.googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR.toString() ||
+            value === window.googletag.enums.OutOfPageFormat.TOP_ANCHOR.toString()));
+};
+const sessionStorageKeys = {
+    bottomMobile: 'h5v_anchor_bm',
+    bottomDesktop: 'h5v_anchor_bd',
+    top: 'h5v_anchor_t'
+};
+export const createAnchorContext = (configs, window__, now, logger) => {
+    const bottomMobile = configs.bottomMobile
+        ? createWaterfallContext(sessionStorageKeys.bottomMobile, configs.bottomMobile, createOnEmptyBidRotationTrigger(), window__, now, logger, 'anchor-bottom-mobile')
+        : undefined;
+    const bottomDesktop = configs.bottomDesktop
+        ? createWaterfallContext(sessionStorageKeys.bottomDesktop, configs.bottomDesktop, createOnEmptyBidRotationTrigger(), window__, now, logger, 'anchor-bottom-desktop')
+        : undefined;
+    const top = configs.top
+        ? createWaterfallContext(sessionStorageKeys.top, configs.top, createOnEmptyBidRotationTrigger(), window__, now, logger, 'anchor-top')
+        : undefined;
+    const bottomInstances = [bottomMobile, bottomDesktop].filter((instance) => !!instance);
+    const bottomInstanceForDomId = (domId) => {
+        if (configs.bottomMobile?.domId === domId) {
+            return bottomMobile;
+        }
+        if (configs.bottomDesktop?.domId === domId) {
+            return bottomDesktop;
+        }
+        return undefined;
+    };
+    return {
+        anchorBottomChannel: (domId) => bottomInstanceForDomId(domId)?.channel(),
+        anchorTopChannel: () => top?.channel(),
+        updateAdUnitPaths: (variables) => {
+            bottomInstances.forEach(instance => instance.updateAdUnitPaths(variables));
+            top?.updateAdUnitPaths(variables);
+        },
+        onSlotRenderEnded: (event) => {
+            bottomInstances.forEach(instance => instance.onSlotRenderEnded(event));
+            top?.onSlotRenderEnded(event);
+        },
+        onAuctionEnd: (event) => {
+            bottomInstances.forEach(instance => instance.onAuctionEnd(event));
+            top?.onAuctionEnd(event);
+        }
+    };
+};

package/lib/ads/auctions/rewardedAdContext.js

@@ -32,18 +32,18 @@ export const createRewardedAdContext = (config, window__, logger, assetLoaderSer
     };
     const attemptGam = (gamConfig) => new Promise(resolve => {
         window__.googletag.cmd.push(() => {
-            const googletagRef = window__.googletag;
-            const pubads = googletagRef.pubads();
+            const pubads = window__.googletag.pubads();
             const adUnitPath = gamAdUnitPath ?? gamConfig.adUnitPath;
-            const slot = googletagRef.defineOutOfPageSlot(adUnitPath, googletagRef.enums.OutOfPageFormat.REWARDED);
+            const slot = window__.googletag.defineOutOfPageSlot(adUnitPath, window__.googletag.enums.OutOfPageFormat.REWARDED);
             if (!slot) {
                 logger.error('rewardedAd', `failed to define rewarded slot for ${adUnitPath}`);
                 resolve({ outcome: 'no-fill' });
                 return;
             }
+            slot.addService(window__.googletag.pubads());
             let settled = false;
             let timeoutId;
-            const destroySlot = () => googletagRef.destroySlots([slot]);
+            const destroySlot = () => window__.googletag.destroySlots([slot]);
             const removeListeners = () => {
                 pubads.removeEventListener('slotRenderEnded', onSlotRenderEnded);
                 pubads.removeEventListener('rewardedSlotReady', onRewardedSlotReady);
@@ -59,7 +59,7 @@ export const createRewardedAdContext = (config, window__, logger, assetLoaderSer
                 resolve(attempt);
             };
             const onSlotRenderEnded = (event) => {
-                if (event.slot !== slot) {
+                if (event.slot.getAdUnitPath() !== slot.getAdUnitPath()) {
                     return;
                 }
                 if (event.isEmpty) {
@@ -70,7 +70,7 @@ export const createRewardedAdContext = (config, window__, logger, assetLoaderSer
                 }
             };
             const onRewardedSlotReady = (event) => {
-                if (event.slot !== slot) {
+                if (event.slot.getAdUnitPath() !== slot.getAdUnitPath()) {
                     return;
                 }
                 window__.clearTimeout(timeoutId);
@@ -78,7 +78,7 @@ export const createRewardedAdContext = (config, window__, logger, assetLoaderSer
                 event.makeRewardedVisible();
             };
             const onRewardedSlotGranted = (event) => {
-                if (event.slot !== slot) {
+                if (event.slot.getAdUnitPath() !== slot.getAdUnitPath()) {
                     return;
                 }
                 const payload = event.payload ?? defaultRewardPayload;
@@ -86,7 +86,7 @@ export const createRewardedAdContext = (config, window__, logger, assetLoaderSer
                 settle({ outcome: 'granted', payload });
             };
             const onRewardedSlotClosed = (event) => {
-                if (event.slot !== slot) {
+                if (event.slot.getAdUnitPath() !== slot.getAdUnitPath()) {
                     return;
                 }
                 logger.debug('rewardedAd', 'gam rewarded slot closed');
@@ -104,8 +104,8 @@ export const createRewardedAdContext = (config, window__, logger, assetLoaderSer
                 destroySlot();
                 settle({ outcome: 'no-fill' });
             }, config.timeoutMs);
-            slot.addService(pubads);
-            googletagRef.display(slot);
+            window__.googletag.display(slot);
+            window__.googletag.pubads().refresh([slot]);
         });
     });
     const hasValidWelectToken = (welectConfig) => new Promise(resolve => {

package/lib/ads/auctions/waterfallContext.js

@@ -0,0 +1,77 @@
+import { resolveAdUnitPath } from 'ad-tag/ads/adUnitPath';
+export const createOnEmptyBidRotationTrigger = () => ({
+    shouldShiftOnSlotRenderEnded: event => event.isEmpty,
+    shouldShiftOnAuctionEnd: (event, domId) => {
+        const bids = event.bidsReceived?.filter(bid => bid.adUnitCode === domId);
+        return (bids?.length ?? 0) === 0;
+    }
+});
+export const createWaterfallContext = (sessionStorageKey, config, rotationTrigger, window__, now, logger, logLabel) => {
+    const sessionStorageTimeToLive = config.ttlStorage ?? 30 * 60 * 1000;
+    const currentTime = now();
+    let resolvedAdUnitPath = config.adUnitPath;
+    let currentState = {
+        priority: config.priority,
+        updatedAt: currentTime
+    };
+    try {
+        const sessionState = window__.sessionStorage.getItem(sessionStorageKey);
+        if (sessionState) {
+            const parsedState = JSON.parse(sessionState);
+            if (currentTime - parsedState.updatedAt < sessionStorageTimeToLive) {
+                currentState = parsedState;
+            }
+            else {
+                currentState.updatedAt = currentTime;
+            }
+        }
+    }
+    catch (e) {
+        logger.error(logLabel, 'failed to load waterfall state from session storage', e);
+    }
+    if (config.priority.length === 0) {
+        logger.error(logLabel, 'no waterfall priority configured');
+    }
+    const persistState = () => {
+        currentState.updatedAt = now();
+        try {
+            window__.sessionStorage.setItem(sessionStorageKey, JSON.stringify(currentState));
+        }
+        catch (e) {
+            logger.error(logLabel, 'failed to persist waterfall state to session storage', e);
+        }
+    };
+    const shiftPriority = (arr) => {
+        if (arr.length === 0) {
+            return [];
+        }
+        return [...arr.slice(1), arr[0]];
+    };
+    const onSlotRenderEnded = (event) => {
+        if (event.slot.getAdUnitPath() !== resolvedAdUnitPath) {
+            return;
+        }
+        if (rotationTrigger.shouldShiftOnSlotRenderEnded(event)) {
+            currentState.priority = shiftPriority(currentState.priority);
+            persistState();
+        }
+    };
+    const onAuctionEnd = (event) => {
+        if (!event.adUnitCodes.includes(config.domId)) {
+            return;
+        }
+        if (rotationTrigger.shouldShiftOnAuctionEnd(event, config.domId)) {
+            currentState.priority = shiftPriority(currentState.priority);
+            persistState();
+        }
+    };
+    return {
+        state: () => currentState,
+        channel: () => currentState.priority[0],
+        updateAdUnitPaths: (variables) => {
+            resolvedAdUnitPath = resolveAdUnitPath(config.adUnitPath, variables);
+        },
+        onSlotRenderEnded,
+        onAuctionEnd
+    };
+};

package/lib/ads/globalAuctionContext.js

@@ -4,6 +4,7 @@ import { createFrequencyCapping } from './auctions/frequencyCapping';
 import { createPreviousBidCpms } from './auctions/previousBidCpms';
 import { mkConfigureStep } from './adPipeline';
 import { createInterstitialContext } from 'ad-tag/ads/auctions/interstitialContext';
+import { createAnchorContext } from 'ad-tag/ads/auctions/anchorContext';
 import { createRewardedAdContext } from 'ad-tag/ads/auctions/rewardedAdContext';
 import { createTrackWinningBidder } from 'ad-tag/ads/auctions/trackWinningBidder';
 import { resolveOverridableConfig } from 'ad-tag/ads/configOverrides';
@@ -25,6 +26,9 @@ export const createGlobalAuctionContext = (window, logger, eventService, config
     const frequencyCapConfig = resolveFeature(config.frequencyCap, 'frequencyCap');
     const previousBidCpmsConfig = resolveFeature(config.previousBidCpms, 'previousBidCpms');
     const interstitialConfig = resolveFeature(config.interstitial, 'interstitial');
+    const anchorBottomMobileConfig = resolveFeature(config.anchorBottomMobile, 'anchorBottomMobile');
+    const anchorBottomDesktopConfig = resolveFeature(config.anchorBottomDesktop, 'anchorBottomDesktop');
+    const anchorTopConfig = resolveFeature(config.anchorTop, 'anchorTop');
     const rewardedAdConfig = resolveFeature(config.rewardedAd, 'rewardedAd');
     const trackWinningBidder = trackWinningBidderConfig?.enabled
         ? createTrackWinningBidder()
@@ -42,6 +46,16 @@ export const createGlobalAuctionContext = (window, logger, eventService, config
     const interstitial = interstitialConfig?.enabled
         ? createInterstitialContext(interstitialConfig, window, window.Date.now, logger)
         : undefined;
+    const anchorEnabled = !!anchorBottomMobileConfig?.enabled ||
+        !!anchorBottomDesktopConfig?.enabled ||
+        !!anchorTopConfig?.enabled;
+    const anchor = anchorEnabled
+        ? createAnchorContext({
+            bottomMobile: anchorBottomMobileConfig?.enabled ? anchorBottomMobileConfig : undefined,
+            bottomDesktop: anchorBottomDesktopConfig?.enabled ? anchorBottomDesktopConfig : undefined,
+            top: anchorTopConfig?.enabled ? anchorTopConfig : undefined
+        }, window, window.Date.now, logger)
+        : undefined;
     const rewardedAd = rewardedAdConfig?.enabled
         ? createRewardedAdContext(rewardedAdConfig, window, logger, assetLoaderService)
         : undefined;
@@ -51,11 +65,13 @@ export const createGlobalAuctionContext = (window, logger, eventService, config
     if (biddersDisablingConfig?.enabled ||
         previousBidCpmsConfig?.enabled ||
         frequencyCapConfig?.enabled ||
-        interstitialConfig?.enabled) {
+        interstitialConfig?.enabled ||
+        anchorEnabled) {
         window.pbjs.que.push(() => {
             window.pbjs.onEvent('auctionEnd', auction => {
                 biddersDisabling?.onAuctionEnd(auction);
                 interstitial?.onAuctionEnd(auction);
+                anchor?.onAuctionEnd(auction);
                 if (previousBidCpmsConfig?.enabled && auction.bidsReceived) {
                     previousBidCpms?.onAuctionEnd(auction.bidsReceived);
                 }
@@ -91,11 +107,12 @@ export const createGlobalAuctionContext = (window, logger, eventService, config
             frequencyCapping?.afterRequestAds();
         });
     }
-    if (frequencyCapConfig?.enabled || interstitialConfig?.enabled) {
+    if (frequencyCapConfig?.enabled || interstitialConfig?.enabled || anchorEnabled) {
         window.googletag.cmd.push(() => {
             window.googletag.pubads().addEventListener('slotRenderEnded', event => {
                 frequencyCapping?.onSlotRenderEnded(event);
                 interstitial?.onSlotRenderEnded(event);
+                anchor?.onSlotRenderEnded(event);
             });
             window.googletag.pubads().addEventListener('impressionViewable', event => {
                 frequencyCapping?.onImpressionViewable(event);
@@ -105,6 +122,7 @@ export const createGlobalAuctionContext = (window, logger, eventService, config
     const configureStep = mkConfigureStep('GlobalAuctionContext', context => {
         frequencyCapping?.updateAdUnitPaths(context.adUnitPathVariables__);
         interstitial?.updateAdUnitPaths(context.adUnitPathVariables__);
+        anchor?.updateAdUnitPaths(context.adUnitPathVariables__);
         rewardedAd?.updateAdUnitPaths(context.adUnitPathVariables__);
         return Promise.resolve();
     });
@@ -128,6 +146,12 @@ export const createGlobalAuctionContext = (window, logger, eventService, config
         interstitialChannel: () => {
             return interstitial?.interstitialChannel();
         },
+        anchorBottomChannel: (domId) => {
+            return anchor?.anchorBottomChannel(domId);
+        },
+        anchorTopChannel: () => {
+            return anchor?.anchorTopChannel();
+        },
         rewardedAd: () => {
             return rewardedAd?.requestRewardedAd() ?? Promise.resolve({ state: 'empty' });
         },

package/lib/ads/googleAdManager.js

@@ -5,7 +5,7 @@ import { AssetLoadMethod } from '../util/assetLoaderService';
 import { tcfapi } from '../types/tcfapi';
 import { createTestSlots } from '../util/test-slots';
 import { resolveAdUnitPath } from './adUnitPath';
-import { formatKey, CUSTOM_INTERSTITIAL_FORMAT } from './keyValues';
+import { formatKey, CUSTOM_INTERSTITIAL_FORMAT, CUSTOM_ANCHOR_BOTTOM_FORMAT, CUSTOM_ANCHOR_TOP_FORMAT } from './keyValues';
 const testAdSlot = (domId, adUnitPath) => ({
     setCollapseEmptyDiv() {
         return;
@@ -38,6 +38,11 @@ const testAdSlot = (domId, adUnitPath) => ({
         return;
     }
 });
+const setCustomAnchorFormatTargeting = (adSlot, channel, customFormat) => {
+    if (channel === 'c') {
+        adSlot.setTargeting(formatKey, customFormat);
+    }
+};
 const configureTargeting = (window, runtimeKeyValues, serverSideTargeting) => {
     const staticKeyValues = serverSideTargeting ? serverSideTargeting.keyValues : {};
     const excludes = serverSideTargeting?.adManagerExcludes ?? [];
@@ -231,6 +236,21 @@ export const gptDefineSlots = () => (context, slots) => {
                 context.window__.document.body.appendChild(slot);
             }
         };
+        const defineAnchorSlot = (channel, outOfPageFormat) => {
+            switch (channel) {
+                case 'gam':
+                    return [
+                        context.window__.googletag.defineOutOfPageSlot(resolvedAdUnitPath, outOfPageFormat),
+                        outOfPageFormat
+                    ];
+                case 'c':
+                default:
+                    return [
+                        context.window__.googletag.defineSlot(resolvedAdUnitPath, sizes, moliSlot.domId),
+                        null
+                    ];
+            }
+        };
         const defineAdSlot = () => {
             switch (moliSlot.position) {
                 case 'in-page':
@@ -276,6 +296,10 @@ export const gptDefineSlots = () => (context, slots) => {
                         context.window__.googletag.defineOutOfPageSlot(resolvedAdUnitPath, context.window__.googletag.enums.OutOfPageFormat.TOP_ANCHOR),
                         context.window__.googletag.enums.OutOfPageFormat.TOP_ANCHOR
                     ];
+                case 'anchor-bottom':
+                    return defineAnchorSlot(context.auction__.anchorBottomChannel(moliSlot.domId), context.window__.googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR);
+                case 'anchor-top':
+                    return defineAnchorSlot(context.auction__.anchorTopChannel(), context.window__.googletag.enums.OutOfPageFormat.TOP_ANCHOR);
             }
         };
         const defineAndDisplayAdSlot = () => {
@@ -292,6 +316,12 @@ export const gptDefineSlots = () => (context, slots) => {
                         adSlot.setTargeting(formatKey, CUSTOM_INTERSTITIAL_FORMAT);
                     }
                 }
+                else if (moliSlot.position === 'anchor-bottom') {
+                    setCustomAnchorFormatTargeting(adSlot, context.auction__.anchorBottomChannel(moliSlot.domId), CUSTOM_ANCHOR_BOTTOM_FORMAT);
+                }
+                else if (moliSlot.position === 'anchor-top') {
+                    setCustomAnchorFormatTargeting(adSlot, context.auction__.anchorTopChannel(), CUSTOM_ANCHOR_TOP_FORMAT);
+                }
                 else {
                     adSlot.setConfig({ targeting: { [formatKey]: null } });
                 }

package/lib/ads/keyValues.js

@@ -1,2 +1,4 @@
 export const formatKey = 'f';
 export const CUSTOM_INTERSTITIAL_FORMAT = '100';
+export const CUSTOM_ANCHOR_BOTTOM_FORMAT = '101';
+export const CUSTOM_ANCHOR_TOP_FORMAT = '102';

package/lib/ads/prebid.js

@@ -8,6 +8,7 @@ import { AssetLoadMethod } from '../util/assetLoaderService';
 import { packageJson } from 'ad-tag/gen/packageJson';
 import { prebidOutstreamRenderer } from 'ad-tag/ads/prebid-outstream';
 import { isGamInterstitial } from 'ad-tag/ads/auctions/interstitialContext';
+import { isGamAnchor } from 'ad-tag/ads/auctions/anchorContext';
 import { criteoEnrichWithFpd } from 'ad-tag/ads/criteo';
 import { enrichId5WithFpd } from 'ad-tag/ads/id5';
 const prebidTimeout = (context) => {
@@ -257,13 +258,24 @@ export const prebidPrepareRequestAds = (prebidConfig) => mkPrepareRequestAdsStep
         resolve();
     }
 }));
+const isGamAnchorChannel = ({ moliSlot }, context) => {
+    switch (moliSlot.position) {
+        case 'anchor-bottom':
+            return context.auction__.anchorBottomChannel(moliSlot.domId) === 'gam';
+        case 'anchor-top':
+            return context.auction__.anchorTopChannel() === 'gam';
+        default:
+            return false;
+    }
+};
 export const prebidRequestBids = (prebidConfig, adServer) => mkRequestBidsStep('prebid-request-bids', (context, slots) => {
     const failsafeTimeout = Math.max((prebidConfig.config.bidderTimeout ?? 2000) + 3000, prebidConfig.failsafeTimeout ?? 0);
     const failsafe = new Promise(resolve => context.window__.setTimeout(resolve, failsafeTimeout));
     const auction = new Promise(resolve => {
         const slotsToRefresh = slots.filter(slot => !context.auction__.isSlotThrottled(slot.adSlot) &&
             (!isGamInterstitial(slot.adSlot, context.window__) ||
-                context.auction__.interstitialChannel() !== 'gam'));
+                context.auction__.interstitialChannel() !== 'gam') &&
+            (!isGamAnchor(slot.adSlot, context.window__) || !isGamAnchorChannel(slot, context)));
         const requestObject = prebidConfig.ephemeralAdUnits
             ? {
                 adUnits: createdAdUnits(context, prebidConfig, slotsToRefresh)

package/lib/gen/packageJson.js

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

package/package.json

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