Blue Billywig Support - Minimal Renderer Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="unique-element-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 ELEMENT_ID = 'unique-element-id'; // ID of the element on the page to render into, and an identifier for statistics

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: ELEMENT_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, ele);
};

document.getElementsByTagName('head')[0].appendChild(rendererScript);