prebid-universal-creative 1.12.0 → 1.14.0

package/src/nativeAssetManager.js

@@ -3,8 +3,12 @@
  * values in native creative templates.
  */
 
+import { addNativeClickTrackers, fireNativeImpressionTrackers } from './nativeORTBTrackerManager';
 import { sendRequest, loadScript } from './utils';
+import {prebidMessenger} from './messaging.js';
+import { newEnvironment } from './environment.js';
 
+const envionment = newEnvironment(window);
 /*
  * Native asset->key mapping from Prebid.js/src/constants.json
  * https://github.com/prebid/Prebid.js/blob/8635c91942de9df4ec236672c39b19448545a812/src/constants.json#L67
@@ -56,17 +60,26 @@ const assetTypeMapping = {
 const DEFAULT_CACHE_HOST = 'prebid.adnxs.com';
 const DEFAULT_CACHE_PATH = '/pbc/v1/cache';
 
-export function newNativeAssetManager(win) {
+export function newNativeAssetManager(win, pubUrl) {
+  const sendMessage = prebidMessenger(pubUrl, win);
   let callback;
   let errorCountEscapeHatch = 0;
+  let cancelMessageListener;
+
+  function stopListening() {
+    if (cancelMessageListener != null) {
+      cancelMessageListener();
+      cancelMessageListener = null;
+    }
+  }
 
   function getCacheEndpoint(cacheHost, cachePath) {
     let host = (typeof cacheHost === 'undefined' || cacheHost === "") ? DEFAULT_CACHE_HOST : cacheHost;
     let path = (typeof cachePath === 'undefined' || cachePath === "") ? DEFAULT_CACHE_PATH : cachePath;
-  
+
     return `https://${host}${path}`;
   }
-  
+
   function parseResponse(response) {
     let bidObject;
     try {
@@ -76,7 +89,7 @@ export function newNativeAssetManager(win) {
     }
     return bidObject;
   }
-  
+
   function transformToPrebidKeys(adMarkup) {
     let assets = [];
     let clicktrackers;
@@ -105,7 +118,7 @@ export function newNativeAssetManager(win) {
           'key' : 'title',
           'value' : asset.title.text
         })
-      } 
+      }
     })
 
     if (adMarkup.link) {
@@ -121,7 +134,8 @@ export function newNativeAssetManager(win) {
     return {
       assets,
       clicktrackers,
-      'imptrackers' : adMarkup.imptrackers
+      'imptrackers' : adMarkup.imptrackers,
+      'eventtrackers': adMarkup.eventtrackers
     }
   }
 
@@ -137,8 +151,9 @@ export function newNativeAssetManager(win) {
           win.document.body.innerHTML = newHtml;
 
           callback && callback({
-            clickTrackers: data.clicktrackers, 
-            impTrackers: data.imptrackers
+            clickTrackers: data.clicktrackers,
+            impTrackers: data.imptrackers,
+            eventtrackers: data.eventtrackers
           });
         } else {
           // TODO Shall we just write the markup in the page
@@ -151,13 +166,17 @@ export function newNativeAssetManager(win) {
   }
 
   function loadMobileAssets(tagData, cb) {
-    const placeholders = scanForPlaceholders();
+    const placeholders = scanDOMForPlaceHolders();
     if (placeholders.length > 0) {
       callback = cb;
       requestAssetsFromCache(tagData);
     }
   }
 
+  function hasPbNativeData() {
+    return typeof win.pbNativeData !== 'undefined'
+  }
+
   /*
    * Entry point to search for placeholderes and set up postmessage roundtrip
    * to retrieve native assets. Looks for placeholders for the given adId and
@@ -166,43 +185,47 @@ export function newNativeAssetManager(win) {
    * to retrieve native assets that have a value on the corresponding bid
    */
   function loadAssets(adId, cb) {
-    const placeholders = scanForPlaceholders(adId), flag = (typeof win.pbNativeData !== 'undefined');
+    const placeholders = scanDOMForPlaceHolders(adId);
 
-    if (flag && win.pbNativeData.hasOwnProperty('assetsToReplace')) {
+    if (hasPbNativeData() && win.pbNativeData.hasOwnProperty('assetsToReplace')) {
         win.pbNativeData.assetsToReplace.forEach((asset) => {
           const key = (asset.match(/hb_native_/i)) ? asset : NATIVE_KEYS[asset];
           if (key) {placeholders.push(key);}
         });
     }
 
-    if (flag && win.pbNativeData.hasOwnProperty('requestAllAssets') && win.pbNativeData.requestAllAssets) {
+    if (hasPbNativeData() && win.pbNativeData.hasOwnProperty('requestAllAssets') && win.pbNativeData.requestAllAssets) {
       callback = cb;
-      requestAllAssets(adId);
+      cancelMessageListener = requestAllAssets(adId);
     } else if (placeholders.length > 0) {
       callback = cb;
-      requestAssets(adId, placeholders);
-    } 
+      cancelMessageListener = requestAssets(adId, placeholders);
+    }
+  }
+
+  function placeholderFor(key, adId) {
+    return (adId && !hasPbNativeData()) ? `${key}:${adId}` : ((hasPbNativeData()) ? `##${key}##` : key)
+  }
+
+  function scanForPlaceHolders(adId, ...markupFragments) {
+    return Object.values(NATIVE_KEYS)
+        .reduce((found, key) => {
+          const placeholder = placeholderFor(key, adId);
+          for (const mkup of markupFragments.filter(Boolean)) {
+            if (mkup.indexOf(placeholder) >= 0) {
+              found.push(key);
+              break;
+            }
+          }
+          return found;
+        }, []);
   }
 
   /*
-   * Searches the DOM for placeholder values sent in by Prebid Native
+   * Searches the DOM for legacy placeholder values sent in by Prebid Native
    */
-  function scanForPlaceholders(adId) {
-    let placeholders = [];
-    const doc = win.document;
-    const flag = (typeof win.pbNativeData !== 'undefined');
-
-    Object.keys(NATIVE_KEYS).forEach(key => {
-      const placeholderKey = NATIVE_KEYS[key];
-      const placeholder = (adId && !flag) ? `${placeholderKey}:${adId}` : `${placeholderKey}`;
-      const placeholderIndex = (~doc.body.innerHTML.indexOf(placeholder)) ? doc.body.innerHTML.indexOf(placeholder) : (doc.head.innerHTML && doc.head.innerHTML.indexOf(placeholder));
-      
-      if (~placeholderIndex) {
-        placeholders.push(placeholderKey);
-      }
-    });
-    
-    return placeholders;
+  function scanDOMForPlaceHolders(adId) {
+    return scanForPlaceHolders(adId, win.document.body.innerHTML, win.document.head.innerHTML);
   }
 
   /*
@@ -210,8 +233,6 @@ export function newNativeAssetManager(win) {
    * creative template, and setups up a listener for when Prebid responds.
    */
   function requestAssets(adId, assets) {
-    win.addEventListener('message', replaceAssets, false);
-
     const message = {
       message: 'Prebid Native',
       action: 'assetRequest',
@@ -219,8 +240,7 @@ export function newNativeAssetManager(win) {
       assets,
     };
 
-
-    win.parent.postMessage(JSON.stringify(message), '*');
+    return sendMessage(message, replaceAssets);
   }
 
   /*
@@ -228,29 +248,26 @@ export function newNativeAssetManager(win) {
    * creative template, and setups up a listener for when Prebid responds.
    */
   function requestAllAssets(adId) {
-    win.addEventListener('message', replaceAssets, false);
-
     const message = {
       message: 'Prebid Native',
       action: 'allAssetRequest',
       adId,
     };
-
-    win.parent.postMessage(JSON.stringify(message), '*');
+    return sendMessage(message, replaceAssets);
   }
 
   /*
    * Sends postmessage to Prebid for native resize
    */
-  function requestHeightResize(adId, height) {
+  function requestHeightResize(adId, height, width) {
     const message = {
       message: 'Prebid Native',
       action: 'resizeNativeHeight',
       adId,
       height,
+      width
     };
-
-    win.parent.postMessage(JSON.stringify(message), '*');
+    sendMessage(message);
   }
 
   /*
@@ -267,7 +284,7 @@ export function newNativeAssetManager(win) {
          * if for some reason Prebid never responds with the native assets,
          * get rid of this listener because other messages won't stop coming
          */
-        win.removeEventListener('message', replaceAssets);
+        stopListening();
       }
       return;
     }
@@ -275,69 +292,160 @@ export function newNativeAssetManager(win) {
     if (data.message === 'assetResponse') {
       const body = win.document.body.innerHTML;
       const head = win.document.head.innerHTML;
-      const flag = (typeof win.pbNativeData !== 'undefined');
 
-      if (flag && data.adId !== win.pbNativeData.adId) return;
+      if (hasPbNativeData() && data.adId !== win.pbNativeData.adId) return;
 
       if (head) win.document.head.innerHTML = replace(head, data);
 
-      if ((data.hasOwnProperty('rendererUrl') && data.rendererUrl) || (flag && win.pbNativeData.hasOwnProperty('rendererUrl'))) {
+      data.assets = data.assets || [];
+      let renderPayload = data.assets;
+      if (data.ortb) {
+        renderPayload.ortb = data.ortb;
+        callback = () => {
+          fireNativeImpressionTrackers(data.adId, sendMessage);
+          addNativeClickTrackers(data.adId, data.ortb, sendMessage);
+        }
+      }
+
+      if ((data.hasOwnProperty('rendererUrl') && data.rendererUrl) || (hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl'))) {
         if (win.renderAd) {
-          const newHtml = (win.renderAd && win.renderAd(data.assets)) || '';
+          const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
 
-          win.document.body.innerHTML = body + newHtml;
-          callback && callback();
-          win.removeEventListener('message', replaceAssets);
-          requestHeightResize(data.adId, (document.body.clientHeight || document.body.offsetHeight));
+          renderAd(newHtml, data);
         } else if (document.getElementById('pb-native-renderer')) {
           document.getElementById('pb-native-renderer').addEventListener('load', function() {
-            const newHtml = (win.renderAd && win.renderAd(data.assets)) || '';
+            const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
 
-            win.document.body.innerHTML = body + newHtml;
-            callback && callback();
-            win.removeEventListener('message', replaceAssets);
-            requestHeightResize(data.adId, (document.body.clientHeight || document.body.offsetHeight));
+            renderAd(newHtml, data);
           });
         } else {
-          loadScript(win, ((flag && win.pbNativeData.hasOwnProperty('rendererUrl') && win.pbNativeData.rendererUrl) || data.rendererUrl), function() {
-            const newHtml = (win.renderAd && win.renderAd(data.assets)) || '';
+          loadScript(win, ((hasPbNativeData() && win.pbNativeData.hasOwnProperty('rendererUrl') && win.pbNativeData.rendererUrl) || data.rendererUrl), function() {
+            const newHtml = (win.renderAd && win.renderAd(renderPayload)) || '';
 
-            win.document.body.innerHTML = body + newHtml;
-            callback && callback();
-            win.removeEventListener('message', replaceAssets);
-            requestHeightResize(data.adId, (document.body.clientHeight || document.body.offsetHeight));
+            renderAd(newHtml, data);
           })
         }
-      } else if ((data.hasOwnProperty('adTemplate') && data.adTemplate)||(flag && win.pbNativeData.hasOwnProperty('adTemplate'))) {
-        const template =  (flag && win.pbNativeData.hasOwnProperty('adTemplate') && win.pbNativeData.adTemplate) || data.adTemplate;
+      } 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);
-        win.document.body.innerHTML = body + newHtml;
-        callback && callback();
-        win.removeEventListener('message', replaceAssets);
-        requestHeightResize(data.adId, (document.body.clientHeight || document.body.offsetHeight));
+        
+        renderAd(newHtml, data);
       } else {
         const newHtml = replace(body, data);
 
         win.document.body.innerHTML = newHtml;
         callback && callback();
-        win.removeEventListener('message', replaceAssets);
+        stopListening();
       }
     }
   }
 
+  /** This function returns the element that contains the current iframe. */
+  function getCurrentFrameContainer(win) {
+    let currentWindow = win;
+    let currentParentWindow;
+
+    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;
+                    }
+                }
+            }
+    }
+}
+
+  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.
+    if (!envionment.isSafeFrame()) {
+      let iframeContainer = getCurrentFrameContainer(win);
+      if (iframeContainer && iframeContainer.children && iframeContainer.children[0]) {
+        const iframe = iframeContainer.children[0]; 
+        if (iframe.width === '1' && iframe.height === '1') {
+          let width =  iframeContainer.getBoundingClientRect().width;
+          win.document.body.style.width = `${width}px`;
+        }
+      }
+    } else {
+      document.body.style.width = Math.ceil(win.$sf.ext.geom().self.b) + 'px';
+    }
+    win.document.body.innerHTML += html;
+    callback && callback();
+    win.removeEventListener('message', replaceAssets);
+    stopListening();
+    requestHeightResize(bid.adId, (document.body.clientHeight || document.body.offsetHeight), document.body.clientWidth);
+
+    if (typeof window.postRenderAd === 'function') {
+      window.postRenderAd(bid);
+    }
+  }
+
+  function replaceORTBAssetsAndLinks(html, ortb) {
+
+    const getAssetValue = (asset) => {
+      if (asset.img) {
+        return asset.img.url;
+      }
+      if (asset.data) {
+        return asset.data.value;
+      }
+      if (asset.title) {
+        return asset.title.text;
+      }
+      if (asset.video) {
+        return asset.video.vasttag;
+      }
+      return ''
+    }
+
+    ortb.assets.forEach(asset => {
+      html = html.replace(`##hb_native_asset_id_${asset.id}##`, getAssetValue(asset));
+      if (asset.link && asset.link.url) {
+        html = html.replace(`##hb_native_asset_link_id_${asset.id}##`, asset.link.url);
+      }
+    });
+
+    html = html.replaceAll(/##hb_native_asset_id_\d+##/gm, '');
+
+    if (ortb.privacy) {
+      html = html.replace("##hb_native_privacy##", ortb.privacy);
+    }
+
+    if (ortb.link) {
+      html = html.replaceAll("##hb_native_linkurl##", ortb.link.url);
+    }
+  
+    return html;
+  }
+
   /**
    * Replaces occurrences of native placeholder values with their actual values
    * in the given document.
+   * If there's no actual value, the placeholder gets replaced by an empty string.
    */
-  function replace(document, { assets, adId }) {
-    let html = document;
+  function replace(html, { assets, ortb, adId }) {
+    if (ortb) {
+      html = replaceORTBAssetsAndLinks(html, ortb);
+    } else if (!Array.isArray(assets)) {
+      return html;
+    }
+    assets = assets || [];
 
-    (assets || []).forEach(asset => {
-      const flag = (typeof win.pbNativeData !== 'undefined');
-      const searchString = (adId && !flag) ? `${NATIVE_KEYS[asset.key]}:${adId}` : ((flag) ? '##'+`${NATIVE_KEYS[asset.key]}`+'##' : `${NATIVE_KEYS[asset.key]}`);
+    scanForPlaceHolders(adId, html).forEach(placeholder => {
+      const searchString = placeholderFor(placeholder, adId);
       const searchStringRegex = new RegExp(searchString, 'g');
-      html = html.replace(searchStringRegex, asset.value);
-    });
+      const fittingAsset = assets.find(asset => placeholder === NATIVE_KEYS[asset.key]);
+      html = html.replace(searchStringRegex, fittingAsset ? fittingAsset.value : '');
+    })
 
     return html;
   }

package/src/nativeORTBTrackerManager.js

@@ -0,0 +1,32 @@
+import { loadScript, triggerPixel } from "./utils";
+
+const AD_ANCHOR_CLASS_NAME = 'pb-click';
+const ASSET_ID_ELEMENT_ATTRIBUTE = 'hb_native_asset_id';
+
+export function fireNativeImpressionTrackers(adId, sendMessage) {
+    const message = {
+        message: 'Prebid Native',
+        action: 'fireNativeImpressionTrackers',
+        adId
+      };
+    sendMessage(message);
+}
+
+export function addNativeClickTrackers(adId, ortb, sendMessage) {
+    const message = {
+        message: 'Prebid Native',
+        action: 'click',
+        adId 
+      };
+    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) => {
+            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);
+            message.assetId = assetId;
+            sendMessage(message);
+        }, true);
+    }
+}

package/src/nativeRenderManager.js

@@ -1,14 +1,14 @@
 /*
  * Script to handle firing impression and click trackers from native teamplates
  */
-import { parseUrl, triggerPixel, transformAuctionTargetingData } from './utils';
-import { newNativeAssetManager } from './nativeAssetManager';
+import {newNativeAssetManager} from './nativeAssetManager';
+import {prebidMessenger} from './messaging.js';
 
 const AD_ANCHOR_CLASS_NAME = 'pb-click';
 const AD_DATA_ADID_ATTRIBUTE = 'pbAdId';
 
 export function newNativeRenderManager(win) {
-  let publisherDomain;
+  let sendMessage;
 
 
   function findAdElements(className) {
@@ -30,8 +30,7 @@ export function newNativeRenderManager(win) {
       if (action === 'click') {
         message.action = 'click';
       }
-
-      win.parent.postMessage(JSON.stringify(message), publisherDomain);
+      sendMessage(message);
     }
   }
 
@@ -51,12 +50,10 @@ export function newNativeRenderManager(win) {
   // START OF MAIN CODE
   let renderNativeAd = function(nativeTag) {
     window.pbNativeData = nativeTag;
-    const targetingData = transformAuctionTargetingData(nativeTag);
-    const nativeAssetManager = newNativeAssetManager(window);
+    sendMessage = prebidMessenger(nativeTag.pubUrl, win);
+    const nativeAssetManager = newNativeAssetManager(window, nativeTag.pubUrl);
 
     if (nativeTag.hasOwnProperty('adId')) {
-      let parsedUrl = parseUrl(window.pbNativeData.pubUrl);
-      publisherDomain = parsedUrl.protocol + '://' + parsedUrl.host;
 
       if (nativeTag.hasOwnProperty('rendererUrl') && !nativeTag.rendererUrl.match(/##.*##/i)) {
         const scr = document.createElement('SCRIPT');
@@ -64,9 +61,10 @@ export function newNativeRenderManager(win) {
         scr.id = 'pb-native-renderer';
         document.body.appendChild(scr);
       }
-      nativeAssetManager.loadAssets(nativeTag.adId,fireNativeCallback);
-      fireNativeCallback();
-      fireNativeImpTracker(nativeTag.adId);
+      nativeAssetManager.loadAssets(nativeTag.adId, () => {
+        fireNativeImpTracker(nativeTag.adId);
+        fireNativeCallback();
+      });
     } else {
       console.warn('Prebid Native Tag object was missing \'adId\'.');
     }

package/src/nativeTrackerManager.js

@@ -3,12 +3,13 @@
  */
 import { parseUrl, triggerPixel, transformAuctionTargetingData } from './utils';
 import { newNativeAssetManager } from './nativeAssetManager';
+import {prebidMessenger} from './messaging.js';
 
 const AD_ANCHOR_CLASS_NAME = 'pb-click';
 const AD_DATA_ADID_ATTRIBUTE = 'pbAdId';
 
 export function newNativeTrackerManager(win) {
-  let publisherDomain;
+  let sendMessage;
 
   function findAdElements(className) {
     let adElements = win.document.getElementsByClassName(className);
@@ -63,17 +64,18 @@ export function newNativeTrackerManager(win) {
         message.action = 'click';
       }
 
-      win.parent.postMessage(JSON.stringify(message), publisherDomain);
+      sendMessage(message);
     }
   }
 
   // START OF MAIN CODE
   let startTrackers = function (dataObject) {
     const targetingData = transformAuctionTargetingData(dataObject);
-    const nativeAssetManager = newNativeAssetManager(window);
+    sendMessage = prebidMessenger(targetingData.pubUrl, win);
+    const nativeAssetManager = newNativeAssetManager(window, targetingData.pubUrl);
 
     if (targetingData && targetingData.env === 'mobile-app') {
-      let cb = function({clickTrackers, impTrackers} = {}) {
+      let cb = function({clickTrackers, impTrackers, eventtrackers} = {}) {
         function loadMobileClickTrackers(clickTrackers) {
           (clickTrackers || []).forEach(triggerPixel);
         }
@@ -81,12 +83,21 @@ export function newNativeTrackerManager(win) {
         attachClickListeners(false, boundedLoadMobileClickTrackers);
 
         (impTrackers || []).forEach(triggerPixel);
+        
+        // fire impression IMG trackers
+        eventtrackers
+          .filter(tracker => tracker.event === 1 && tracker.method === 1)
+          .map(tracker => tracker.url)
+          .forEach(triggerPixel);
+
+        // fire impression JS trackers
+        eventtrackers
+          .filter(tracker => tracker.event === 1 && tracker.method === 2)
+          .map(tracker => tracker.url)
+          .forEach(trackerUrl => loadScript(document, trackerUrl));
       }
       nativeAssetManager.loadMobileAssets(targetingData, cb);
     } else {
-      let parsedUrl = parseUrl(targetingData && targetingData.pubUrl);
-      publisherDomain = parsedUrl.protocol + '://' + parsedUrl.host;
-
       let adElements = findAdElements(AD_ANCHOR_CLASS_NAME);
 
       nativeAssetManager.loadAssets(