@guardian/commercial-core 4.0.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/ad-sizes.d.ts +37 -22
  2. package/dist/cjs/ad-sizes.js +95 -7
  3. package/dist/cjs/create-ad-slot.js +11 -86
  4. package/dist/cjs/index.d.ts +3 -2
  5. package/dist/cjs/index.js +4 -1
  6. package/dist/esm/ad-sizes.d.ts +37 -22
  7. package/dist/esm/ad-sizes.js +94 -7
  8. package/dist/esm/create-ad-slot.js +12 -87
  9. package/dist/esm/index.d.ts +3 -2
  10. package/dist/esm/index.js +2 -1
  11. package/package.json +1 -1
package/dist/cjs/ad-sizes.d.ts CHANGED
@@ -1,30 +1,45 @@
1
1
  declare type AdSizeString = 'fluid' | `${number},${number}`;
2
- declare type AdSize = Readonly<{
3
- width: number;
4
- height: number;
5
- toString: () => AdSizeString;
6
- }>;
7
- declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
8
- interface SizeMapping {
9
- mobile?: AdSize[];
10
- desktop?: AdSize[];
11
- phablet?: AdSize[];
12
- tablet?: AdSize[];
13
- }
14
- interface SlotSizeMappings {
15
- right: SizeMapping;
16
- comments: SizeMapping;
17
- 'top-above-nav': SizeMapping;
18
- mostpop: SizeMapping;
19
- 'merchandising-high': SizeMapping;
20
- merchandising: SizeMapping;
21
- survey: SizeMapping;
2
+ /**
3
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
4
+ * more semantic `width`/`height` properties and keep things readonly.
5
+ *
6
+ * example:
7
+ * const size = new AdSize([300, 250]);
8
+ *
9
+ * size.width === 300; // true
10
+ * size[0] === 300; // true
11
+ *
12
+ * size.height === 250; // true
13
+ * size[1] === 250; // true
14
+ *
15
+ * size[0] = 200; // throws error
16
+ * size.width = 200; // throws error
17
+ *
18
+ */
19
+ declare class AdSize extends Array<number> {
20
+ readonly [0]: number;
21
+ readonly [1]: number;
22
+ constructor([width, height]: [number, number]);
23
+ toString(): AdSizeString;
24
+ get width(): number;
25
+ get height(): number;
22
26
  }
27
+ declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
28
+ declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
29
+ declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
30
+ declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
31
+ declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
32
+ declare const createAdSize: (width: number, height: number) => AdSize;
23
33
  declare const adSizes: Record<SizeKeys, AdSize>;
34
+ /**
35
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
36
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
37
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
38
+ **/
24
39
  declare const slotSizeMappings: SlotSizeMappings;
25
40
  declare const getAdSize: (size: SizeKeys) => AdSize;
26
41
  export declare const _: {
27
42
  createAdSize: (width: number, height: number) => AdSize;
28
43
  };
29
- export type { AdSizeString, AdSize, SizeKeys, SizeMapping };
30
- export { adSizes, getAdSize, slotSizeMappings };
44
+ export type { AdSizeString, AdSize, SizeKeys, SizeMapping, SlotSizeMappings, SlotName, };
45
+ export { adSizes, getAdSize, slotSizeMappings, createAdSize };
package/dist/cjs/ad-sizes.js CHANGED
@@ -1,14 +1,44 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports._ = void 0;
3
+ exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports._ = void 0;
4
+ /**
5
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
6
+ * more semantic `width`/`height` properties and keep things readonly.
7
+ *
8
+ * example:
9
+ * const size = new AdSize([300, 250]);
10
+ *
11
+ * size.width === 300; // true
12
+ * size[0] === 300; // true
13
+ *
14
+ * size.height === 250; // true
15
+ * size[1] === 250; // true
16
+ *
17
+ * size[0] = 200; // throws error
18
+ * size.width = 200; // throws error
19
+ *
20
+ */
21
+ class AdSize extends Array {
22
+ constructor([width, height]) {
23
+ super();
24
+ this.push(width, height);
25
+ }
26
+ toString() {
27
+ return this.width === 0 && this.height === 0
28
+ ? 'fluid'
29
+ : `${this.width},${this.height}`;
30
+ }
31
+ get width() {
32
+ return this[0];
33
+ }
34
+ get height() {
35
+ return this[1];
36
+ }
37
+ }
4
38
  const createAdSize = (width, height) => {
5
- const toString = () => width === 0 && height === 0 ? 'fluid' : `${width},${height}`;
6
- return Object.freeze({
7
- width,
8
- height,
9
- toString,
10
- });
39
+ return new AdSize([width, height]);
11
40
  };
41
+ exports.createAdSize = createAdSize;
12
42
  const adSizesPartial = {
13
43
  // standard ad sizes
14
44
  billboard: createAdSize(970, 250),
@@ -43,7 +73,37 @@ const adSizes = {
43
73
  '160x600': adSizesPartial.skyscraper,
44
74
  };
45
75
  exports.adSizes = adSizes;
76
+ /**
77
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
78
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
79
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
80
+ **/
46
81
  const slotSizeMappings = {
82
+ inline: {
83
+ mobile: [
84
+ adSizes.outOfPage,
85
+ adSizes.empty,
86
+ adSizes.outstreamMobile,
87
+ adSizes.mpu,
88
+ adSizes.googleCard,
89
+ adSizes.fluid,
90
+ ],
91
+ phablet: [
92
+ adSizes.outOfPage,
93
+ adSizes.empty,
94
+ adSizes.outstreamMobile,
95
+ adSizes.mpu,
96
+ adSizes.googleCard,
97
+ adSizes.fluid,
98
+ ],
99
+ desktop: [
100
+ adSizes.outOfPage,
101
+ adSizes.empty,
102
+ adSizes.mpu,
103
+ adSizes.googleCard,
104
+ adSizes.fluid,
105
+ ],
106
+ },
47
107
  right: {
48
108
  mobile: [
49
109
  adSizes.outOfPage,
@@ -83,6 +143,14 @@ const slotSizeMappings = {
83
143
  ],
84
144
  },
85
145
  'top-above-nav': {
146
+ mobile: [
147
+ adSizes.outOfPage,
148
+ adSizes.empty,
149
+ adSizes.fabric,
150
+ adSizes.outstreamMobile,
151
+ adSizes.mpu,
152
+ adSizes.fluid,
153
+ ],
86
154
  tablet: [
87
155
  adSizes.outOfPage,
88
156
  adSizes.empty,
@@ -136,6 +204,14 @@ const slotSizeMappings = {
136
204
  adSizes.fluid,
137
205
  ],
138
206
  },
207
+ im: {
208
+ mobile: [
209
+ adSizes.outOfPage,
210
+ adSizes.empty,
211
+ adSizes.inlineMerchandising,
212
+ adSizes.fluid,
213
+ ],
214
+ },
139
215
  'merchandising-high': {
140
216
  mobile: [
141
217
  adSizes.outOfPage,
@@ -144,6 +220,9 @@ const slotSizeMappings = {
144
220
  adSizes.fluid,
145
221
  ],
146
222
  },
223
+ 'merchandising-high-lucky': {
224
+ mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
225
+ },
147
226
  merchandising: {
148
227
  mobile: [
149
228
  adSizes.outOfPage,
@@ -155,6 +234,15 @@ const slotSizeMappings = {
155
234
  survey: {
156
235
  desktop: [adSizes.outOfPage],
157
236
  },
237
+ carrot: {
238
+ mobile: [adSizes.fluid],
239
+ },
240
+ epic: {
241
+ mobile: [adSizes.fluid],
242
+ },
243
+ 'mobile-sticky': {
244
+ mobile: [adSizes.mobilesticky],
245
+ },
158
246
  };
159
247
  exports.slotSizeMappings = slotSizeMappings;
160
248
  const getAdSize = (size) => adSizes[size];
package/dist/cjs/create-ad-slot.js CHANGED
@@ -3,134 +3,59 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.createAdSlot = void 0;
4
4
  const ad_sizes_1 = require("./ad-sizes");
5
5
  const adSlotIdPrefix = 'dfp-ad--';
6
- const commonSizeMappings = {
7
- mobile: [
8
- ad_sizes_1.adSizes.outOfPage,
9
- ad_sizes_1.adSizes.empty,
10
- ad_sizes_1.adSizes.outstreamMobile,
11
- ad_sizes_1.adSizes.mpu,
12
- ad_sizes_1.adSizes.googleCard,
13
- ad_sizes_1.adSizes.fluid,
14
- ],
15
- phablet: [
16
- ad_sizes_1.adSizes.outOfPage,
17
- ad_sizes_1.adSizes.empty,
18
- ad_sizes_1.adSizes.outstreamMobile,
19
- ad_sizes_1.adSizes.mpu,
20
- ad_sizes_1.adSizes.googleCard,
21
- ad_sizes_1.adSizes.fluid,
22
- ],
23
- desktop: [
24
- ad_sizes_1.adSizes.outOfPage,
25
- ad_sizes_1.adSizes.empty,
26
- ad_sizes_1.adSizes.mpu,
27
- ad_sizes_1.adSizes.googleCard,
28
- ad_sizes_1.adSizes.fluid,
29
- ],
30
- };
31
- /*
32
-
33
- mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
34
-
35
- The ad sizes which are hardcoded here are also hardcoded in the source code of
36
- dotcom-rendering.
37
-
38
- If/when this file is modified, please make sure that updates, if any, are reported to DCR.
39
-
40
- TODO use a map type??
41
- want to assert that values are of type AdSlotConfig
42
- */
43
6
  const adSlotConfigs = {
44
7
  im: {
45
8
  label: false,
46
9
  refresh: false,
47
- sizeMappings: {
48
- mobile: [
49
- ad_sizes_1.adSizes.outOfPage,
50
- ad_sizes_1.adSizes.empty,
51
- ad_sizes_1.adSizes.inlineMerchandising,
52
- ad_sizes_1.adSizes.fluid,
53
- ],
54
- },
10
+ sizeMappings: ad_sizes_1.slotSizeMappings['im'],
55
11
  },
56
12
  'high-merch': {
57
13
  label: false,
58
14
  refresh: false,
59
15
  name: 'merchandising-high',
60
- sizeMappings: {
61
- mobile: [
62
- ad_sizes_1.adSizes.outOfPage,
63
- ad_sizes_1.adSizes.empty,
64
- ad_sizes_1.adSizes.merchandisingHigh,
65
- ad_sizes_1.adSizes.fluid,
66
- ],
67
- },
16
+ sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
68
17
  },
69
18
  'high-merch-lucky': {
70
19
  label: false,
71
20
  refresh: false,
72
21
  name: 'merchandising-high-lucky',
73
- sizeMappings: {
74
- mobile: [ad_sizes_1.adSizes.outOfPage, ad_sizes_1.adSizes.empty, ad_sizes_1.adSizes.fluid],
75
- },
22
+ sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high-lucky'],
76
23
  },
77
24
  'high-merch-paid': {
78
25
  label: false,
79
26
  refresh: false,
80
27
  name: 'merchandising-high',
81
- sizeMappings: {
82
- mobile: [
83
- ad_sizes_1.adSizes.outOfPage,
84
- ad_sizes_1.adSizes.empty,
85
- ad_sizes_1.adSizes.merchandisingHighAdFeature,
86
- ad_sizes_1.adSizes.fluid,
87
- ],
88
- },
28
+ sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
89
29
  },
90
30
  inline: {
91
- sizeMappings: commonSizeMappings,
31
+ sizeMappings: ad_sizes_1.slotSizeMappings['inline'],
92
32
  },
93
33
  mostpop: {
94
- sizeMappings: commonSizeMappings,
34
+ sizeMappings: ad_sizes_1.slotSizeMappings['mostpop'],
95
35
  },
96
36
  comments: {
97
- sizeMappings: commonSizeMappings,
37
+ sizeMappings: ad_sizes_1.slotSizeMappings['comments'],
98
38
  },
99
39
  'top-above-nav': {
100
- sizeMappings: {
101
- mobile: [
102
- ad_sizes_1.adSizes.outOfPage,
103
- ad_sizes_1.adSizes.empty,
104
- ad_sizes_1.adSizes.fabric,
105
- ad_sizes_1.adSizes.outstreamMobile,
106
- ad_sizes_1.adSizes.mpu,
107
- ad_sizes_1.adSizes.fluid,
108
- ],
109
- },
40
+ sizeMappings: ad_sizes_1.slotSizeMappings['top-above-nav'],
110
41
  },
111
42
  carrot: {
112
43
  label: false,
113
44
  refresh: false,
114
45
  name: 'carrot',
115
- sizeMappings: {
116
- mobile: [ad_sizes_1.adSizes.fluid],
117
- },
46
+ sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
118
47
  },
119
48
  epic: {
120
49
  label: false,
121
50
  refresh: false,
122
51
  name: 'epic',
123
- sizeMappings: {
124
- mobile: [ad_sizes_1.adSizes.fluid],
125
- },
52
+ sizeMappings: ad_sizes_1.slotSizeMappings['epic'],
126
53
  },
127
54
  'mobile-sticky': {
128
55
  label: true,
129
56
  refresh: true,
130
57
  name: 'mobile-sticky',
131
- sizeMappings: {
132
- mobile: [ad_sizes_1.adSizes.mobilesticky],
133
- },
58
+ sizeMappings: ad_sizes_1.slotSizeMappings['mobile-sticky'],
134
59
  },
135
60
  };
136
61
  /**
package/dist/cjs/index.d.ts CHANGED
@@ -7,13 +7,14 @@ export { remarketing } from './third-party-tags/remarketing';
7
7
  export { EventTimer } from './event-timer';
8
8
  export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
9
9
  export type { ThirdPartyTag } from './types';
10
- export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
11
- export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
10
+ export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
11
+ export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
12
12
  export { isAdBlockInUse } from './detect-ad-blocker';
13
13
  export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
14
14
  export { initTrackScrollDepth } from './track-scroll-depth';
15
15
  export { initTrackGpcSignal } from './track-gpc-signal';
16
16
  export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
17
+ export { createAdSlot } from './create-ad-slot';
17
18
  export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
18
19
  export * as constants from './constants';
19
20
  export type { ContentTargeting } from './targeting/content';
package/dist/cjs/index.js CHANGED
@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  return result;
25
25
  };
26
26
  Object.defineProperty(exports, "__esModule", { value: true });
27
- exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
27
+ exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
28
28
  var ias_1 = require("./third-party-tags/ias");
29
29
  Object.defineProperty(exports, "ias", { enumerable: true, get: function () { return ias_1.ias; } });
30
30
  var permutive_1 = require("./third-party-tags/permutive");
@@ -46,6 +46,7 @@ var ad_sizes_1 = require("./ad-sizes");
46
46
  Object.defineProperty(exports, "adSizes", { enumerable: true, get: function () { return ad_sizes_1.adSizes; } });
47
47
  Object.defineProperty(exports, "getAdSize", { enumerable: true, get: function () { return ad_sizes_1.getAdSize; } });
48
48
  Object.defineProperty(exports, "slotSizeMappings", { enumerable: true, get: function () { return ad_sizes_1.slotSizeMappings; } });
49
+ Object.defineProperty(exports, "createAdSize", { enumerable: true, get: function () { return ad_sizes_1.createAdSize; } });
49
50
  var detect_ad_blocker_1 = require("./detect-ad-blocker");
50
51
  Object.defineProperty(exports, "isAdBlockInUse", { enumerable: true, get: function () { return detect_ad_blocker_1.isAdBlockInUse; } });
51
52
  var permutive_2 = require("./permutive");
@@ -59,6 +60,8 @@ Object.defineProperty(exports, "initTrackGpcSignal", { enumerable: true, get: fu
59
60
  var ad_targeting_youtube_1 = require("./ad-targeting-youtube");
60
61
  Object.defineProperty(exports, "buildAdsConfigWithConsent", { enumerable: true, get: function () { return ad_targeting_youtube_1.buildAdsConfigWithConsent; } });
61
62
  Object.defineProperty(exports, "disabledAds", { enumerable: true, get: function () { return ad_targeting_youtube_1.disabledAds; } });
63
+ var create_ad_slot_1 = require("./create-ad-slot");
64
+ Object.defineProperty(exports, "createAdSlot", { enumerable: true, get: function () { return create_ad_slot_1.createAdSlot; } });
62
65
  exports.constants = __importStar(require("./constants"));
63
66
  var content_1 = require("./targeting/content");
64
67
  Object.defineProperty(exports, "getContentTargeting", { enumerable: true, get: function () { return content_1.getContentTargeting; } });
package/dist/esm/ad-sizes.d.ts CHANGED
@@ -1,30 +1,45 @@
1
1
  declare type AdSizeString = 'fluid' | `${number},${number}`;
2
- declare type AdSize = Readonly<{
3
- width: number;
4
- height: number;
5
- toString: () => AdSizeString;
6
- }>;
7
- declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
8
- interface SizeMapping {
9
- mobile?: AdSize[];
10
- desktop?: AdSize[];
11
- phablet?: AdSize[];
12
- tablet?: AdSize[];
13
- }
14
- interface SlotSizeMappings {
15
- right: SizeMapping;
16
- comments: SizeMapping;
17
- 'top-above-nav': SizeMapping;
18
- mostpop: SizeMapping;
19
- 'merchandising-high': SizeMapping;
20
- merchandising: SizeMapping;
21
- survey: SizeMapping;
2
+ /**
3
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
4
+ * more semantic `width`/`height` properties and keep things readonly.
5
+ *
6
+ * example:
7
+ * const size = new AdSize([300, 250]);
8
+ *
9
+ * size.width === 300; // true
10
+ * size[0] === 300; // true
11
+ *
12
+ * size.height === 250; // true
13
+ * size[1] === 250; // true
14
+ *
15
+ * size[0] = 200; // throws error
16
+ * size.width = 200; // throws error
17
+ *
18
+ */
19
+ declare class AdSize extends Array<number> {
20
+ readonly [0]: number;
21
+ readonly [1]: number;
22
+ constructor([width, height]: [number, number]);
23
+ toString(): AdSizeString;
24
+ get width(): number;
25
+ get height(): number;
22
26
  }
27
+ declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
28
+ declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
29
+ declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
30
+ declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
31
+ declare type SlotSizeMappings = Record<SlotName, SizeMapping>;
32
+ declare const createAdSize: (width: number, height: number) => AdSize;
23
33
  declare const adSizes: Record<SizeKeys, AdSize>;
34
+ /**
35
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
36
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
37
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
38
+ **/
24
39
  declare const slotSizeMappings: SlotSizeMappings;
25
40
  declare const getAdSize: (size: SizeKeys) => AdSize;
26
41
  export declare const _: {
27
42
  createAdSize: (width: number, height: number) => AdSize;
28
43
  };
29
- export type { AdSizeString, AdSize, SizeKeys, SizeMapping };
30
- export { adSizes, getAdSize, slotSizeMappings };
44
+ export type { AdSizeString, AdSize, SizeKeys, SizeMapping, SlotSizeMappings, SlotName, };
45
+ export { adSizes, getAdSize, slotSizeMappings, createAdSize };
package/dist/esm/ad-sizes.js CHANGED
@@ -1,10 +1,39 @@
1
+ /**
2
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
3
+ * more semantic `width`/`height` properties and keep things readonly.
4
+ *
5
+ * example:
6
+ * const size = new AdSize([300, 250]);
7
+ *
8
+ * size.width === 300; // true
9
+ * size[0] === 300; // true
10
+ *
11
+ * size.height === 250; // true
12
+ * size[1] === 250; // true
13
+ *
14
+ * size[0] = 200; // throws error
15
+ * size.width = 200; // throws error
16
+ *
17
+ */
18
+ class AdSize extends Array {
19
+ constructor([width, height]) {
20
+ super();
21
+ this.push(width, height);
22
+ }
23
+ toString() {
24
+ return this.width === 0 && this.height === 0
25
+ ? 'fluid'
26
+ : `${this.width},${this.height}`;
27
+ }
28
+ get width() {
29
+ return this[0];
30
+ }
31
+ get height() {
32
+ return this[1];
33
+ }
34
+ }
1
35
  const createAdSize = (width, height) => {
2
- const toString = () => width === 0 && height === 0 ? 'fluid' : `${width},${height}`;
3
- return Object.freeze({
4
- width,
5
- height,
6
- toString,
7
- });
36
+ return new AdSize([width, height]);
8
37
  };
9
38
  const adSizesPartial = {
10
39
  // standard ad sizes
@@ -39,7 +68,37 @@ const adSizes = {
39
68
  '300x1050': adSizesPartial.portrait,
40
69
  '160x600': adSizesPartial.skyscraper,
41
70
  };
71
+ /**
72
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
73
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
74
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
75
+ **/
42
76
  const slotSizeMappings = {
77
+ inline: {
78
+ mobile: [
79
+ adSizes.outOfPage,
80
+ adSizes.empty,
81
+ adSizes.outstreamMobile,
82
+ adSizes.mpu,
83
+ adSizes.googleCard,
84
+ adSizes.fluid,
85
+ ],
86
+ phablet: [
87
+ adSizes.outOfPage,
88
+ adSizes.empty,
89
+ adSizes.outstreamMobile,
90
+ adSizes.mpu,
91
+ adSizes.googleCard,
92
+ adSizes.fluid,
93
+ ],
94
+ desktop: [
95
+ adSizes.outOfPage,
96
+ adSizes.empty,
97
+ adSizes.mpu,
98
+ adSizes.googleCard,
99
+ adSizes.fluid,
100
+ ],
101
+ },
43
102
  right: {
44
103
  mobile: [
45
104
  adSizes.outOfPage,
@@ -79,6 +138,14 @@ const slotSizeMappings = {
79
138
  ],
80
139
  },
81
140
  'top-above-nav': {
141
+ mobile: [
142
+ adSizes.outOfPage,
143
+ adSizes.empty,
144
+ adSizes.fabric,
145
+ adSizes.outstreamMobile,
146
+ adSizes.mpu,
147
+ adSizes.fluid,
148
+ ],
82
149
  tablet: [
83
150
  adSizes.outOfPage,
84
151
  adSizes.empty,
@@ -132,6 +199,14 @@ const slotSizeMappings = {
132
199
  adSizes.fluid,
133
200
  ],
134
201
  },
202
+ im: {
203
+ mobile: [
204
+ adSizes.outOfPage,
205
+ adSizes.empty,
206
+ adSizes.inlineMerchandising,
207
+ adSizes.fluid,
208
+ ],
209
+ },
135
210
  'merchandising-high': {
136
211
  mobile: [
137
212
  adSizes.outOfPage,
@@ -140,6 +215,9 @@ const slotSizeMappings = {
140
215
  adSizes.fluid,
141
216
  ],
142
217
  },
218
+ 'merchandising-high-lucky': {
219
+ mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
220
+ },
143
221
  merchandising: {
144
222
  mobile: [
145
223
  adSizes.outOfPage,
@@ -151,8 +229,17 @@ const slotSizeMappings = {
151
229
  survey: {
152
230
  desktop: [adSizes.outOfPage],
153
231
  },
232
+ carrot: {
233
+ mobile: [adSizes.fluid],
234
+ },
235
+ epic: {
236
+ mobile: [adSizes.fluid],
237
+ },
238
+ 'mobile-sticky': {
239
+ mobile: [adSizes.mobilesticky],
240
+ },
154
241
  };
155
242
  const getAdSize = (size) => adSizes[size];
156
243
  // Export for testing
157
244
  export const _ = { createAdSize };
158
- export { adSizes, getAdSize, slotSizeMappings };
245
+ export { adSizes, getAdSize, slotSizeMappings, createAdSize };
package/dist/esm/create-ad-slot.js CHANGED
@@ -1,133 +1,58 @@
1
- import { adSizes } from './ad-sizes';
1
+ import { slotSizeMappings } from './ad-sizes';
2
2
  const adSlotIdPrefix = 'dfp-ad--';
3
- const commonSizeMappings = {
4
- mobile: [
5
- adSizes.outOfPage,
6
- adSizes.empty,
7
- adSizes.outstreamMobile,
8
- adSizes.mpu,
9
- adSizes.googleCard,
10
- adSizes.fluid,
11
- ],
12
- phablet: [
13
- adSizes.outOfPage,
14
- adSizes.empty,
15
- adSizes.outstreamMobile,
16
- adSizes.mpu,
17
- adSizes.googleCard,
18
- adSizes.fluid,
19
- ],
20
- desktop: [
21
- adSizes.outOfPage,
22
- adSizes.empty,
23
- adSizes.mpu,
24
- adSizes.googleCard,
25
- adSizes.fluid,
26
- ],
27
- };
28
- /*
29
-
30
- mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
31
-
32
- The ad sizes which are hardcoded here are also hardcoded in the source code of
33
- dotcom-rendering.
34
-
35
- If/when this file is modified, please make sure that updates, if any, are reported to DCR.
36
-
37
- TODO use a map type??
38
- want to assert that values are of type AdSlotConfig
39
- */
40
3
  const adSlotConfigs = {
41
4
  im: {
42
5
  label: false,
43
6
  refresh: false,
44
- sizeMappings: {
45
- mobile: [
46
- adSizes.outOfPage,
47
- adSizes.empty,
48
- adSizes.inlineMerchandising,
49
- adSizes.fluid,
50
- ],
51
- },
7
+ sizeMappings: slotSizeMappings['im'],
52
8
  },
53
9
  'high-merch': {
54
10
  label: false,
55
11
  refresh: false,
56
12
  name: 'merchandising-high',
57
- sizeMappings: {
58
- mobile: [
59
- adSizes.outOfPage,
60
- adSizes.empty,
61
- adSizes.merchandisingHigh,
62
- adSizes.fluid,
63
- ],
64
- },
13
+ sizeMappings: slotSizeMappings['merchandising-high'],
65
14
  },
66
15
  'high-merch-lucky': {
67
16
  label: false,
68
17
  refresh: false,
69
18
  name: 'merchandising-high-lucky',
70
- sizeMappings: {
71
- mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
72
- },
19
+ sizeMappings: slotSizeMappings['merchandising-high-lucky'],
73
20
  },
74
21
  'high-merch-paid': {
75
22
  label: false,
76
23
  refresh: false,
77
24
  name: 'merchandising-high',
78
- sizeMappings: {
79
- mobile: [
80
- adSizes.outOfPage,
81
- adSizes.empty,
82
- adSizes.merchandisingHighAdFeature,
83
- adSizes.fluid,
84
- ],
85
- },
25
+ sizeMappings: slotSizeMappings['merchandising-high'],
86
26
  },
87
27
  inline: {
88
- sizeMappings: commonSizeMappings,
28
+ sizeMappings: slotSizeMappings['inline'],
89
29
  },
90
30
  mostpop: {
91
- sizeMappings: commonSizeMappings,
31
+ sizeMappings: slotSizeMappings['mostpop'],
92
32
  },
93
33
  comments: {
94
- sizeMappings: commonSizeMappings,
34
+ sizeMappings: slotSizeMappings['comments'],
95
35
  },
96
36
  'top-above-nav': {
97
- sizeMappings: {
98
- mobile: [
99
- adSizes.outOfPage,
100
- adSizes.empty,
101
- adSizes.fabric,
102
- adSizes.outstreamMobile,
103
- adSizes.mpu,
104
- adSizes.fluid,
105
- ],
106
- },
37
+ sizeMappings: slotSizeMappings['top-above-nav'],
107
38
  },
108
39
  carrot: {
109
40
  label: false,
110
41
  refresh: false,
111
42
  name: 'carrot',
112
- sizeMappings: {
113
- mobile: [adSizes.fluid],
114
- },
43
+ sizeMappings: slotSizeMappings['merchandising-high'],
115
44
  },
116
45
  epic: {
117
46
  label: false,
118
47
  refresh: false,
119
48
  name: 'epic',
120
- sizeMappings: {
121
- mobile: [adSizes.fluid],
122
- },
49
+ sizeMappings: slotSizeMappings['epic'],
123
50
  },
124
51
  'mobile-sticky': {
125
52
  label: true,
126
53
  refresh: true,
127
54
  name: 'mobile-sticky',
128
- sizeMappings: {
129
- mobile: [adSizes.mobilesticky],
130
- },
55
+ sizeMappings: slotSizeMappings['mobile-sticky'],
131
56
  },
132
57
  };
133
58
  /**
package/dist/esm/index.d.ts CHANGED
@@ -7,13 +7,14 @@ export { remarketing } from './third-party-tags/remarketing';
7
7
  export { EventTimer } from './event-timer';
8
8
  export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
9
9
  export type { ThirdPartyTag } from './types';
10
- export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
11
- export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
10
+ export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
11
+ export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, SlotName, } from './ad-sizes';
12
12
  export { isAdBlockInUse } from './detect-ad-blocker';
13
13
  export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
14
14
  export { initTrackScrollDepth } from './track-scroll-depth';
15
15
  export { initTrackGpcSignal } from './track-gpc-signal';
16
16
  export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
17
+ export { createAdSlot } from './create-ad-slot';
17
18
  export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
18
19
  export * as constants from './constants';
19
20
  export type { ContentTargeting } from './targeting/content';
package/dist/esm/index.js CHANGED
@@ -7,12 +7,13 @@ export { inizio } from './third-party-tags/inizio';
7
7
  export { remarketing } from './third-party-tags/remarketing';
8
8
  export { EventTimer } from './event-timer';
9
9
  export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
10
- export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
10
+ export { adSizes, getAdSize, slotSizeMappings, createAdSize } from './ad-sizes';
11
11
  export { isAdBlockInUse } from './detect-ad-blocker';
12
12
  export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
13
13
  export { initTrackScrollDepth } from './track-scroll-depth';
14
14
  export { initTrackGpcSignal } from './track-gpc-signal';
15
15
  export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
16
+ export { createAdSlot } from './create-ad-slot';
16
17
  import * as constants_1 from './constants';
17
18
  export { constants_1 as constants };
18
19
  export { getContentTargeting } from './targeting/content';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/commercial-core",
3
- "version": "4.0.0",
3
+ "version": "4.2.0",
4
4
  "description": "Guardian advertising business logic",
5
5
  "homepage": "https://github.com/guardian/commercial-core#readme",
6
6
  "bugs": {