prebid-universal-creative 1.14.2 → 1.16.0

package/gulpfile.js

@@ -30,28 +30,48 @@ function clean() {
     .pipe(gulpClean());
 }
 
-function buildDev() {
-  return gulp.src(['src/creative.js'])
-    .pipe(webpackStream(webpackConfig))
+/**
+ * This generic function will compile the file specified as inputFile and will
+ * generate an output file in the build directory.
+ */
+function buildDev({ inputFile, outputFile }) {
+  var cloned = _.cloneDeep(webpackConfig);
+  cloned.output.filename = outputFile;
+  return gulp.src([inputFile])
+    .pipe(webpackStream(cloned))
     .pipe(gulp.dest('build'));
 }
 
-function buildNativeDev() {
-  var cloned = _.cloneDeep(webpackConfig);
-  cloned.output.filename = 'native-trk.js';
+function buildLegacyDev() {
+  return buildDev({ inputFile: 'src/legacy.js', outputFile: 'creative.js' });
+}
 
-  return gulp.src(['src/nativeTrackers.js'])
-    .pipe(webpackStream(cloned))
-    .pipe(gulp.dest('build'));
+function buildBannerDev() {
+  return buildDev({ inputFile: 'src/creative.js', outputFile: 'banner.js' });
+}
+
+function buildVideoDev() {
+  return buildDev({ inputFile: 'src/creative.js', outputFile: 'video.js' });
+}
+
+function buildAmpDev() {
+  return buildDev({ inputFile: 'src/ampOrMobile.js', outputFile: 'amp.js' });
+}
+
+function buildMobileDev() {
+  return buildDev({ inputFile: 'src/ampOrMobile.js', outputFile: 'mobile.js' });
+}
+
+function buildNativeDev() {
+  return buildDev({ inputFile: 'src/nativeTrackers.js', outputFile: 'native-trk.js' });
 }
 
 function buildNativeRenderDev() {
-  var cloned = _.cloneDeep(webpackConfig);
-  cloned.output.filename = 'native-render.js';
+  return buildDev({ inputFile: 'src/nativeRender.js', outputFile: 'native.js' });
+}
 
-  return gulp.src(['src/nativeRender.js'])
-    .pipe(webpackStream(cloned))
-    .pipe(gulp.dest('build'));
+function buildNativeRenderLegacyDev() {
+  return buildDev({ inputFile: 'src/legacyNativeRender.js', outputFile: 'native-render.js' });
 }
 
 function buildCookieSync() {
@@ -93,25 +113,19 @@ function buildCookieSyncWithConsent() {
 }
 
 function buildUidDev() {
-  var cloned = _.cloneDeep(webpackConfig);
-  delete cloned.devtool;
-  cloned.output.filename = 'uid.js';
-
-  return gulp.src(['src/ssp-userids/uid.js'])
-    .pipe(webpackStream(cloned))
-    .pipe(gulp.dest('build'));
+  return buildDev({ inputFile: 'src/ssp-userids/uid.js', outputFile: 'uid.js' });
 }
 
-function buildProd() {
+function buildProdLegacy() {
   let cloned = _.cloneDeep(webpackConfig);
   delete cloned.devtool;
 
-  return gulp.src(['src/creative.js'])
+  return gulp.src(['src/legacy.js'])
     .pipe(webpackStream(cloned))
     .pipe(rename({ extname: '.max.js' }))
     .pipe(gulp.dest('dist'))
     .pipe(uglify())
-    .pipe(header(banner, { creative: creative }))
+    .pipe(header('/* v<%= creative.version %>\n' + dateString + '\nDEPRECATED, please use creative based on hb_format targeting */\n', { creative: creative }))
     .pipe(rename({
       basename: 'creative',
       extname: '.js'
@@ -119,28 +133,53 @@ function buildProd() {
     .pipe(gulp.dest('dist'));
 }
 
-function buildNative() {
-  var cloned = _.cloneDeep(webpackConfig);
+function includeStaticVastXmlFile() {
+  let target = gulp.src('static/prebid-mobile-rewarded-vast.xml');
+  return target.pipe(gulp.dest('dist'));
+}
+
+function buildProd({ inputFile, outputFile }) {
+  let cloned = _.cloneDeep(webpackConfig);
   delete cloned.devtool;
-  cloned.output.filename = 'native-trk.js';
 
-  return gulp.src(['src/nativeTrackers.js'])
+  return gulp.src([inputFile])
     .pipe(webpackStream(cloned))
+    .pipe(gulp.dest('dist'))
     .pipe(uglify())
-    .pipe(header('/* v<%= creative.version %>\n' + dateString + ' */\n', { creative: creative }))
+    .pipe(header(banner, { creative: creative }))
+    .pipe(rename({
+      basename: outputFile.split('.')[0],
+      extname: `.${outputFile.split('.')[1]}`
+    }))
     .pipe(gulp.dest('dist'));
 }
 
+function buildBanner() {
+  return buildProd({ inputFile: 'src/creative.js', outputFile: 'banner.js' });
+}
+
+function buildVideo() {
+  return buildProd({ inputFile: 'src/creative.js', outputFile: 'video.js' });
+}
+
+function buildAmp() {
+  return buildProd({ inputFile: 'src/ampOrMobile.js', outputFile: 'amp.js' });
+}
+
+function buildMobile() {
+  return buildProd({ inputFile: 'src/ampOrMobile.js', outputFile: 'mobile.js' });
+}
+
+function buildNative() {
+  return buildProd({ inputFile: 'src/nativeTrackers.js', outputFile: 'native-trk.js' });
+}
+
 function buildNativeRender() {
-  var cloned = _.cloneDeep(webpackConfig);
-  delete cloned.devtool;
-  cloned.output.filename = 'native-render.js';
+  return buildProd({ inputFile: 'src/nativeRender.js', outputFile: 'native.js' });
+}
 
-  return gulp.src(['src/nativeRender.js'])
-    .pipe(webpackStream(cloned))
-    .pipe(uglify())
-    .pipe(header('/* v<%= creative.version %>\n' + dateString + ' */\n', { creative: creative }))
-    .pipe(gulp.dest('dist'));
+function buildLegacyNativeRender() {
+  return buildProd({ inputFile: 'src/legacyNativeRender.js', outputFile: 'native-render.js' });
 }
 
 function buildUid() {
@@ -195,7 +234,7 @@ function newKarmaCallback(done) {
         process.exit(exitCode);
       }
     }
-  } 
+  }
 }
 
 function setupE2E(done) {
@@ -205,7 +244,9 @@ function setupE2E(done) {
 
 gulp.task('test', gulp.series(clean, test));
 
-gulp.task('e2e-test', gulp.series(clean, setupE2E, gulp.parallel(buildDev, buildCookieSync, buildCookieSyncWithConsent, buildNativeDev, buildNativeRenderDev, buildUidDev, includeStaticVastXmlFile, watch), test));
+const buildDevFunctions = [buildLegacyDev, buildBannerDev, buildVideoDev, buildAmpDev, buildMobileDev, buildNativeRenderLegacyDev, buildNativeDev, buildNativeRenderDev, buildCookieSync, buildCookieSyncWithConsent, buildUidDev, includeStaticVastXmlFile];
+
+gulp.task('e2e-test', gulp.series(clean, setupE2E, gulp.parallel(...buildDevFunctions, watch), test));
 
 function watch(done) {
   const mainWatcher = gulp.watch([
@@ -220,17 +261,15 @@ function watch(done) {
     root: './'
   });
 
-  mainWatcher.on('all', gulp.series(clean, gulp.parallel(buildDev, buildNativeDev, buildNativeRenderDev, buildCookieSync, buildCookieSyncWithConsent, buildUidDev, includeStaticVastXmlFile), test));
+  mainWatcher.on('all', gulp.series(clean, gulp.parallel(...buildDevFunctions), test));
   done();
 }
 
-function openWebPage() {
-  return opens(`${(argv.https) ? 'https' : 'http'}://localhost:${port}`);
-}
+gulp.task('serve', gulp.series(clean, gulp.parallel(...buildDevFunctions, watch, test)));
 
-gulp.task('serve', gulp.series(clean, gulp.parallel(buildDev, buildNativeDev, buildNativeRenderDev, buildCookieSync, buildCookieSyncWithConsent, buildUidDev, includeStaticVastXmlFile, watch, test), openWebPage));
+gulp.task('build-dev', gulp.parallel(...buildDevFunctions));
 
-gulp.task('build', gulp.parallel(buildProd, buildCookieSync, buildCookieSyncWithConsent, buildNative, buildNativeRender, buildUid, includeStaticVastXmlFile));
+gulp.task('build', gulp.parallel(buildProdLegacy, buildLegacyNativeRender, buildBanner, buildVideo, buildCookieSync, buildCookieSyncWithConsent, buildNative, buildNativeRender, buildUid, buildAmp, buildMobile, includeStaticVastXmlFile));
 
 gulp.task('test-coverage', (done) => {
   new KarmaServer(karmaConfMaker(true, false, false), newKarmaCallback(done)).start();

package/karma.conf.maker.js

@@ -3,7 +3,7 @@ const webpackConf = require('./webpack.conf');
 const karmaConstants = require('karma').constants;
 const path = require('path');
 
-function setBrowsers(karmaConf, browserstack, watchMode) {
+function setBrowsers(karmaConf, browserstack) {
   if (browserstack) {
     karmaConf.browserStack = {
       username: process.env.BROWSERSTACK_USERNAME,
@@ -12,8 +12,6 @@ function setBrowsers(karmaConf, browserstack, watchMode) {
     }
     karmaConf.customLaunchers = require('./browsers.json')
     karmaConf.browsers = Object.keys(karmaConf.customLaunchers);
-  } else if (watchMode) {
-    karmaConf.browsers = ['Chrome'];
   }
 }
 
@@ -29,7 +27,7 @@ function setReporters(karmaConf, codeCoverage, browserstack) {
       suppressPassed: true
     };
   }
-  
+
   if (codeCoverage) {
     karmaConf.reporters.push('coverage-istanbul');
     karmaConf.coverageIstanbulReporter = {
@@ -41,7 +39,7 @@ function setReporters(karmaConf, codeCoverage, browserstack) {
           urlFriendlyName: true, // simply replaces spaces with _ for files/dirs
         }
       }
-    }  
+    }
   }
 }
 
@@ -149,6 +147,6 @@ module.exports = function(codeCoverage, browserstack, watchMode) {
     captureTimeout: 4 * 60 * 1000, // default 60000
   }
   setReporters(config, codeCoverage, browserstack);
-  setBrowsers(config, browserstack, watchMode);
+  setBrowsers(config, browserstack);
   return config;
 }

package/package.json

@@ -1,84 +1,82 @@
 {
-  "name": "prebid-universal-creative",
-  "version": "1.14.2",
-  "description": "Universal creative for Prebid apps",
-  "main": "dist/creative.js",
-  "engines": {
-    "node": "<=8.7.0"
-  },
-  "scripts": {
-    "test": "echo test",
-    "prepublish": "gulp build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/prebid/prebid-universal-creative.git"
-  },
-  "keywords": [
-    "Prebid.js"
-  ],
-  "globalVarName": "pbjs",
-  "author": "Prebid.org Contributors",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/prebid/prebid-universal-creative/issues"
-  },
-  "homepage": "https://github.com/prebid/prebid-universal-creative#readme",
-  "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/register": "^7.6.2",
-    "@wdio/browserstack-service": "^6.1.4",
-    "@wdio/cli": "^6.12.1",
-    "@wdio/concise-reporter": "^7.5.2",
-    "@wdio/local-runner": "^7.5.2",
-    "@wdio/mocha-framework": "^7.5.2",
-    "@wdio/spec-reporter": "^7.5.2",
-    "@wdio/sync": "^7.5.2",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
-    "babel-plugin-transform-es3-property-literals": "^6.22.0",
-    "chai": "^4.1.2",
-    "core-js": "^3.13.0",
-    "core-js-pure": "^3.13.0",
-    "del": "^5.0.0",
-    "execa": "^1.0.0",
-    "gulp": "^4.0.2",
-    "gulp-clean": "^0.4.0",
-    "gulp-connect": "^5.7.0",
-    "gulp-eslint": "^4.0.2",
-    "gulp-header": "^2.0.1",
-    "gulp-inject": "^5.0.2",
-    "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.6.1",
-    "gulp-uglify": "^3.0.0",
-    "istanbul": "^0.4.5",
-    "istanbul-instrumenter-loader": "^3.0.0",
-    "karma": "^6.4.0",
-    "karma-browserstack-launcher": "^1.3.0",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.2",
-    "karma-coverage-istanbul-reporter": "^1.4.3",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-sinon": "^1.0.5",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "^0.0.31",
-    "karma-webpack": "^3.0.5",
-    "lodash": "^4.17.14",
-    "mocha": "^5.2.0",
-    "opn": "^6.0.0",
-    "sinon": "^6.3.4",
-    "string-replace-webpack-plugin": "^0.1.3",
-    "webdriverio": "^4.13.2",
-    "webpack": "^3.12.0",
-    "webpack-stream": "^4.0.0",
-    "yargs": "^11.0.0"
-  },
-  "dependencies": {
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "postscribe": "^2.0.8"
-  }
+    "name": "prebid-universal-creative",
+    "version": "1.16.0",
+    "description": "Universal creative for Prebid apps",
+    "main": "dist/creative.js",
+    "scripts": {
+        "test": "gulp test",
+        "prepublish": "gulp build"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/prebid/prebid-universal-creative.git"
+    },
+    "keywords": [
+        "Prebid.js"
+    ],
+    "globalVarName": "pbjs",
+    "author": "Prebid.org Contributors",
+    "license": "Apache-2.0",
+    "bugs": {
+        "url": "https://github.com/prebid/prebid-universal-creative/issues"
+    },
+    "homepage": "https://github.com/prebid/prebid-universal-creative#readme",
+    "devDependencies": {
+        "@babel/core": "^7.2.2",
+        "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+        "@babel/preset-env": "^7.2.3",
+        "@babel/register": "^7.6.2",
+        "@wdio/browserstack-service": "^7.25.4",
+        "@wdio/cli": "^7.25.4",
+        "@wdio/concise-reporter": "^7.25.4",
+        "@wdio/local-runner": "^7.25.4",
+        "@wdio/mocha-framework": "^7.25.4",
+        "@wdio/spec-reporter": "^7.25.4",
+        "@wdio/sync": "^7.25.4",
+        "babel-loader": "^8.0.5",
+        "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
+        "babel-plugin-transform-es3-property-literals": "^6.22.0",
+        "chai": "^4.1.2",
+        "core-js": "^3.13.0",
+        "core-js-pure": "^3.13.0",
+        "del": "^5.0.0",
+        "execa": "^1.0.0",
+        "gulp": "^4.0.2",
+        "gulp-clean": "^0.4.0",
+        "gulp-connect": "^5.7.0",
+        "gulp-eslint": "^4.0.2",
+        "gulp-header": "^2.0.1",
+        "gulp-inject": "^5.0.2",
+        "gulp-rename": "^1.2.2",
+        "gulp-replace": "^0.6.1",
+        "gulp-uglify": "^3.0.0",
+        "istanbul": "^0.4.5",
+        "istanbul-instrumenter-loader": "^3.0.0",
+        "karma": "^6.4.0",
+        "karma-browserstack-launcher": "^1.3.0",
+        "karma-chai": "^0.1.0",
+        "karma-chrome-launcher": "^2.2.0",
+        "karma-coverage": "^1.1.2",
+        "karma-coverage-istanbul-reporter": "^1.4.3",
+        "karma-mocha": "^2.0.1",
+        "karma-mocha-reporter": "^2.2.5",
+        "karma-sinon": "^1.0.5",
+        "karma-sourcemap-loader": "^0.3.7",
+        "karma-spec-reporter": "^0.0.31",
+        "karma-webpack": "^3.0.5",
+        "lodash": "^4.17.14",
+        "mocha": "^10.2.0",
+        "opn": "^6.0.0",
+        "sinon": "^6.3.4",
+        "string-replace-webpack-plugin": "^0.1.3",
+        "webdriverio": "^7.25.2",
+        "webpack": "^3.12.0",
+        "webpack-stream": "^4.0.0",
+        "yargs": "^11.0.0",
+        "webpack-common-shake": "^1.0.0"
+    },
+    "dependencies": {
+        "babel-plugin-transform-object-assign": "^6.22.0",
+        "postscribe": "^2.0.8"
+    }
 }

package/src/ampOrMobile.js

@@ -0,0 +1,14 @@
+/**
+ * creative.js
+ *
+ * This file is inserted into the prebid creative as a placeholder for the winning prebid creative. It should support the following format:
+ * - AMP creatives
+ */
+
+import { renderAmpOrMobileAd } from './mobileAndAmpRender';
+
+window.ucTag = (window.ucTag || {});
+
+window.ucTag.renderAd = (doc, dataObject) => {
+  renderAmpOrMobileAd(dataObject);
+}

package/src/creative.js

@@ -4,18 +4,11 @@
  * This file is inserted into the prebid creative as a placeholder for the winning prebid creative. It should support the following formats:
  * - Banner
  * - Outstream Video
- * - Mobile
- * - AMP creatives
  * - All safeFrame creatives
  */
 
-import { newRenderingManager } from './renderingManager';
-import { newEnvironment } from './environment';
+import { renderBannerOrDisplayAd } from './renderingManager';
 
 window.ucTag = (window.ucTag || {});
 
-const environment = newEnvironment(window);
-const renderCreative = newRenderingManager(window, environment);
-
-
-window.ucTag.renderAd = renderCreative.renderAd;
+window.ucTag.renderAd = renderBannerOrDisplayAd;

package/src/environment.js

@@ -10,88 +10,75 @@
  *  Mobile App: function to detect mobile app environment
  */
 
+/**
+ * @param {String} uuid key value from auction, contains the cache id of the winning bid stored in prebid cache
+ * @returns true if there is an AMP context object
+ */
+export function isAmp(uuid, win) {
+  // TODO Use amp context once it is available in cross domain
+  // https://github.com/ampproject/amphtml/issues/6829
+  return typeof uuid === 'string' && uuid !== "" && isCrossDomain(win);
+}
 
-export function newEnvironment(win) {
-  /**
-   * @param {String} uuid key value from auction, contains the cache id of the winning bid stored in prebid cache
-   * @returns true if there is an AMP context object
-   */
-  function isAmp(uuid) {
-    // TODO Use amp context once it is available in cross domain
-    // https://github.com/ampproject/amphtml/issues/6829
-    return typeof uuid === 'string' && uuid !== "" && isCrossDomain();
-  }
-
-  /**
-   * @returns true if the environment is a SafeFrame.
-   */
-  function isSafeFrame() {
-    return !!(win.$sf && win.$sf.ext);
-  }
+/**
+ * @returns true if the environment is a SafeFrame.
+ */
+export function isSafeFrame(win) {
+  return !!(win.$sf && win.$sf.ext);
+}
 
-  /**
-    * Return true if we are in an iframe and can't access the top window.
-    * @returns true if the environment is a Cross Domain
-    */
-  function isCrossDomain() {
-    return win.top !== win && !canInspectWindow(win);
-  }
+/**
+  * Return true if we are in an iframe and can't access the top window.
+  * @returns true if the environment is a Cross Domain
+  */
+export function isCrossDomain(win) {
+  return win.top !== win && !canInspectWindow(win);
+}
 
-  /**
-   * Returns true if win's properties can be accessed and win is defined.
-   * This functioned is used to determine if a window is cross-domained
-   * from the perspective of the current window.
-   * @param {!Window} win
-   * @return {boolean}
-   */
-  function canInspectWindow(win) {
-    try {
-      // force an exception in x-domain environments. #1509
-      win.top.location.toString();
-      return true;
-    } catch (e) {
-      return false;
-    }
+/**
+ * Returns true if win's properties can be accessed and win is defined.
+ * This functioned is used to determine if a window is cross-domained
+ * from the perspective of the current window.
+ * @param {!Window} win
+ * @return {boolean}
+ */
+export function canInspectWindow(win) {
+  try {
+    // force an exception in x-domain environments. #1509
+    win.top.location.toString();
+    return true;
+  } catch (e) {
+    return false;
   }
+}
 
-  /**
-   * Returns true if we can find the prebid global object (eg pbjs) as we
-   * climb the accessible windows.  Return false if it's not found.
-   * @returns {boolean}
-   */
-  function canLocatePrebid() {
-    let result = false;
-    let currentWindow = win;
-    
-    while (!result) {
-      try {
-        if (currentWindow.$$PREBID_GLOBAL$$) {
-          result = true;
-          break;
-        }
-      } catch (e) { }
-      if (currentWindow === window.top) break;
-      
-      currentWindow = currentWindow.parent;
-    }
-    return result;
-  }
+/**
+ * Returns true if we can find the prebid global object (eg pbjs) as we
+ * climb the accessible windows.  Return false if it's not found.
+ * @returns {boolean}
+ */
+export function canLocatePrebid(win) {
+  let result = false;
+  let currentWindow = win;
 
-  /**
-   * @param {String} env key value from auction, indicates the environment where tag is served
-   * @returns true if env exists and is equal to the string 'mobile-app'
-   */
-  function isMobileApp(env) {
-    return env && env === 'mobile-app';
-  }
+  while (!result) {
+    try {
+      if (currentWindow.$$PREBID_GLOBAL$$) {
+        result = true;
+        break;
+      }
+    } catch (e) { }
+    if (currentWindow === window.top) break;
 
-  return {
-    isMobileApp,
-    isCrossDomain,
-    isSafeFrame,
-    isAmp,
-    canLocatePrebid
+    currentWindow = currentWindow.parent;
   }
+  return result;
 }
 
-
+/**
+ * @param {String} env key value from auction, indicates the environment where tag is served
+ * @returns true if env exists and is equal to the string 'mobile-app'
+ */
+export function isMobileApp(env) {
+  return env && env === 'mobile-app';
+}

package/src/legacy.js

@@ -0,0 +1,29 @@
+/**
+* legacy.js
+* This is deprecated code, publishers should not use one .js creative to handle all different types of creative.
+* To reduce bytes transfered for each ad, publishers should use specific .js based on hb_format targeting key-value.
+*
+* This file is inserted into the prebid creative as a placeholder for the winning prebid creative. It should support the following formats:
+* - Banner
+* - AMP
+* - Mobile
+* - Outstream Video
+* - All safeFrame creatives
+*/
+
+import { transformAuctionTargetingData } from './utils';
+import { renderBannerOrDisplayAd } from './renderingManager';
+import { renderAmpOrMobileAd } from './mobileAndAmpRender';
+import { isMobileApp, isAmp } from './environment';
+
+window.ucTag = (window.ucTag || {});
+
+window.ucTag.renderAd = (doc, dataObject) => {
+  const targetingData = transformAuctionTargetingData(dataObject);
+
+  if (isMobileApp(targetingData.env) || isAmp(targetingData.uuid, window)) {
+    renderAmpOrMobileAd(dataObject);
+  } else {
+    renderBannerOrDisplayAd(doc, dataObject);
+  }
+}

package/src/legacyNativeRender.js

@@ -0,0 +1,6 @@
+import { newNativeRenderManager } from './nativeRenderManager';
+
+window.pbNativeTag = (window.pbNativeTag || {});
+window.nativeRenderManager = newNativeRenderManager(window);
+
+window.pbNativeTag.renderNativeAd = (args) => nativeRenderManager.renderNativeAd.call(null, document, args);