Delayed display of configured slots when working with infinite scrolling

.nvmrc

@@ -1 +1 @@
-lts/fermium
+lts/gallium

.releaserc.json

@@ -10,7 +10,7 @@
       "prerelease": true
     }
   ],
-  "repositoryUrl": "https://github.com/KijijiCA/react-advertising",
+  "repositoryUrl": "https://github.com/spossner/react-advertising",
   "debug": "true",
   "plugins": [
     [

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-advertising",
-  "version": "4.2.8",
+  "name": "react-delayed-advertising",
+  "version": "4.3.4",
   "description": "Library for display ads in React applications",
   "main": "lib/index.js",
   "unpkg": "dist/react-advertising.min.js",
@@ -45,21 +45,21 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/kijijica/react-advertising.git"
+    "url": "https://github.com/spossner/react-advertising.git"
   },
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.14",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/plugin-proposal-private-property-in-object": "^7.14.0",
-    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
-    "@babel/plugin-transform-runtime": "^7.13.10",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.22.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.21.5",
+    "@babel/plugin-transform-runtime": "^7.22.4",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
     "@cypress/code-coverage": "^3.9.5",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -96,8 +96,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "webpack": "^5.28.0",
-    "webpack-cli": "^4.6.0"
+    "webpack": "^5.84.1",
+    "webpack-cli": "^5.1.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",

src/Advertising.js

@@ -14,6 +14,7 @@ export default class Advertising {
   constructor(config, plugins = [], onError = () => {}) {
     this.config = config;
     this.slots = {};
+    this.delayedDisplay = {};
     this.outOfPageSlots = {};
     this.plugins = plugins;
     this.onError = onError;
@@ -112,10 +113,7 @@ export default class Advertising {
     }
 
     if (!isPrebidUsed && !isAPSUsed) {
-      Advertising.queueForGPT(
-        () => window.googletag.pubads().refresh(selectedSlots),
-        this.onError
-      );
+      this.displayAndRefreshSlots(selectedSlots);
     }
   }
 
@@ -187,10 +185,7 @@ export default class Advertising {
     }
 
     if (!this.isPrebidUsed && !this.isAPSUsed) {
-      Advertising.queueForGPT(
-        () => window.googletag.pubads().refresh([slots[id].gpt]),
-        this.onError
-      );
+      this.displayAndRefreshSlots([slots[id].gpt]);
     }
   }
 
@@ -368,7 +363,11 @@ export default class Advertising {
   displaySlots() {
     this.executePlugins('displaySlots');
     this.config.slots.forEach(({ id }) => {
-      window.googletag.display(id);
+      if (document.getElementById(id)) {
+        window.googletag.display(id);
+      } else {
+        this.delayedDisplay[id] = true;
+      }
     });
   }
 
@@ -478,7 +477,21 @@ export default class Advertising {
       return;
     }
 
+    this.displayAndRefreshSlots(selectedSlots);
+  }
+
+  displayAndRefreshSlots(selectedSlots) {
+    const displayFirst = [];
+    selectedSlots.forEach((slot) => {
+      const id = slot.getSlotElementId();
+      if (this.delayedDisplay[id]) {
+        displayFirst.push(id);
+        delete this.delayedDisplay[id];
+      }
+    });
+
     Advertising.queueForGPT(() => {
+      displayFirst.forEach((slotId) => window.googletag.display(slotId));
       window.googletag.pubads().refresh(selectedSlots);
     }, this.onError);
   }

src/stories/GptInterstitial.stories.js

@@ -8,14 +8,14 @@ export const DefaultStory = () => {
   const config = {
     slots: [
       {
-        id: "div-slot",
-        path: "/6355419/Travel/Europe",
-        sizes: [[100, 100]]
-      }
+        id: 'div-slot',
+        path: '/6355419/Travel/Europe',
+        sizes: [[100, 100]],
+      },
     ],
     interstitialSlot: {
-      path: "/6355419/Travel/Europe/France/Paris"
-    }
+      path: '/6355419/Travel/Europe/France/Paris',
+    },
   };
   return (
     <AdvertisingProvider config={config}>
@@ -49,7 +49,8 @@ https://developers.google.com/publisher-tag/samples/display-web-interstitial-ad
 You can prevent specific links from triggering GPT-managed web interstials by adding a 
 data-google-interstitial="false" attribute to the anchor element or any ancestor of the anchor element.
 
-⚠️ **Please note** currently an interstitial is not working standalone, there must be a basic slot available that would be displayed.
+⚠️ **Please note** currently an interstitial is not working standalone, 
+there must be a basic slot available that would be displayed.
 
 ⚠️ **Please note** an interstistial can only triggered in separate window, it doesn't work in an iframe....
         `,