@highfivve/ad-tag 5.11.6 → 5.11.8

package/lib/ads/adPipeline.js

@@ -5,6 +5,7 @@ var TCPurpose = tcfapi.responses.TCPurpose;
 import { generateAdUnitPathVariables } from './adUnitPath';
 import { createAssetLoaderService } from '../util/assetLoaderService';
 import { uuidV4 } from '../util/uuid';
+import { getMoliLabelsFromQueryParam, getMoliLabelsFromStorage } from '../util/debugLabels';
 export const HIGH_PRIORITY = 100;
 export const LOW_PRIORITY = 10;
 export const mkInitStep = (name, fn) => {
@@ -83,7 +84,12 @@ export class AdPipeline {
             ? this.tcData
             : consentReady(consentConfig, this.window, this.logger, runtimeConfig.environment);
         return this.tcData.then(consentData => {
-            const extraLabels = [...(config.targeting?.labels || []), ...runtimeConfig.labels];
+            const extraLabels = [
+                ...(config.targeting?.labels || []),
+                ...runtimeConfig.labels,
+                ...getMoliLabelsFromQueryParam(this.window),
+                ...getMoliLabelsFromStorage(this.window)
+            ];
             if (consentData.gdprApplies &&
                 consentData.purpose.consents[TCPurpose.STORE_INFORMATION_ON_DEVICE]) {
                 extraLabels.push('purpose-1');

package/lib/console/components/globalConfig.js

@@ -21,6 +21,7 @@ import { BrowserStorageKeys } from 'ad-tag/util/browserStorageKeys';
 import { calculateAdDensity } from 'ad-tag/console/util/calculateAdDensity';
 import { extractPositionFromPath } from 'ad-tag/console/util/extractPositionFromPath';
 import { getBrowserStorageValue, removeBrowserStorageValue, setBrowserStorageValue } from 'ad-tag/util/localStorage';
+import { addMoliLabelToStorage, clearMoliLabelsFromStorage, getMoliLabelsFromStorage, removeMoliLabelFromStorage } from 'ad-tag/util/debugLabels';
 const debugSidebarSelector = 'moli-debug-sidebar';
 export class GlobalConfig extends Component {
     constructor(props) {
@@ -75,6 +76,7 @@ export class GlobalConfig extends Component {
                         React.createElement(TagLabel, null, "Test mode"),
                         React.createElement(Toggle, { checked: isTestMode, title: isTestMode ? 'Switch back to production mode' : 'Override environment to test', onChange: checked => checked ? this.overrideEnvironmentToTest() : this.resetEnvironmentOverrides() }),
                         isTestMode && !isEnvironmentOverridden && (React.createElement(Tag, { variant: "yellow" }, "test environment set in config")))),
+                React.createElement(Block, { title: "Debug Labels", color: "debugLabels" }, this.renderDebugLabels()),
                 React.createElement(Block, { title: "Targeting", color: "targeting" },
                     config.targeting && (React.createElement("div", null,
                         React.createElement(SubHeadline, null, "Key/value pairs"),
@@ -100,6 +102,34 @@ export class GlobalConfig extends Component {
                             React.createElement("div", { className: "text-xs font-semibold opacity-60" }, this.requestedSizesLabel(slot))),
                         React.createElement("button", { className: "d-btn d-btn-ghost d-btn-sm font-normal normal-case", title: "Open in Ad Setup", onClick: () => this.openSlotInAdSetup(slot.domId) }, "details")))))))));
         };
+        this.renderDebugLabels = () => {
+            const debugLabels = getMoliLabelsFromStorage(window);
+            return (React.createElement("div", null,
+                this.labels(debugLabels, {
+                    onRemove: this.removeDebugLabel,
+                    emptyMessage: 'No debug labels set.'
+                }),
+                React.createElement(TagContainer, null,
+                    React.createElement(TextInput, { placeholder: "label", value: this.state.newDebugLabel, onChange: e => this.setState({ newDebugLabel: e.currentTarget.value }) }),
+                    React.createElement(Btn, { onClick: () => this.addDebugLabel(this.state.newDebugLabel) }, "add"),
+                    React.createElement(Btn, { variant: "red", onClick: this.clearDebugLabels, disabled: debugLabels.length === 0 }, "clear all"))));
+        };
+        this.addDebugLabel = (label) => {
+            const trimmed = label.trim();
+            if (trimmed.length === 0) {
+                return;
+            }
+            addMoliLabelToStorage(window, trimmed);
+            window.location.reload();
+        };
+        this.removeDebugLabel = (label) => {
+            removeMoliLabelFromStorage(window, label);
+            window.location.reload();
+        };
+        this.clearDebugLabels = () => {
+            clearMoliLabelsFromStorage(window);
+            window.location.reload();
+        };
         this.renderAdSetup = (config) => {
             const { modules, labelConfigService } = this.props;
             const { showOnlyRenderedSlots, selectedSlotDomId } = this.state;
@@ -374,11 +404,13 @@ export class GlobalConfig extends Component {
                             : this.standardTagFromString(value))));
                 })))) : (React.createElement("span", null, "No key/values config present."));
         };
-        this.labels = (labels) => {
+        this.labels = (labels, options) => {
             return (React.createElement("div", { className: "mt-2 flex flex-wrap items-center gap-y-1" },
                 labels &&
-                    labels.map((label, index) => (React.createElement(Tag, { key: index, variant: "grey", spacing: "medium" }, label))),
-                (!labels || labels.length === 0) && React.createElement("span", null, "No labels present.")));
+                    labels.map((label, index) => (React.createElement(Tag, { key: index, variant: "grey", spacing: "medium" },
+                        label,
+                        options?.onRemove && (React.createElement("button", { className: "ml-1 border-0 bg-transparent p-0 font-bold", title: `Remove ${label}`, onClick: () => options.onRemove(label) }, "\u2715"))))),
+                (!labels || labels.length === 0) && (React.createElement("span", null, options?.emptyMessage ?? 'No labels present.'))));
         };
         this.filterSetting = (name, filterSetting) => {
             return (React.createElement("div", null,
@@ -505,7 +537,8 @@ export class GlobalConfig extends Component {
                 totalAdDensity: undefined,
                 percentagePerSlot: []
             },
-            configVersion: 'not available'
+            configVersion: 'not available',
+            newDebugLabel: ''
         };
         if (!props.config) {
             this.reportMissingConfig(this.state.messages);

package/lib/console/components/ui.js

@@ -4,6 +4,7 @@ const sectionAccent = {
     moli: 'border-l-[#998fc7]',
     slots: 'border-l-[#506684]',
     targeting: 'border-l-[#998fc7]',
+    debugLabels: 'border-l-[#b6e388]',
     sizeConfig: 'border-l-[#d4c2fc]',
     modules: 'border-l-[#8a7de0]',
     prebid: 'border-l-[#76949f]',

package/lib/gen/packageJson.js

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

package/lib/util/browserStorageKeys.js

@@ -6,5 +6,6 @@ export const BrowserStorageKeys = {
     moliConsoleTheme: 'moli-console-theme',
     testSlotSize: (id) => `moli-test-slot-size-${id}`,
     debugDelay: 'moli-debug-delay',
-    abTest: 'moli-ab-test'
+    abTest: 'moli-ab-test',
+    moliLabels: 'moli-labels'
 };

package/lib/util/debugLabels.js

@@ -0,0 +1,40 @@
+import { parseQueryString } from './query';
+import { getBrowserStorageValue, removeBrowserStorageValue, setBrowserStorageValue } from './localStorage';
+import { QueryParameters } from './queryParameters';
+import { BrowserStorageKeys } from './browserStorageKeys';
+export const getMoliLabelsFromQueryParam = (window) => {
+    try {
+        return (parseQueryString(window.location.search).get(QueryParameters.moliLabels) ?? '')
+            .split(',')
+            .map(label => label.trim())
+            .filter(label => label.length > 0);
+    }
+    catch (e) {
+        return [];
+    }
+};
+const isStringArray = (value) => Array.isArray(value) && value.every(entry => typeof entry === 'string');
+export const getMoliLabelsFromStorage = (window) => {
+    try {
+        const raw = getBrowserStorageValue(BrowserStorageKeys.moliLabels, window.localStorage);
+        if (!raw) {
+            return [];
+        }
+        const parsed = JSON.parse(raw);
+        return isStringArray(parsed) ? parsed : [];
+    }
+    catch (e) {
+        return [];
+    }
+};
+export const addMoliLabelToStorage = (window, label) => {
+    const labels = [...getMoliLabelsFromStorage(window), label];
+    setBrowserStorageValue(BrowserStorageKeys.moliLabels, JSON.stringify(labels), window.localStorage);
+};
+export const removeMoliLabelFromStorage = (window, label) => {
+    const labels = getMoliLabelsFromStorage(window).filter(entry => entry !== label);
+    setBrowserStorageValue(BrowserStorageKeys.moliLabels, JSON.stringify(labels), window.localStorage);
+};
+export const clearMoliLabelsFromStorage = (window) => {
+    removeBrowserStorageValue(BrowserStorageKeys.moliLabels, window.localStorage);
+};

package/lib/util/queryParameters.js

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

package/package.json

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