sumonst21/basic-gpt-ad-slots.markdown

## basic-gpt-ad-slots.markdown

      
    Raw
  

              basic-gpt-ad-slots.markdown
            
          
    Basic GPT Ad Slots

Set up Basic Google Publisher Tag ad slots.
A Pen by Sumon Islam on CodePen.
License.

  
## index.html
<html>
  <head>
    <title>IMA HTML5 Simple Demo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type='text/javascript'>
       var googletag = googletag || {};
       googletag.cmd = googletag.cmd || [];
       (function() {
         var gads = document.createElement('script');
         gads.async = true;
         gads.type = 'text/javascript';
         gads.src = '//www.googletagservices.com/tag/js/gpt.js';
         var node = document.getElementsByTagName('script')[0];
         node.parentNode.insertBefore(gads, node);
       })();
     </script>

     <!-- Register your companion slots -->
     <script type='text/javascript'>
       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot(
       '/124319096/external/single_ad_samples', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"></source>
          <source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.webm"></source>
        </video>
      </div>
      <div id="adContainer"></div>
    </div>
      <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script type="text/javascript">
         // Using the command queue to enable asynchronous loading.
         // The unit will not actually display now - it will display when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
    <button id="playButton">Play</button>
  </body>
</html>

## script.js
// Copyright 2015 Google Inc. All Rights Reserved.
// You may study, modify, and use this example for any purpose.
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.

var adsManager;
var adsLoader;
var adDisplayContainer;
var intervalTimer;
var playButton;
var videoContent;

function init() {
  videoContent = document.getElementById('contentElement');
  playButton = document.getElementById('playButton');
  playButton.addEventListener('click', requestAds);
}

function createAdDisplayContainer() {
  // We assume the adContainer is the DOM id of the element that will house
  // the ads.
  adDisplayContainer =
      new google.ima.AdDisplayContainer(
          document.getElementById('adContainer'), videoContent);
}

function requestAds() {
  google.ima.settings.setPlayerType('google/codepen-demo-gpt');
  google.ima.settings.setPlayerVersion('1.0.0');
  // Create the ad display container.
  createAdDisplayContainer();
  // Initialize the container. Must be done via a user action on mobile devices.
  adDisplayContainer.initialize();
  videoContent.load();
  // Create ads loader.
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  // Listen and respond to ads loaded and error events.
  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      onAdsManagerLoaded,
      false);
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError,
      false);

  // Request video ads.
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl =
    '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%3Dskippablelinear&correlator=';

  // Specify the linear and nonlinear slot sizes. This helps the SDK to
  // select the correct creative if multiple are returned.
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;

  adsRequest.nonLinearAdSlotWidth = 640;
  adsRequest.nonLinearAdSlotHeight = 150;

  adsLoader.requestAds(adsRequest);
}

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Get the ads manager.
  var adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
  // videoContent should be set to the content video element.
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings);

  // Add listeners to the required events.
  adsManager.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
      onContentPauseRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
      onAdEvent);

  // Listen to any additional events, if necessary.
  adsManager.addEventListener(
      google.ima.AdEvent.Type.LOADED,
      onAdEvent);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.STARTED,
      onAdEvent);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.COMPLETE,
      onAdEvent);

  try {
    // Initialize the ads manager. Ad rules playlist will start at this time.
    adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
    // Call play to start showing the ad. Single video and overlay ads will
    // start at this time; the call will be ignored for ad rules.
    adsManager.start();
  } catch (adError) {
    // An error may be thrown if there was a problem with the VAST response.
    videoContent.play();
  }
}

function onAdEvent(adEvent) {
  // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
  // don't have ad object associated.
  var ad = adEvent.getAd();
  switch (adEvent.type) {
    case google.ima.AdEvent.Type.LOADED:
      // This is the first event sent for an ad - it is possible to
      // determine whether the ad is a video ad or an overlay.
      if (!ad.isLinear()) {
        // Position AdDisplayContainer correctly for overlay.
        // Use ad.width and ad.height.
        videoContent.play();
      }
      break;
    case google.ima.AdEvent.Type.STARTED:
      // This event indicates the ad has started - the video player
      // can adjust the UI, for example display a pause button and
      // remaining time.
      if (ad.isLinear()) {
        // For a linear ad, a timer can be started to poll for
        // the remaining time.
        intervalTimer = setInterval(
            function() {
              var remainingTime = adsManager.getRemainingTime();
            },
            300); // every 300ms
      }
      break;
    case google.ima.AdEvent.Type.COMPLETE:
      // This event indicates the ad has finished - the video player
      // can perform appropriate UI actions, such as removing the timer for
      // remaining time detection.
      if (ad.isLinear()) {
        clearInterval(intervalTimer);
      }
      break;
  }
}

function onAdError(adErrorEvent) {
  // Handle the error logging.
  console.log(adErrorEvent.getError());
  adsManager.destroy();
}

function onContentPauseRequested() {
  videoContent.pause();
  // This function is where you should setup UI for showing ads (e.g.
  // display ad timer countdown, disable seeking etc.)
  // setupUIForAds();
}

function onContentResumeRequested() {
  videoContent.play();
  // This function is where you should ensure that your UI is ready
  // to play content. It is the responsibility of the Publisher to
  // implement this function when necessary.
  // setupUIForContent();

}

// Wire UI element references and UI event listeners.
init();

## scripts
<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

## style.css
#mainContainer {
  position: relative;
  width: 640px;
  height: 360px;
}

#content, #adContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 640px;
  height: 360px;
}

#contentElement {
  width: 640px;
  height: 360px;
  overflow: hidden;
}

#playButton {
  margin-top:-10px;
  vertical-align: top;
  width: 350px;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2c3e50;
  border: 0;
  border-bottom: 2px solid #22303f;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #22303f;
  box-shadow: inset 0 -2px #22303f;
  float: left;
}
	<html>
	<head>
	<title>IMA HTML5 Simple Demo</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type='text/javascript'>
	var googletag = googletag \|\| {};
	googletag.cmd = googletag.cmd \|\| [];
	(function() {
	var gads = document.createElement('script');
	gads.async = true;
	gads.type = 'text/javascript';
	gads.src = '//www.googletagservices.com/tag/js/gpt.js';
	var node = document.getElementsByTagName('script')[0];
	node.parentNode.insertBefore(gads, node);
	})();
	</script>

	<!-- Register your companion slots -->
	<script type='text/javascript'>
	googletag.cmd.push(function() {
	// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
	googletag.defineSlot(
	'/124319096/external/single_ad_samples', [728, 90], 'companionDiv')
	.addService(googletag.companionAds())
	.addService(googletag.pubads());
	googletag.companionAds().setRefreshUnfilledSlots(true);
	googletag.pubads().enableVideoAds();
	googletag.enableServices();
	});
	</script>
	</head>

	<body>
	<div id="mainContainer">
	<div id="content">
	<video id="contentElement">
	<source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"></source>
	<source src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.webm"></source>
	</video>
	</div>
	<div id="adContainer"></div>
	</div>
	<!-- BODY part -->
	<!-- Declare a div where you want the companion to appear. Use
	googletag.display() to make sure the ad is displayed. -->
	<div id="companionDiv" style="width:728px; height:90px;">
	<script type="text/javascript">
	// Using the command queue to enable asynchronous loading.
	// The unit will not actually display now - it will display when
	// the video player is displaying the ads.
	googletag.cmd.push(function() { googletag.display('companionDiv'); });
	</script>
	</div>
	<button id="playButton">Play</button>
	</body>
	</html>
	// Copyright 2015 Google Inc. All Rights Reserved.
	// You may study, modify, and use this example for any purpose.
	// Note that this example is provided "as is", WITHOUT WARRANTY
	// of any kind either expressed or implied.

	var adsManager;
	var adsLoader;
	var adDisplayContainer;
	var intervalTimer;
	var playButton;
	var videoContent;

	function init() {
	videoContent = document.getElementById('contentElement');
	playButton = document.getElementById('playButton');
	playButton.addEventListener('click', requestAds);
	}

	function createAdDisplayContainer() {
	// We assume the adContainer is the DOM id of the element that will house
	// the ads.
	adDisplayContainer =
	new google.ima.AdDisplayContainer(
	document.getElementById('adContainer'), videoContent);
	}

	function requestAds() {
	google.ima.settings.setPlayerType('google/codepen-demo-gpt');
	google.ima.settings.setPlayerVersion('1.0.0');
	// Create the ad display container.
	createAdDisplayContainer();
	// Initialize the container. Must be done via a user action on mobile devices.
	adDisplayContainer.initialize();
	videoContent.load();
	// Create ads loader.
	adsLoader = new google.ima.AdsLoader(adDisplayContainer);
	// Listen and respond to ads loaded and error events.
	adsLoader.addEventListener(
	google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
	onAdsManagerLoaded,
	false);
	adsLoader.addEventListener(
	google.ima.AdErrorEvent.Type.AD_ERROR,
	onAdError,
	false);

	// Request video ads.
	var adsRequest = new google.ima.AdsRequest();
	adsRequest.adTagUrl =
	'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%3Dskippablelinear&correlator=';

	// Specify the linear and nonlinear slot sizes. This helps the SDK to
	// select the correct creative if multiple are returned.
	adsRequest.linearAdSlotWidth = 640;
	adsRequest.linearAdSlotHeight = 400;

	adsRequest.nonLinearAdSlotWidth = 640;
	adsRequest.nonLinearAdSlotHeight = 150;

	adsLoader.requestAds(adsRequest);
	}

	function onAdsManagerLoaded(adsManagerLoadedEvent) {
	// Get the ads manager.
	var adsRenderingSettings = new google.ima.AdsRenderingSettings();
	adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
	// videoContent should be set to the content video element.
	adsManager = adsManagerLoadedEvent.getAdsManager(
	videoContent, adsRenderingSettings);

	// Add listeners to the required events.
	adsManager.addEventListener(
	google.ima.AdErrorEvent.Type.AD_ERROR,
	onAdError);
	adsManager.addEventListener(
	google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
	onContentPauseRequested);
	adsManager.addEventListener(
	google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
	onContentResumeRequested);
	adsManager.addEventListener(
	google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
	onAdEvent);

	// Listen to any additional events, if necessary.
	adsManager.addEventListener(
	google.ima.AdEvent.Type.LOADED,
	onAdEvent);
	adsManager.addEventListener(
	google.ima.AdEvent.Type.STARTED,
	onAdEvent);
	adsManager.addEventListener(
	google.ima.AdEvent.Type.COMPLETE,
	onAdEvent);

	try {
	// Initialize the ads manager. Ad rules playlist will start at this time.
	adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
	// Call play to start showing the ad. Single video and overlay ads will
	// start at this time; the call will be ignored for ad rules.
	adsManager.start();
	} catch (adError) {
	// An error may be thrown if there was a problem with the VAST response.
	videoContent.play();
	}
	}

	function onAdEvent(adEvent) {
	// Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
	// don't have ad object associated.
	var ad = adEvent.getAd();
	switch (adEvent.type) {
	case google.ima.AdEvent.Type.LOADED:
	// This is the first event sent for an ad - it is possible to
	// determine whether the ad is a video ad or an overlay.
	if (!ad.isLinear()) {
	// Position AdDisplayContainer correctly for overlay.
	// Use ad.width and ad.height.
	videoContent.play();
	}
	break;
	case google.ima.AdEvent.Type.STARTED:
	// This event indicates the ad has started - the video player
	// can adjust the UI, for example display a pause button and
	// remaining time.
	if (ad.isLinear()) {
	// For a linear ad, a timer can be started to poll for
	// the remaining time.
	intervalTimer = setInterval(
	function() {
	var remainingTime = adsManager.getRemainingTime();
	},
	300); // every 300ms
	}
	break;
	case google.ima.AdEvent.Type.COMPLETE:
	// This event indicates the ad has finished - the video player
	// can perform appropriate UI actions, such as removing the timer for
	// remaining time detection.
	if (ad.isLinear()) {
	clearInterval(intervalTimer);
	}
	break;
	}
	}

	function onAdError(adErrorEvent) {
	// Handle the error logging.
	console.log(adErrorEvent.getError());
	adsManager.destroy();
	}

	function onContentPauseRequested() {
	videoContent.pause();
	// This function is where you should setup UI for showing ads (e.g.
	// display ad timer countdown, disable seeking etc.)
	// setupUIForAds();
	}

	function onContentResumeRequested() {
	videoContent.play();
	// This function is where you should ensure that your UI is ready
	// to play content. It is the responsibility of the Publisher to
	// implement this function when necessary.
	// setupUIForContent();

	}

	// Wire UI element references and UI event listeners.
	init();
	#mainContainer {
	position: relative;
	width: 640px;
	height: 360px;
	}

	#content, #adContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 640px;
	height: 360px;
	}

	#contentElement {
	width: 640px;
	height: 360px;
	overflow: hidden;
	}

	#playButton {
	margin-top:-10px;
	vertical-align: top;
	width: 350px;
	height: 60px;
	padding: 0;
	font-size: 22px;
	color: white;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	background: #2c3e50;
	border: 0;
	border-bottom: 2px solid #22303f;
	cursor: pointer;
	-webkit-box-shadow: inset 0 -2px #22303f;
	box-shadow: inset 0 -2px #22303f;
	float: left;
	}