CORE: check if the body is available before adding the locator iframe (…

…#11926) * check if the body is available * fix linter errors * Add integ test * Re-check if frame is already present * But do it better --------- Co-authored-by: Demetrio Girardi <dgirardi@prebid.org>
prebid · Jul 8, 2024 · 907fa73 · 907fa73
1 parent c140dc0
commit 907fa73
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 17 deletions.
diff --git a/src/adRendering.js b/src/adRendering.js
@@ -253,8 +253,12 @@ export function renderAdDirect(doc, adId, options) {
  */
 export function insertLocatorFrame() {
   if (!window.frames[PB_LOCATOR]) {
-    const frame = createInvisibleIframe();
-    frame.name = PB_LOCATOR;
-    document.body.appendChild(frame);
+    if (!document.body) {
+      window.requestAnimationFrame(insertLocatorFrame);
+    } else {
+      const frame = createInvisibleIframe();
+      frame.name = PB_LOCATOR;
+      document.body.appendChild(frame);
+    }
   }
 }
diff --git a/test/pages/banner_sync.html b/test/pages/banner_sync.html
@@ -0,0 +1,97 @@
+<!-- This is a Test Page for a Banner End-to-End test  -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Prebid.js Banner Example</title>
+
+    <!-- Prebid.js -->
+    <script src="http://localhost:4444/bundle?modules=appnexusBidAdapter"></script>
+
+    <!-- Google Publisher Tag -->
+    <script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
+
+    <script>
+        var pbjs = pbjs || {};
+        pbjs.que = pbjs.que || [];
+
+        // Prebid Banner Ad Unit
+        const adUnits = [{
+            code: 'div-gpt-ad-1460505748561-0',
+            mediaTypes: {
+                banner: {
+                    sizes: [[300, 250], [300, 600]],
+                }
+            },
+            bids: [{
+                bidder: 'appnexus',
+                params: {
+                    placementId: 13144370
+                }
+            }]
+        }
+            ,{
+                code: 'div-gpt-ad-1460505748561-1',
+                mediaTypes: {
+                    banner: {
+                        sizes: [[300, 250], [300, 600]],
+                    }
+                },
+                bids: [{
+                    bidder: "appnexus",
+                    params: {
+                        placementId: 13144370
+                    }
+                }]
+            }
+        ];
+    </script>
+
+    <script>
+        var googletag = googletag || {};
+        googletag.cmd = googletag.cmd || [];
+
+        googletag.cmd.push(function() {
+            googletag.pubads().disableInitialLoad();
+        });
+
+        pbjs.que.push(function () {
+            pbjs.setConfig({enableTIDs: true});
+            pbjs.addAdUnits(adUnits);
+            pbjs.requestBids({ bidsBackHandler: sendAdServerRequest });
+        });
+
+        function sendAdServerRequest() {
+            googletag.cmd.push(function () {
+                pbjs.que.push(function () {
+                    pbjs.setTargetingForGPTAsync('div-gpt-ad-1460505748561-0');
+                    googletag.pubads().refresh();
+                });
+            });
+        }
+    </script>
+
+    <script>
+        googletag.cmd.push(function () {
+            googletag
+                .defineSlot('/19968336/header-bid-tag-0', [[300, 250], [300, 600]], 'div-gpt-ad-1460505748561-0')
+                .addService(googletag.pubads());
+
+            googletag.pubads().enableSingleRequest();
+            googletag.enableServices();
+        });
+    </script>
+</head>
+
+<body>
+<h2>Prebid.js Banner Ad Unit Test</h2>
+<div id='div-gpt-ad-1460505748561-0'>
+    <script>
+        googletag.cmd.push(function () { googletag.display('div-gpt-ad-1460505748561-0'); });
+    </script>
+</div>
+<div id="targeting-keys"></div>
+</body>
+
+</html>
diff --git a/test/spec/e2e/banner/basic_banner_ad.spec.js b/test/spec/e2e/banner/basic_banner_ad.spec.js
@@ -2,6 +2,7 @@ const expect = require('chai').expect;
 const {setupTest, testPageURL} = require('../../../helpers/testing-utils');
 
 const TEST_PAGE_URL = testPageURL('banner.html?pbjs_debug=true');
+const SYNC_PAGE_URL = testPageURL('banner_sync.html?pbjs_debug=true');
 const CREATIVE_IFRAME_ID = 'google_ads_iframe_/19968336/header-bid-tag-0_0';
 const CREATIVE_IFRAME_CSS_SELECTOR = 'iframe[id="' + CREATIVE_IFRAME_ID + '"]';
 
@@ -14,20 +15,25 @@ const EXPECTED_TARGETING_KEYS = {
   'hb_bidder_appnexus': 'appnexus'
 };
 
-setupTest({
-  url: TEST_PAGE_URL,
-  waitFor: CREATIVE_IFRAME_CSS_SELECTOR,
-  expectGAMCreative: true
-}, 'Prebid.js Banner Ad Unit Test', function () {
-  it('should load the targeting keys with correct values', async function () {
-    const result = await browser.execute(function () {
-      return window.pbjs.getAdserverTargeting('div-gpt-ad-1460505748561-1');
-    });
-    const targetingKeys = result['div-gpt-ad-1460505748561-1'];
+Object.entries({
+  'synchronously': SYNC_PAGE_URL,
+  'asynchronously': TEST_PAGE_URL,
+}).forEach(([t, testPage]) => {
+  setupTest({
+    url: testPage,
+    waitFor: CREATIVE_IFRAME_CSS_SELECTOR,
+    expectGAMCreative: true
+  }, `Prebid.js Banner Ad Unit Test (loading ${t})`, function () {
+    it('should load the targeting keys with correct values', async function () {
+      const result = await browser.execute(function () {
+        return window.pbjs.getAdserverTargeting('div-gpt-ad-1460505748561-1');
+      });
+      const targetingKeys = result['div-gpt-ad-1460505748561-1'];
 
-    expect(targetingKeys).to.include(EXPECTED_TARGETING_KEYS);
-    expect(targetingKeys.hb_adid).to.be.a('string');
-    expect(targetingKeys.hb_adid_appnexus).to.be.a('string');
-    expect(targetingKeys.hb_size).to.satisfy((size) => size === '300x250' || '300x600');
+      expect(targetingKeys).to.include(EXPECTED_TARGETING_KEYS);
+      expect(targetingKeys.hb_adid).to.be.a('string');
+      expect(targetingKeys.hb_adid_appnexus).to.be.a('string');
+      expect(targetingKeys.hb_size).to.satisfy((size) => size === '300x250' || '300x600');
+    });
   });
 });