Blue Billywig Support - Minimal Renderer Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="unique-ad-id"></div>
  </body>
</html>

CSS

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

body > div {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

/** Standalone VAST Renderer Example
 *
 * Minimal setup to renderer an arbitrary VAST URL into a pre-configured player 
 */
const PUBLICATION = 'bbsupport'; // Your publication label on Blue Billywig (the subdomain of bbvms.com)
const AD_UNIT_CODE = 'renderer_demo'; // The ad unit code in your Blue Billywig publication
const RENDERER_URL = `https://${PUBLICATION}.bbvms.com/r/${AD_UNIT_CODE}.js`; // URL of the renderer application
const UNIQUE_AD_ID = 'unique-ad-id'; // ID of the element on the page to render into, and an identifier for statistics

// Command Queue example
window.bluebillywig = window.bluebillywig || {};
window.bluebillywig.cmd = window.bluebillywig.cmd || [];
window.bluebillywig.cmd.push({
  playerAlias: UNIQUE_AD_ID,
  callback: ($$api) => {
    $$api.on('adfinished', () => {
      console.log('Finished playing! Passback?');
    });

    $$api.on('aderror', () => {
      console.log('Ad error!');
    });

    $$api.on('adnotfound', () => {
      console.log('Ad not found!');
    });
  }
});

const rendererScript = document.createElement('script');
rendererScript.async = true;
rendererScript.src = RENDERER_URL;

// Once the script has loaded we can start using the renderer API
rendererScript.onload = () => {
  const config = {
    code: UNIQUE_AD_ID,
    vastUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
    //vastXml: 'or pass VAST XML as a string...'
  };

  // By convention renderers are always identified by an identifier that's made up of the publication label and the ad unit/renderer code
  const rendererId = `${PUBLICATION}-${AD_UNIT_CODE}`;

  const ele = document.getElementById(config.code);
  const renderer = window.bluebillywig.renderers.find((renderer) => renderer._id === rendererId);

  if (renderer) renderer.bootstrap(config,...