Gregt/lazy load (#36)

* Add stuff for lazy load

* First shot at ignoring isInViewport response.

* Will render ads even if the inviewport check fails

* Removed commented out line of code

* Version bump and changelog update

---------

Co-authored-by: Andrew Sotiriou <[email protected]>
Co-authored-by: Greg Thorson <[email protected]>

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="2.1.9"></a>
+## [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))
+
 <a name="2.1.8"></a>
 ## [2.1.8](https://github.com/apartmenttherapy/react-gpt/compare/v2.1.7...v2.1.8) (2023-03-03)
 

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",

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.
          *
@@ -257,6 +262,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.
@@ -659,7 +668,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() {

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 {