From 6c14e839e192d126db17624fd4e41d413d47b16b Mon Sep 17 00:00:00 2001 From: Andrew Sotiriou Date: Thu, 27 Apr 2023 12:15:13 -0400 Subject: [PATCH 1/5] Add stuff for lazy load --- src/createManager.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/createManager.js b/src/createManager.js index 243b34c..df6da4c 100644 --- a/src/createManager.js +++ b/src/createManager.js @@ -27,7 +27,8 @@ export const pubadsAPI = [ "setTagForChildDirectedTreatment", "clearTagForChildDirectedTreatment", "setVideoContent", - "setForceSafeFrame" + "setForceSafeFrame", + "enableLazyLoad" ]; export const APIToCallBeforeServiceEnabled = [ @@ -36,7 +37,8 @@ export const APIToCallBeforeServiceEnabled = [ "enableSyncRendering", "disableInitialLoad", "collapseEmptyDivs", - "setCentering" + "setCentering", + "enableLazyLoad" ]; export class AdManager extends EventEmitter { From 34652b5e29e5ed8958e12240f4a2d7c8c3cdf2c9 Mon Sep 17 00:00:00 2001 From: Greg Thorson Date: Mon, 1 May 2023 14:05:45 -0400 Subject: [PATCH 2/5] First shot at ignoring isInViewport response. --- src/Bling.js | 14 +++++++++++++- src/utils/isInViewport.js | 1 + 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Bling.js b/src/Bling.js index 724c8d0..825aaaf 100644 --- a/src/Bling.js +++ b/src/Bling.js @@ -151,6 +151,7 @@ class Bling extends React.Component { onImpressionViewable: PropTypes.func, /** * An optional event handler function for `googletag.events.slotVisibilityChangedEvent`. + * Note that this is independent of the isSlotInView function * * @property onSlotVisibilityChanged */ @@ -174,6 +175,10 @@ class Bling extends React.Component { * @property viewableThreshold */ viewableThreshold: PropTypes.number, + /** + * Skip isInViewport check if true. + */ + doNotUseViewableThreshold: PropTypes.bool, /** * An optional call back function to notify when the script is loaded. * @@ -241,6 +246,10 @@ class Bling extends React.Component { * An optional flag to indicate whether an ad should only render when it's fully in the viewport area. Default is `true`. */ renderWhenViewable: true, + /** + * If true skip isInViewport check. + */ + doNotUseViewableThreshold: false, /** * An optional number to indicate how much percentage of an ad area needs to be in a viewable area before rendering. Default value is 0.5. * Acceptable range is between 0 and 1. @@ -640,7 +649,10 @@ class Bling extends React.Component { notInViewport(props = this.props, state = this.state) { const {inViewport} = state; - return this.getRenderWhenViewable(props) && !inViewport; + return ( + this.getRenderWhenViewable(props) && + (props.doNotUseViewableThreshold || !inViewport) + ); } defineSlot() { diff --git a/src/utils/isInViewport.js b/src/utils/isInViewport.js index 60e9c7b..0bb0538 100644 --- a/src/utils/isInViewport.js +++ b/src/utils/isInViewport.js @@ -23,4 +23,5 @@ export default function isInViewport(el, [width, height] = [0, 0], offset = 0) { rect.left <= viewport.right - width * offset; return inViewport; + // return true; } From 2707cb03101d74f8b701f554c07ef1d9dbdc9731 Mon Sep 17 00:00:00 2001 From: Greg Thorson Date: Wed, 3 May 2023 11:23:22 -0400 Subject: [PATCH 3/5] Will render ads even if the inviewport check fails --- src/Bling.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Bling.js b/src/Bling.js index 825aaaf..96a39d2 100644 --- a/src/Bling.js +++ b/src/Bling.js @@ -651,7 +651,7 @@ class Bling extends React.Component { const {inViewport} = state; return ( this.getRenderWhenViewable(props) && - (props.doNotUseViewableThreshold || !inViewport) + (!props.doNotUseViewableThreshold && !inViewport) ); } From f8169018445eee772ff61e5851f84f54f3cd0d42 Mon Sep 17 00:00:00 2001 From: Greg Thorson Date: Wed, 3 May 2023 15:08:39 -0400 Subject: [PATCH 4/5] Removed commented out line of code --- src/utils/isInViewport.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/isInViewport.js b/src/utils/isInViewport.js index 0bb0538..60e9c7b 100644 --- a/src/utils/isInViewport.js +++ b/src/utils/isInViewport.js @@ -23,5 +23,4 @@ export default function isInViewport(el, [width, height] = [0, 0], offset = 0) { rect.left <= viewport.right - width * offset; return inViewport; - // return true; } From 59026c1c48a34c72f8645f97b20eadffd6e257e2 Mon Sep 17 00:00:00 2001 From: Greg Thorson Date: Wed, 10 May 2023 09:19:01 -0400 Subject: [PATCH 5/5] Version bump and changelog update --- CHANGELOG.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41629cd..18b65c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ + +## [2.1.9](https://github.com/apartmenttherapy/react-gpt/compare/v2.1.8...v2.1.9) (2023-05-10) + +* disable viwability threshold check if lazyloading ([36] (https://github.com/apartmenttherapy/react-gpt/pull/36)) + ## [2.1.8](https://github.com/apartmenttherapy/react-gpt/compare/v2.1.7...v2.1.8) (2023-03-03) diff --git a/package.json b/package.json index 26e26d1..f4b5a39 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@atmedia/react-gpt", - "version": "2.1.8", + "version": "2.1.9", "description": "A react display ad component using Google Publisher Tag", "main": "lib/index.js", "jsnext:main": "es/index.js",