prebid-universal-creative 1.16.0 → 1.17.0

package/src/nativeAssetManager.js

@@ -7,6 +7,7 @@ import { addNativeClickTrackers, fireNativeImpressionTrackers } from './nativeOR
 import { sendRequest, loadScript } from './utils';
 import {prebidMessenger} from './messaging.js';
 import { isSafeFrame } from './environment.js';
+import {hasDynamicRenderer, runDynamicRenderer} from './dynamicRenderer.js';
 /*
  * Native asset->key mapping from Prebid.js/src/constants.json
  * https://github.com/prebid/Prebid.js/blob/8635c91942de9df4ec236672c39b19448545a812/src/constants.json#L67
@@ -255,7 +256,7 @@ export function newNativeAssetManager(win, nativeTag, mkMessenger = prebidMessen
       assets,
     };
 
-    return sendMessage(message, replaceAssets);
+    return sendMessage(message, replaceAssets(adId));
   }
 
   /*
@@ -268,7 +269,7 @@ export function newNativeAssetManager(win, nativeTag, mkMessenger = prebidMessen
       action: 'allAssetRequest',
       adId,
     };
-    return sendMessage(message, replaceAssets);
+    return sendMessage(message, replaceAssets(adId));
   }
 
   /*
@@ -285,116 +286,131 @@ export function newNativeAssetManager(win, nativeTag, mkMessenger = prebidMessen
     sendMessage(message);
   }
 
-  /*
-   * Postmessage listener for when Prebid responds with requested native assets.
-   */
-  function replaceAssets(event) {
-    try {
-
-      var data = {};
 
+  function replaceAssets(adId) {
+    return function(event) {
       try {
-        data = JSON.parse(event.data);
-      } catch (e) {
-        if (errorCountEscapeHatch++ > 10) {
-          // TODO: this should be a timeout, not an arbitrary cap on the number of messages received
-          /*
-           * if for some reason Prebid never responds with the native assets,
-           * get rid of this listener because other messages won't stop coming
-           */
-          stopListening();
-          throw e;
-        }
-        return;
-      }
 
-    if (data.message === 'assetResponse') {
-      // add GAM %%CLICK_URL_UNESC%% to the data object to be eventually used in renderers
-      data.clickUrlUnesc = clickUrlUnesc;
-      const body = win.document.body.innerHTML;
-      const head = win.document.head.innerHTML;
-
-        if (hasPbNativeData() && data.adId !== win.pbNativeData.adId) return;
+        var data = {};
+
+        try {
+          data = JSON.parse(event.data);
+        } catch (e) {
+          if (errorCountEscapeHatch++ > 10) {
+            // TODO: this should be a timeout, not an arbitrary cap on the number of messages received
+            /*
+             * if for some reason Prebid never responds with the native assets,
+             * get rid of this listener because other messages won't stop coming
+             */
+            stopListening();
+            throw e;
+          }
+          return;
+        }
 
-        callback = ((cb) => {
-          return () => {
-            fireNativeImpressionTrackers(data.adId, sendMessage);
-            addNativeClickTrackers(data.adId, sendMessage);
-            cb && cb();
+        if (data.message === 'assetResponse' && data.adId === adId) {
+          if(hasDynamicRenderer(data)) {
+            runDynamicRenderer(adId, data, sendMessage, win);
+            return;
           }
-        })(callback);
 
-        if (head) win.document.head.innerHTML = replace(head, data);
+          // add GAM %%CLICK_URL_UNESC%% to the data object to be eventually used in renderers
+          data.clickUrlUnesc = clickUrlUnesc;
+          const body = win.document.body.innerHTML;
+          const head = win.document.head.innerHTML;
 
+          callback = ((cb) => {
+            return () => {
+              fireNativeImpressionTrackers(data.adId, sendMessage);
+              addNativeClickTrackers(data.adId, sendMessage);
+              cb && cb();
+            }
+          })(callback);
 
-        data.assets = data.assets || [];
-        let renderPayload = data.assets;
-        if (data.ortb) {
-          renderPayload.ortb = data.ortb;
-        }
+          if (head) win.document.head.innerHTML = replace(head, data);
 
-        if ((data.hasOwnProperty('rendererUrl') && data.rendererUrl) || (hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl'))) {
-          if (win.renderAd) {
-            const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
 
-            renderAd(newHtml, data);
-          } else if (document.getElementById('pb-native-renderer')) {
-            document.getElementById('pb-native-renderer').addEventListener('load', function () {
-              const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
+          data.assets = data.assets || [];
+          let renderPayload = data.assets;
+          if (data.ortb) {
+            renderPayload.ortb = data.ortb;
+          }
 
-              renderAd(newHtml, data);
-            });
-          } else {
-            loadScript(win, ((hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl') && win.pbNativeData.rendererUrl) || data.rendererUrl), function () {
+          // if there's a rendererUrl, we need to check whether it's already been loaded.
+          // There are 3 scenarios:
+          //   1) it's already been loaded (window.renderAd is present)
+          //   2) it is currently being loaded (through a script tag with id "pb-native-renderer")
+          //   3) it hasn't been loaded yet
+          //  1 and 2 seem intended to work with logic in nativeRenderManager.js, which (sometimes) loads rendererUrl through a <script id="pb-native-renderer">, but they could conceivably be used in an undocumented way to embed renderer logic directly in the creative.
+          if ((data.hasOwnProperty('rendererUrl') && data.rendererUrl) || (hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl'))) {
+            if (win.renderAd) {
               const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
 
               renderAd(newHtml, data);
-            });
-          }
-        } else if ((data.hasOwnProperty('adTemplate') && data.adTemplate) || (hasPbNativeData() && win.pbNativeData.hasOwnProperty('adTemplate'))) {
-          const template = (hasPbNativeData() && win.pbNativeData.hasOwnProperty('adTemplate') && win.pbNativeData.adTemplate) || data.adTemplate;
-          const newHtml = replace(template, data);
+            } else if (document.getElementById('pb-native-renderer')) {
+              document.getElementById('pb-native-renderer').addEventListener('load', function () {
+                const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
+
+                renderAd(newHtml, data);
+              });
+            } else {
+              loadScript(win, ((hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl') && win.pbNativeData.rendererUrl) || data.rendererUrl), function () {
+                const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
+
+                renderAd(newHtml, data);
+              });
+            }
+          } else if ((data.hasOwnProperty('adTemplate') && data.adTemplate) || (hasPbNativeData() && win.pbNativeData.hasOwnProperty('adTemplate'))) {
+            const template = (hasPbNativeData() && win.pbNativeData.hasOwnProperty('adTemplate') && win.pbNativeData.adTemplate) || data.adTemplate;
+            const newHtml = replace(template, data);
 
-          renderAd(newHtml, data);
-        } else {
-          const newHtml = replace(body, data);
+            renderAd(newHtml, data);
+          } else {
+            const newHtml = replace(body, data);
 
-          win.document.body.innerHTML = newHtml;
-          callback && callback();
-          stopListening();
+            win.document.body.innerHTML = newHtml;
+            callback && callback(); // all the other scenarios hit the callback via renderAd()
+            stopListening();
+          }
         }
+      } catch (e) {
+        errCallback && errCallback(e);
       }
-    } catch (e) {
-      errCallback && errCallback(e);
     }
   }
 
   /** This function returns the element that contains the current iframe. */
   function getCurrentFrameContainer(win) {
-    let currentWindow = win;
-    let currentParentWindow;
+    try {
+      let currentWindow = win;
+      let currentParentWindow;
 
-    while (currentWindow !== win.top) {
+      while (currentWindow !== win.top) {
         currentParentWindow = currentWindow.parent;
         if (!currentParentWindow.frames || !currentParentWindow.frames.length) return null;
         for (let idx = 0; idx < currentParentWindow.frames.length; idx++)
-            if (currentParentWindow.frames[idx] === currentWindow) {
-              if (!currentParentWindow.document) return null;
-                for (let frameElement of currentParentWindow.document.getElementsByTagName('iframe')) {
-                    if (!frameElement.contentWindow) return null;
-                    if (frameElement.contentWindow === currentWindow) {
-                        return frameElement.parentElement;
-                    }
-                }
+          if (currentParentWindow.frames[idx] === currentWindow) {
+            if (!currentParentWindow.document) return null;
+            for (let frameElement of currentParentWindow.document.getElementsByTagName('iframe')) {
+              if (!frameElement.contentWindow) return null;
+              if (frameElement.contentWindow === currentWindow) {
+                return frameElement.parentElement;
+              }
             }
+          }
+      }
+    } catch (e) {
+      // parent is cross-frame
     }
-}
+  }
 
   function renderAd(html, bid) {
     // if the current iframe is not a safeframe, try to set the
     // current iframe width to the width of the container. This
     // is to handle the case where the native ad is rendered inside
     // a GAM display ad.
+
+    // NOTE: this may be unnecessary, see https://github.com/prebid/prebid-universal-creative/issues/253.
     if (!isSafeFrame(window)) {
       let iframeContainer = getCurrentFrameContainer(win);
       if (iframeContainer && iframeContainer.children && iframeContainer.children[0]) {
@@ -411,9 +427,12 @@ export function newNativeAssetManager(win, nativeTag, mkMessenger = prebidMessen
 
     win.document.body.innerHTML += html;
     callback && callback();
-    win.removeEventListener('message', replaceAssets);
     stopListening();
-    const resize = () => requestHeightResize(bid.adId, (document.body.clientHeight || document.body.offsetHeight), document.body.clientWidth);
+    const resize = () => requestHeightResize(
+        bid.adId,
+        (document.body.clientHeight || document.body.offsetHeight),
+        document.body.clientWidth > 1 ? document.body.clientWidth : undefined
+    );
     document.readyState === 'complete' ? resize() : window.onload = resize;
 
     if (typeof window.postRenderAd === 'function') {

package/src/nativeORTBTrackerManager.js

@@ -21,7 +21,7 @@ export function addNativeClickTrackers(adId, sendMessage) {
     const adElements = document.getElementsByClassName(AD_ANCHOR_CLASS_NAME) || [];
     // get all assets that have 'link' property, map asset.id -> asset.link
     for (let i = 0; i < adElements.length; i++) {
-        adElements[i].addEventListener('click', (event) => {
+        adElements[i].addEventListener('pointerdown', (event) => {
             let targetElement = event.target;
             // check if clicked element is associated with any native asset (look for 'hb_native_asset_id' attribute)
             let assetId = targetElement && targetElement.getAttribute(ASSET_ID_ELEMENT_ATTRIBUTE);

package/src/nativeRenderManager.js

@@ -2,7 +2,7 @@
  * Script to handle firing impression and click trackers from native teamplates
  */
 import {newNativeAssetManager} from './nativeAssetManager';
-import {prebidMessenger} from './messaging.js';
+import {prebidMessenger, renderEventMessage} from './messaging.js';
 
 export function newNativeRenderManager(win, mkMessenger = prebidMessenger, assetMgr = newNativeAssetManager) {
     let sendMessage;
@@ -12,13 +12,8 @@ export function newNativeRenderManager(win, mkMessenger = prebidMessenger, asset
         window.pbNativeData = nativeTag;
         sendMessage = mkMessenger(nativeTag.pubUrl, win);
 
-        function signalResult(adId, success, info) {
-            sendMessage({
-                message: 'Prebid Event',
-                adId,
-                event: success ? 'adRenderSucceeded' : 'adRenderFailed',
-                info
-            });
+        function signalResult(adId, errorInfo) {
+            sendMessage(renderEventMessage(adId, errorInfo));
         }
 
         try {
@@ -33,16 +28,16 @@ export function newNativeRenderManager(win, mkMessenger = prebidMessenger, asset
                     doc.body.appendChild(scr);
                 }
                 nativeAssetManager.loadAssets(nativeTag.adId, () => {
-                    signalResult(nativeTag.adId, true);
+                    signalResult(nativeTag.adId);
                 }, (e) => {
-                    signalResult(nativeTag.adId, false, {reason: 'exception', message: e.message});
+                    signalResult(nativeTag.adId, {reason: 'exception', message: e.message});
                 });
             } else {
-                signalResult(null, false, {reason: 'missingDocOrAdid'});
+                signalResult(null, {reason: 'missingDocOrAdid'});
                 console.warn('Prebid Native Tag object was missing \'adId\'.');
             }
         } catch (e) {
-            signalResult(nativeTag && nativeTag.adId, false, {reason: 'exception', message: e.message});
+            signalResult(nativeTag && nativeTag.adId, {reason: 'exception', message: e.message});
             console.error('Error rendering ad', e);
         }
     };

package/src/nativeTrackerManager.js

@@ -47,7 +47,7 @@ export function newNativeTrackerManager(win) {
 
     for (let i = 0; i < adElements.length; i++) {
       let adId = readAdIdFromSingleElement(adElements[i]);
-      adElements[i].addEventListener('click', function(event) {
+      adElements[i].addEventListener('pointerdown', function(event) {
         listener(event, adId);
       }, true);
     }
@@ -83,7 +83,7 @@ export function newNativeTrackerManager(win) {
         attachClickListeners(false, boundedLoadMobileClickTrackers);
 
         (impTrackers || []).forEach(triggerPixel);
-        
+
         // fire impression IMG trackers
         eventtrackers
           .filter(tracker => tracker.event === 1 && tracker.method === 1)

package/src/renderingManager.js

@@ -1,7 +1,8 @@
 import { parseUrl, transformAuctionTargetingData } from './utils';
 import { canLocatePrebid } from './environment';
 import { insertElement, getEmptyIframe } from './domHelper';
-import {prebidMessenger} from './messaging.js';
+import {prebidMessenger, renderEventMessage} from './messaging.js';
+import {hasDynamicRenderer, runDynamicRenderer} from './dynamicRenderer.js';
 
 export function renderBannerOrDisplayAd(doc, dataObject) {
   const targetingData = transformAuctionTargetingData(dataObject);
@@ -25,8 +26,8 @@ export function renderLegacy(doc, adId) {
     w = w.parent;
     if (w.$$PREBID_GLOBAL$$) {
       try {
-        found = true;
         w.$$PREBID_GLOBAL$$.renderAd(doc, adId);
+        found = true;
         break;
       } catch (e) {
         continue;
@@ -49,6 +50,7 @@ export function renderCrossDomain(win, adId, pubAdServerDomain = '', pubUrl) {
   let adServerDomain = pubAdServerDomain || win.location.hostname;
   let fullAdServerDomain = windowLocation.protocol + '//' + adServerDomain;
   const sendMessage = prebidMessenger(pubUrl, win);
+  const signalRenderResult = (errorInfo) => sendMessage(renderEventMessage(adId, errorInfo));
 
   function renderAd(ev) {
     let key = ev.message ? "message" : "data";
@@ -64,6 +66,10 @@ export function renderCrossDomain(win, adId, pubAdServerDomain = '', pubUrl) {
       adObject.message === "Prebid Response" &&
       adObject.adId === adId
     ) {
+      if (hasDynamicRenderer(adObject)) {
+        runDynamicRenderer(adId, adObject, sendMessage, win);
+        return;
+      }
       try {
         let body = win.document.body;
         let ad = adObject.ad;
@@ -72,7 +78,7 @@ export function renderCrossDomain(win, adId, pubAdServerDomain = '', pubUrl) {
         let height = adObject.height;
 
         if (adObject.mediaType === "video") {
-          signalRenderResult(false, {
+          signalRenderResult({
             reason: "preventWritingOnMainDocument",
             message: `Cannot render video ad ${adId}`,
           });
@@ -83,7 +89,7 @@ export function renderCrossDomain(win, adId, pubAdServerDomain = '', pubUrl) {
           iframe.contentDocument.open();
           iframe.contentDocument.write(ad);
           iframe.contentDocument.close();
-          signalRenderResult(true);
+          signalRenderResult();
         } else if (url) {
           const iframe = getEmptyIframe(height, width);
           iframe.style.display = "inline";
@@ -91,9 +97,9 @@ export function renderCrossDomain(win, adId, pubAdServerDomain = '', pubUrl) {
           iframe.src = url;
 
           insertElement(iframe, document, "body");
-          signalRenderResult(true);
+          signalRenderResult();
         } else {
-          signalRenderResult(false, {
+          signalRenderResult({
             reason: "noAd",
             message: `No ad for ${adId}`,
           });
@@ -102,22 +108,10 @@ export function renderCrossDomain(win, adId, pubAdServerDomain = '', pubUrl) {
           );
         }
       } catch (e) {
-        signalRenderResult(false, { reason: "exception", message: e.message });
+        signalRenderResult({ reason: "exception", message: e.message });
         console.log(`Error in rendering ad`, e);
       }
     }
-
-    function signalRenderResult(success, { reason, message } = {}) {
-      const payload = {
-        message: "Prebid Event",
-        adId,
-        event: success ? "adRenderSucceeded" : "adRenderFailed",
-      };
-      if (!success) {
-        payload.info = { reason, message };
-      }
-      sendMessage(payload);
-    }
   }
 
   function requestAdFromPrebid() {

package/test/helpers/mocks.js

@@ -14,6 +14,7 @@ export const mocks = {
       },
       parent: {},
       top: {},
+      frames: {},
     };
   }
 }

package/test/spec/dynamicRenderer_spec.js

@@ -0,0 +1,167 @@
+import {makeIframe} from '../../src/domHelper.js';
+import {hasDynamicRenderer, MIN_RENDERER_VERSION, runDynamicRenderer} from '../../src/dynamicRenderer.js';
+import {AD_RENDER_FAILED, AD_RENDER_SUCCEEDED, PREBID_EVENT} from '../../src/messaging.js';
+
+describe('hasDynamicRenderer', () => {
+    Object.entries({
+        'neither': {},
+        'renderer, but no version': {
+            renderer: 'mock-renderer'
+        },
+        'renderer, but version is too low': {
+            renderer: 'mock-renderer',
+            rendererVersion: 1
+        },
+    }).forEach(([t, data]) => {
+        it(`returns false with ${t}`, () => {
+            expect(hasDynamicRenderer(data)).to.be.false;
+        })
+    });
+
+    it('returns true when both renderer and version are present', () => {
+        expect(hasDynamicRenderer({
+            renderer: 'mock-renderer',
+            rendererVersion: MIN_RENDERER_VERSION
+        })).to.be.true;
+    })
+})
+
+describe('runDynamicRenderer', () => {
+    let sendMessage, frame, render;
+    const adId = '123';
+    beforeEach(() => {
+        render = sinon.stub();
+        sendMessage = sinon.stub();
+        frame = makeIframe(document);
+        return new Promise((resolve) => {
+            frame.onload = resolve;
+            document.body.appendChild(frame);
+        }).then(() => {
+            frame.contentWindow._render = render;
+        });
+    });
+
+    afterEach(() => {
+        document.body.removeChild(frame);
+    });
+
+    function runRenderer(data) {
+        return runDynamicRenderer(adId, Object.assign({
+            renderer: `window.render = window.parent._render`
+        }, data), sendMessage, frame.contentWindow).catch(() => null);
+    }
+
+    it('runs renderer', () => {
+        const data = {ad: 'markup'};
+        return runRenderer(data).then(() => {
+            sinon.assert.calledWith(render, sinon.match(data), sinon.match({mkFrame: makeIframe}), frame.contentWindow);
+        });
+    });
+
+    Object.entries({
+        'returns': null,
+        'returns a promise that resolves': Promise.resolve()
+    }).forEach(([t, ret]) => {
+        it(`emits AD_RENDER_SUCCEDED when renderer ${t}`, () => {
+            render.callsFake(() => ret);
+            return runRenderer().then(() => {
+                sinon.assert.calledWith(sendMessage, {
+                    adId,
+                    message: PREBID_EVENT,
+                    event: AD_RENDER_SUCCEEDED
+                });
+            });
+        });
+    });
+
+    describe('emits AD_RENDER_FAILED', () => {
+        Object.entries({
+            throws: (ret) => {
+                throw ret;
+            },
+            'returns a promise that rejects': (ret) => Promise.reject(ret)
+        }).forEach(([t, transform]) => {
+            describe(`when renderer ${t}`, () => {
+                Object.entries({
+                    'error': {
+                        ret: new Error('error message'),
+                        info: {
+                            reason: 'exception',
+                            message: 'error message'
+                        }
+                    },
+                    'error with reason': {
+                        ret: {
+                            reason: 'failure',
+                            message: 'error message'
+                        },
+                        info: {
+                            reason: 'failure',
+                            message: 'error message'
+                        }
+                    }
+                }).forEach(([t, {ret, info}]) => {
+                    it(`an ${t}`, () => {
+                        render.callsFake(() => transform(ret));
+                        return runRenderer().then(() => {
+                            sinon.assert.calledWith(sendMessage, {
+                                adId,
+                                message: PREBID_EVENT,
+                                event: AD_RENDER_FAILED,
+                                info
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+
+    describe('renderer sendMessage', () => {
+        let rndSendMessage;
+        beforeEach(() => {
+            render.callsFake(() => new Promise())
+            return new Promise((resolve) => {
+                render.callsFake((_, {sendMessage}) => {
+                    rndSendMessage = sendMessage;
+                    resolve();
+                });
+                runRenderer();
+            })
+        });
+        it('adds message type and adId', () => {
+            rndSendMessage('type', {msg: 'data'});
+            sinon.assert.calledWith(sendMessage, {
+                message: 'type',
+                adId,
+                msg: 'data'
+            });
+        });
+        it('accepts response listeners', () => {
+            const listener = sinon.stub();
+            sendMessage.callsFake((_, responseListener) => {
+                responseListener('response');
+            })
+            rndSendMessage('msg', {}, listener);
+            sinon.assert.calledWith(listener, 'response');
+        });
+
+        it('emits AD_RENDER_FAILED if listener throws', () => {
+            const listener = sinon.stub().callsFake(() => { throw new Error('err') });
+            sendMessage.callsFake((_, responseListener) => {
+                responseListener && responseListener('response');
+            });
+            rndSendMessage('msg', {}, listener);
+            sinon.assert.calledWith(sendMessage, {
+                message: PREBID_EVENT,
+                event: AD_RENDER_FAILED,
+                adId,
+                info: {
+                    reason: 'exception',
+                    message: 'err'
+                }
+            })
+        })
+    });
+
+});