@highfivve/ad-tag 5.11.3 → 5.11.5

package/lib/ads/bridge/bridge.js

@@ -1,9 +1,6 @@
 import { mkInitStep } from 'ad-tag/ads/adPipeline';
 import { isPlainObject } from 'ad-tag/util/objectUtils';
-const findAdSlot = (message, googletag) => googletag
-    .pubads()
-    .getSlots()
-    .find(slot => slot.getSlotElementId() === message.domId || slot.getAdUnitPath() === message.adUnitPath);
+import { findGoogletagSlot } from 'ad-tag/ads/findGoogletagSlot';
 const parseMessageData = (data) => {
     try {
         const message = typeof data === 'string' ? JSON.parse(data) : isPlainObject(data) ? data : null;
@@ -22,7 +19,7 @@ const parseMessageData = (data) => {
 };
 const handleRefresh = (message, context) => {
     const backfillMoliSlot = context.config__.slots.find(slot => slot.domId === message.domId && slot.behaviour.loaded === 'backfill');
-    const adSlot = findAdSlot(message, context.window__.googletag);
+    const adSlot = findGoogletagSlot(message, context.window__.googletag);
     if (backfillMoliSlot && adSlot) {
         context.logger__.debug('bridge', `Refresh ad slot ${message.domId}`);
         context.window__.googletag.destroySlots([adSlot]);
@@ -32,7 +29,7 @@ const handleRefresh = (message, context) => {
     }
 };
 const handlePassback = (message, context) => {
-    const adSlot = findAdSlot(message, context.window__.googletag);
+    const adSlot = findGoogletagSlot(message, context.window__.googletag);
     const passbackKey = 'passback';
     if (adSlot && adSlot.getTargeting(passbackKey).length === 0) {
         context.logger__.debug('passback', `Process passback for ad slot ${adSlot.getAdUnitPath()}`);

package/lib/ads/findGoogletagSlot.js

@@ -0,0 +1,9 @@
+export const findGoogletagSlot = (reference, googletag) => googletag
+    .pubads()
+    .getSlots()
+    .find(slot => {
+    const slotDomId = slot.getSlotElementId();
+    const slotAdUnitPath = slot.getAdUnitPath();
+    return ((!!reference.domId && !!slotDomId && slotDomId === reference.domId) ||
+        (!!reference.adUnitPath && !!slotAdUnitPath && slotAdUnitPath === reference.adUnitPath));
+});

package/lib/ads/modules/ad-reload/adVisibilityService.js

@@ -1,4 +1,6 @@
 import { isAdvertiserIncluded } from 'ad-tag/ads/isAdvertiserIncluded';
+import { formatKey } from 'ad-tag/ads/keyValues';
+import { asViewabilityOverrideEntryList, resolveViewabilityOverride } from './viewabilityOverride';
 export class AdVisibilityService {
     constructor(userActivityService, refreshInterval, refreshIntervalOverrides, useIntersectionObserver, disableAdVisibilityChecks, viewabilityOverrides, window, logger) {
         this.userActivityService = userActivityService;
@@ -12,10 +14,10 @@ export class AdVisibilityService {
         this.isSlotTracked = (domId) => this.visibilityRecords.has(domId);
         this.removeSlotTracking = (slot) => {
             this.logger?.debug('AdVisibilityService', `removing slot visibility tracking for ${slot.getSlotElementId()}`, slot);
+            const record = this.visibilityRecords.get(slot.getSlotElementId());
             this.visibilityRecords.delete(slot.getSlotElementId());
-            const observedSlot = this.observedDomElementForSlot(slot);
-            if (this.intersectionObserver && observedSlot) {
-                this.intersectionObserver.unobserve(observedSlot.target);
+            if (this.intersectionObserver && record) {
+                this.intersectionObserver.unobserve(record.target);
             }
         };
         this.handleGoogletagAdVisibilityChanged = (event) => {
@@ -45,7 +47,7 @@ export class AdVisibilityService {
         this.minimalAdVisibilityRatio = disableAdVisibilityChecks ? 0 : 0.5;
         this.visibilityRecords = new Map();
         const requiredIntersectionObserver = (useIntersectionObserver ||
-            Object.values(viewabilityOverrides).some(entry => entry?.variant === 'css')) &&
+            Object.values(viewabilityOverrides).some(entryOrList => asViewabilityOverrideEntryList(entryOrList).some(entry => entry.variant === 'css'))) &&
             'IntersectionObserver' in this.window;
         if (requiredIntersectionObserver) {
             this.intersectionObserver = new this.window.IntersectionObserver(entries => this.handleObservedAdVisibilityChanged(entries), { threshold: this.minimalAdVisibilityRatio });
@@ -72,6 +74,7 @@ export class AdVisibilityService {
             const override = domElement.viewabilityOverride;
             this.visibilityRecords.set(slot.getSlotElementId(), {
                 slot: slot,
+                target: domElement.target,
                 latestStartVisible: this.disableAdVisibilityChecks ||
                     (override?.variant === 'disabled' &&
                         (override.disableAllAdVisibilityChecks ||
@@ -153,7 +156,8 @@ export class AdVisibilityService {
     }
     observedDomElementForSlot(slot) {
         const slotDomId = slot.getSlotElementId();
-        const viewabilityOverride = this.viewabilityOverrides[slotDomId];
+        const [liveFormat] = slot.getTargeting(formatKey);
+        const viewabilityOverride = resolveViewabilityOverride(asViewabilityOverrideEntryList(this.viewabilityOverrides[slotDomId]), liveFormat);
         const adSlotElement = this.window.document.getElementById(slotDomId);
         const overrideElement = viewabilityOverride && viewabilityOverride.variant === 'css'
             ? this.window.document.querySelector(viewabilityOverride.cssSelector)

package/lib/ads/modules/ad-reload/index.js

@@ -3,6 +3,8 @@ import { UserActivityService } from './userActivityService';
 import { mkConfigureStep } from '../../adPipeline';
 import { isNotNull } from 'ad-tag/util/arrayUtils';
 import { isAdvertiserIncluded } from 'ad-tag/ads/isAdvertiserIncluded';
+import { formatKey } from 'ad-tag/ads/keyValues';
+import { asViewabilityOverrideEntryList, resolveViewabilityOverride } from './viewabilityOverride';
 export const createAdReload = () => {
     const name = 'moli-ad-reload';
     const defaultRefreshIntervalMs = 20000;
@@ -63,8 +65,9 @@ export const createAdReload = () => {
             const sizesOverride = maybeOptimizeSlotForCls(config, moliSlot, googleTagSlot, ctx.logger__, ctx.window__);
             googleTagSlot.setTargeting(reloadKeyValue, 'true');
             const getBucketAndLoadingBehaviour = () => {
-                const bucketOverride = config.viewabilityOverrides?.[slotId]?.refreshBucket;
-                if (bucketOverride === true) {
+                const [liveFormat] = googleTagSlot.getTargeting(formatKey);
+                const matchedOverride = resolveViewabilityOverride(asViewabilityOverrideEntryList(config.viewabilityOverrides?.[slotId]), liveFormat);
+                if (matchedOverride?.refreshBucket === true) {
                     const loaded = moliSlot.behaviour.loaded;
                     const bucket = moliSlot.behaviour.bucket;
                     const bucketName = typeof bucket === 'string'

package/lib/ads/modules/ad-reload/viewabilityOverride.js

@@ -0,0 +1,3 @@
+export const asViewabilityOverrideEntryList = (entryOrList) => entryOrList === undefined ? [] : Array.isArray(entryOrList) ? entryOrList : [entryOrList];
+export const isViewabilityOverrideConditionMatch = (conditions, liveFormat) => !conditions || conditions.format === undefined || conditions.format === liveFormat;
+export const resolveViewabilityOverride = (entries, liveFormat) => entries.find(entry => isViewabilityOverrideConditionMatch(entry.conditions, liveFormat));

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

@@ -1,4 +1,6 @@
-import { mkPrepareRequestAdsStep, HIGH_PRIORITY, mkConfigureStepOncePerRequestAdsCycle } from 'ad-tag/ads/adPipeline';
+import { mkPrepareRequestAdsStep, HIGH_PRIORITY, mkConfigureStep, mkConfigureStepOncePerRequestAdsCycle } from 'ad-tag/ads/adPipeline';
+import { resolveAdUnitPath } from 'ad-tag/ads/adUnitPath';
+import { findGoogletagSlot } from 'ad-tag/ads/findGoogletagSlot';
 export const createCleanup = () => {
     const name = 'cleanup';
     let cleanupConfig = null;
@@ -25,7 +27,7 @@ export const createCleanup = () => {
                     });
                 });
             }
-            else {
+            else if ('jsAsString' in config.deleteMethod) {
                 config.deleteMethod.jsAsString.forEach(jsLineAsString => {
                     try {
                         context.logger__.debug('Cleanup Module', `Try to execute string as JS: '${jsLineAsString}'`);
@@ -37,9 +39,30 @@ export const createCleanup = () => {
                     }
                 });
             }
+            else if ('destroySlot' in config.deleteMethod) {
+                let resolvedAdUnitPath;
+                try {
+                    resolvedAdUnitPath = resolveAdUnitPath(config.deleteMethod.adUnitPath, context.adUnitPathVariables__);
+                }
+                catch (e) {
+                    context.logger__.error('Cleanup Module', `failed to resolve adUnitPath '${config.deleteMethod.adUnitPath}' for domId ${config.domId}, skipping`, e);
+                    return;
+                }
+                const googleTagSlot = findGoogletagSlot({ domId: config.domId, adUnitPath: resolvedAdUnitPath }, context.window__.googletag);
+                if (googleTagSlot) {
+                    context.logger__.debug('Cleanup Module', `destroying stale gam slot for domId ${config.domId}`, googleTagSlot);
+                    context.window__.googletag.destroySlots([googleTagSlot]);
+                }
+                else {
+                    context.logger__.debug('Cleanup Module', `no gam slot found for domId ${config.domId} / adUnitPath ${resolvedAdUnitPath}, nothing to destroy`);
+                }
+            }
         });
     };
     const hasBidderWonLastAuction = (context, config) => {
+        if (!config.bidder) {
+            return true;
+        }
         const prebidWinningBids = context.window__.pbjs.getAllWinningBids();
         const bidderThatWonLastAuctionOnSlot = prebidWinningBids
             .filter(bid => bid.adUnitCode === config.domId)
@@ -55,10 +78,20 @@ export const createCleanup = () => {
                         return Promise.resolve();
                     }
                     context.window__.pbjs.que.push(() => {
-                        const configsOfDomIdsThatNeedToBeCleaned = config.configs.filter(config => hasBidderWonLastAuction(context, config));
+                        const configsOfDomIdsThatNeedToBeCleaned = config.configs.filter(config => !('destroySlot' in config.deleteMethod) &&
+                            hasBidderWonLastAuction(context, config));
                         cleanUp(context, configsOfDomIdsThatNeedToBeCleaned);
                     });
                     return Promise.resolve();
+                }),
+                mkConfigureStep('destroy-stale-gam-slot-before-redefine', (context, slots) => {
+                    if (context.runtimeConfig__.environment === 'test') {
+                        return Promise.resolve();
+                    }
+                    const domIdsThisCycle = slots.map(slot => slot.domId);
+                    const configsToDestroy = config.configs.filter(config => 'destroySlot' in config.deleteMethod && domIdsThisCycle.includes(config.domId));
+                    cleanUp(context, configsToDestroy);
+                    return Promise.resolve();
                 })
             ]
             : [];
@@ -74,6 +107,7 @@ export const createCleanup = () => {
                     context.window__.pbjs.que.push(() => {
                         const configsOfDomIdsThatNeedToBeCleaned = config.configs
                             .filter(config => slots.map(slot => slot.moliSlot.domId).includes(config.domId))
+                            .filter(config => !('destroySlot' in config.deleteMethod))
                             .filter(config => hasBidderWonLastAuction(context, config));
                         cleanUp(context, configsOfDomIdsThatNeedToBeCleaned);
                     });

package/lib/console/components/moduleConfigs.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { Tag, TagLabel } from './tag';
 import { SubHeadline, TagContainer } from './ui';
+import { asViewabilityOverrideEntryList } from 'ad-tag/ads/modules/ad-reload/viewabilityOverride';
 const BoolTag = ({ value, trueLabel, falseLabel }) => (React.createElement(Tag, { variant: value ? 'green' : 'grey' }, value ? (trueLabel ?? 'yes') : (falseLabel ?? 'no')));
 const Row = ({ label, subEntry, children }) => (React.createElement(TagContainer, { subEntry: subEntry },
     React.createElement(TagLabel, null, label),
@@ -70,12 +71,15 @@ const AdReloadModule = ({ config }) => (React.createElement(React.Fragment, null
                     "ms")))))))))),
     config.viewabilityOverrides && Object.keys(config.viewabilityOverrides).length > 0 && (React.createElement(React.Fragment, null,
         React.createElement(SubHeadline, null, "Viewability overrides"),
-        Object.entries(config.viewabilityOverrides).map(([domId, override]) => (React.createElement(Row, { key: domId, label: domId, subEntry: true },
-            override?.variant === 'css' && React.createElement(Tag, { variant: "grey" },
+        Object.entries(config.viewabilityOverrides).flatMap(([domId, entryOrList]) => asViewabilityOverrideEntryList(entryOrList).map((override, index) => (React.createElement(Row, { key: `${domId}-${index}`, label: index === 0 ? domId : '', subEntry: true },
+            override.conditions?.format && (React.createElement(Tag, { variant: "blue" },
+                "format: ",
+                override.conditions.format)),
+            override.variant === 'css' && React.createElement(Tag, { variant: "grey" },
                 "css: ",
                 override.cssSelector),
-            override?.variant === 'disabled' && React.createElement(Tag, { variant: "yellow" }, "checks disabled"),
-            override?.refreshBucket && React.createElement(Tag, { variant: "yellow" }, "refreshes bucket"))))))));
+            override.variant === 'disabled' && React.createElement(Tag, { variant: "yellow" }, "checks disabled"),
+            override.refreshBucket && React.createElement(Tag, { variant: "yellow" }, "refreshes bucket")))))))));
 const BlocklistModule = ({ config }) => (React.createElement(React.Fragment, null,
     React.createElement(Row, { label: "Mode" },
         React.createElement(Tag, { variant: config.mode === 'block' ? 'red' : 'yellow' }, config.mode)),
@@ -95,13 +99,15 @@ const BlocklistModule = ({ config }) => (React.createElement(React.Fragment, nul
 const CleanupModule = ({ config }) => (React.createElement(React.Fragment, null,
     config.configs.length === 0 && React.createElement("i", null, "No cleanup configs"),
     config.configs.map((cleanupConfig, index) => (React.createElement(Row, { key: index, label: cleanupConfig.domId },
-        React.createElement(Tag, { variant: "blue" }, cleanupConfig.bidder),
+        cleanupConfig.bidder && React.createElement(Tag, { variant: "blue" }, cleanupConfig.bidder),
         'cssSelectors' in cleanupConfig.deleteMethod ? (React.createElement(Tag, { variant: "grey" },
             "css: ",
-            cleanupConfig.deleteMethod.cssSelectors.join(', '))) : (React.createElement(Tag, { variant: "yellow" },
+            cleanupConfig.deleteMethod.cssSelectors.join(', '))) : 'jsAsString' in cleanupConfig.deleteMethod ? (React.createElement(Tag, { variant: "yellow" },
             "JS snippet (",
             cleanupConfig.deleteMethod.jsAsString.length,
-            ")")))))));
+            ")")) : (React.createElement(Tag, { variant: "yellow" },
+            "destroy GAM slot: ",
+            cleanupConfig.deleteMethod.adUnitPath)))))));
 const CustomModule = ({ config }) => (React.createElement(React.Fragment, null,
     React.createElement(Row, { label: "Inline JS" }, config.inlineJs ? (React.createElement(Tag, { variant: "yellow" },
         config.inlineJs.code.length,

package/lib/gen/packageJson.js

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

package/package.json

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