@financial-times/o-ads - npm Package Compare versions

Comparing version 18.0.0 to 18.1.0

dist/js/ad-servers/gpt.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = exports.DEFAULT_LAZY_LOAD = void 0;
 
@@ -29,2 +29,8 @@ var _config = _interopRequireDefault(require("../config"));
  */
+var DEFAULT_LAZY_LOAD = {
+  fetchMarginPercent: 500,
+  renderMarginPercent: 200,
+  mobileScaling: 2.0
+};
+exports.DEFAULT_LAZY_LOAD = DEFAULT_LAZY_LOAD;
 var DEFAULT_COLLAPSE_MODE = 'never';
@@ -98,2 +104,3 @@ var breakpoints = false;
   setPageCollapseEmpty();
+  enableLazyLoad(gptConfig.enableLazyLoad);
   var url = (0, _url.stripUrlParams)({
@@ -110,2 +117,36 @@ href: window.location.href,
 }
+/**
+ * Enables GPT's Lazy Loading for serving ads only when it's necessary.
+ * 		The lazy load config ooptions are:
+ *
+ * 			- fetchMarginPercent,		minimum distance from the current viewport a slot
+ * 					must be before we fetch the ad as a percentage of viewport size.
+ * 					0 means "when the slot enters the viewport",
+ * 					100 means "when the ad is 1 viewport away"
+ *
+ * 			- renderMarginPercent,	minimum distance from the current viewport a slot
+ * 					must be before we render an ad.
+ * 					This allows for prefetching the ad, but waiting to render and
+ * 					download other subresources. The value works just like
+ * 					fetchMarginPercent as a percentage of viewport.
+ *
+ * 			- mobileScaling,				a multiplier applied to margins on mobile devices.
+ * 					This allows varying margins on mobile vs. desktop. For example,
+ * 					a mobileScaling of 2.0 will multiply all margins by 2 on mobile
+ * 					devices, increasing the minimum distance a slot can be before
+ * 					fetching and rendering.
+ *
+ * @param {object|boolean} lazyLoadConf The lazy load config object or a boolean.
+ * @returns {boolean} true if the object is of type Array, otherwise false
+ */
+
+
+function enableLazyLoad(lazyLoadConf) {
+  if (lazyLoadConf && (typeof lazyLoadConf === 'object' || typeof lazyLoadConf === 'boolean')) {
+    var opts = Object.assign({}, DEFAULT_LAZY_LOAD, typeof lazyLoadConf === 'object' ? lazyLoadConf : {});
+    window.googletag.pubads().enableLazyLoad(opts);
+  } else {
+    _utils.default.log.warn('lazyLoadConf must be either an object or a boolean', lazyLoadConf);
+  }
+}
 /*
@@ -602,3 +643,2 @@ * set the gpt rendering mode to either sync or async
 };
-exports.default = _default;
-module.exports = exports.default;
+exports.default = _default;

origami.json

@@ -113,2 +113,14 @@ {
 		{
+			"name": "Native-Lazy-Loading",
+			"title": "Native Lazy Loading",
+			"template": "/demos/src/nativelazyloading.mustache",
+			"description": "",
+			"data": {
+				"name":"leaderboard",
+				"formats" : "Leaderboard",
+				"network": 5887,
+				"site" : "test.5887.origami"
+			}
+		},
+		{
 			"name": "Multiple-Next-Styles",
@@ -115,0 +127,0 @@ "title": "Ad with multiple style for ft.com (next)",

package.json

@@ -28,3 +28,3 @@ {
 	"name": "@financial-times/o-ads",
-	"version": "18.0.0",
+	"version": "18.1.0",
 	"dependencies": {
@@ -74,4 +74,4 @@ "@financial-times/o-viewport": "^4.0.0",
 		"@types/doubleclick-gpt": "2019041801.0.2",
-		"@types/jest": "25.1.3",
-		"@types/jsdom": "16.1.0",
+		"@types/jest": "25.2.3",
+		"@types/jsdom": "16.2.3",
 		"babel-jest": "^24.8.0",
@@ -78,0 +78,0 @@ "babel-plugin-rewire": "^1.2.0",

README.md

@@ -106,2 +106,11 @@ # @financial-times/o-ads [![CircleCI](https://circleci.com/gh/Financial-Times/o-ads/tree/master.svg?style=svg&circle-token=ff0caeb981693cbbbab6b70ab0ac99c9314bfc4f)](https://circleci.com/gh/Financial-Times/o-ads/tree/master)
   - `gpt.zone` *(optional)* `<String>`
+  - `gpt.rendering` *(optional)* `<String> "sync" | "sra" | "async" (default)` - GPT Rendering Mode Sync, SRA or Async 
+  - `gpt.enableLazyLoad` *(optional)* `<Object>` - GPT Lazy Load, where configuration parameters allow customization of lazy loading behaviour.
+
+    Default settings are
+      ```
+        fetchMarginPercent: 500, // minimum distance from the current viewport a slot must be before we fetch the ad as a percentage of viewport size. 0 means "when the slot enters the viewport", 100 means "when the ad is 1 viewport away"
+        renderMarginPercent: 200, // minimum distance from the current viewport a slot must be before we render an ad. This allows for prefetching the ad, but waiting to render and download other subresources. The value works just like fetchMarginPercent as a percentage of viewport.
+        mobileScaling: 2.0 // a multiplier applied to margins on mobile devices. This allows varying margins on mobile vs. desktop. For example, a mobileScaling of 2.0 will multiply all margins by 2 on mobile devices, increasing the minimum distance a slot can be before fetching and rendering.
+      ```
 - `canonical` *(deprecated)* `<String>` - Overwrite the GPT *page_url* parameter **DO NOT USE**
@@ -122,2 +131,3 @@ - `collapseEmpty` *(optional)* `<String> "before" | "after" | "never"` - How should the slot be collapsed if there is no ad to be shown
 - `targeting` *(optional)* `<Object>` - An object of key => value pairs that will be appended to every ad call on the page
+- `displayLabelWithBorders` *(optional)* `<Boolean>` - Display ad slots with borders on the top and bottom
 
@@ -124,0 +134,0 @@ # Define Ad Slots

secret-squirrel.js

@@ -11,2 +11,3 @@ module.exports = {
 			'demos/src/native.mustache',
+			'demos/src/nativelazyloading.mustache',
 			'demos/src/validatetraffic.mustache',
@@ -13,0 +14,0 @@ 'demos/src/responsive-ad.mustache',

src/js/ad-servers/gpt.js

@@ -15,2 +15,7 @@ /*globals googletag: true */
 
+export const DEFAULT_LAZY_LOAD = {
+	fetchMarginPercent: 500,
+	renderMarginPercent: 200,
+	mobileScaling: 2.0
+};
 const DEFAULT_COLLAPSE_MODE = 'never';
@@ -82,2 +87,3 @@ let breakpoints = false;
 	setPageCollapseEmpty();
+	enableLazyLoad(gptConfig.enableLazyLoad);
 
@@ -96,2 +102,35 @@ const url = stripUrlParams({
 
+/**
+ * Enables GPT's Lazy Loading for serving ads only when it's necessary.
+ * 		The lazy load config ooptions are:
+ *
+ * 			- fetchMarginPercent,		minimum distance from the current viewport a slot
+ * 					must be before we fetch the ad as a percentage of viewport size.
+ * 					0 means "when the slot enters the viewport",
+ * 					100 means "when the ad is 1 viewport away"
+ *
+ * 			- renderMarginPercent,	minimum distance from the current viewport a slot
+ * 					must be before we render an ad.
+ * 					This allows for prefetching the ad, but waiting to render and
+ * 					download other subresources. The value works just like
+ * 					fetchMarginPercent as a percentage of viewport.
+ *
+ * 			- mobileScaling,				a multiplier applied to margins on mobile devices.
+ * 					This allows varying margins on mobile vs. desktop. For example,
+ * 					a mobileScaling of 2.0 will multiply all margins by 2 on mobile
+ * 					devices, increasing the minimum distance a slot can be before
+ * 					fetching and rendering.
+ *
+ * @param {object|boolean} lazyLoadConf The lazy load config object or a boolean.
+ * @returns {boolean} true if the object is of type Array, otherwise false
+ */
+function enableLazyLoad(lazyLoadConf) {
+	if (lazyLoadConf && (typeof lazyLoadConf === 'object' || typeof lazyLoadConf === 'boolean')) {
+		const opts = Object.assign({}, DEFAULT_LAZY_LOAD, typeof lazyLoadConf === 'object' ? lazyLoadConf : {});
+		window.googletag.pubads().enableLazyLoad(opts);
+	} else {
+		utils.log.warn('lazyLoadConf must be either an object or a boolean', lazyLoadConf);
+	}
+}
+
 /*
@@ -98,0 +137,0 @@ * set the gpt rendering mode to either sync or async

No alert changes

Improved metrics

Total package byte prevSize

221388

increased by2.34%

Lines of code

5746

increased by1.57%

Number of lines in readme file

482

increased by2.12%

No dependency changes