CreativeTech Wiki (internal)

Explore

Reference

VAST

A VAST tag is an ad script generated by ad servers that allows ad servers to communicate with video players. More specifically, a VAST tag is a piece of code — an XML markup schema — placed on a publisher's website to display ads.

A VAST ad tag URL is used by a player to retrieve video and audio ads. You can manually assemble a VAST ad tag URL or modify an existing URL using the parameters below, and then test with the

VAST suite inspector⁠

. You can also review and test using these

sample tags⁠

VAST ad tags support both http and https. Impression tracking URLs respect the current SSL setting and return as either http or https. Click-through and click-tracking use http since they redirect from another page.

⁠

some sample Vast tags:

Single Inline Linear

https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=1

Single Skippable Inline

https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=1

Single Redirect Linear

https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dredirectlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=1

Sample Player

⁠

https://googleads.github.io/googleads-ima-html5/vsi/⁠

⁠

drop in the sample ad tags from above to see the ad showing up on the test video player

how to create a Player with VAST tag capability:

First, modify index.html to create a simple HTML5 video element, contained in a wrapping element, and a button to trigger playback. Also add the necessary tags to load the style.css and ads.js files. Then, modify styles.css to make the video player responsive for mobile devices. Finally, in ads.js, trigger video playback when the play button is clicked.

index.html

<!doctype html>

<head>

<title>IMA HTML5 Simple Demo</title>

</head>

<body>

</video>

</div>

</div>

</body>

</html>

style.css

#page-content {

position: relative;

/* this element's width controls the effective height */

/* of the video container's padding-bottom */

max-width: 640px;

margin: 10px auto;

}

#video-container {

position: relative;

/* forces the container to match a 16x9 aspect ratio */

/* replace with 75% for a 4:3 aspect ratio, if needed */

padding-bottom: 56.25%;

}

#video-element {

/* forces the contents to fill the container */

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

ads.js

var videoElement;

// On window load, attach an event to the play button click

// that triggers playback on the video element

window.addEventListener('load', function(event) {

videoElement = document.getElementById('video-element');

var playButton = document.getElementById('play-button');

playButton.addEventListener('click', function(event) {

videoElement.play();

});

After completing this step, when you open index.html in your browser (via your development server) you should be able to see the video element and the video should start when you click the play button.

3. Import the IMA SDK

Next, add the IMA framework using a script tag in index.html, before the tag for ads.js.

index.html

...

</video>

</div>

</div>

</body>

</html>

4. Attach page and video player handlers

To modify the behavior of the video player with JavaScript, add event handlers that trigger the following actions:

When the page is finished loading, initialize the IMA SDK.

When the video play button is clicked, load ads (unless there are already ads loaded).

When the browser window is resized, update the video element and adsManager dimensions to make the page responsive for mobile devices

ads.js

var videoElement;

// Define a variable to track whether there are ads loaded and initially set it to false

var adsLoaded = false;

window.addEventListener('load', function(event) {

videoElement = document.getElementById('video-element');

initializeIMA();

videoElement.addEventListener('play', function(event) {

loadAds(event);

});

var playButton = document.getElementById('play-button');

playButton.addEventListener('click', function(event) {

videoElement.play();

});

window.addEventListener('resize', function(event) {

console.log("window resized");

});

function initializeIMA() {

console.log("initializing IMA");

}

function loadAds(event) {

// Prevent this function from running on if there are already ads loaded

if(adsLoaded) {

return;

}

adsLoaded = true;

// Prevent triggering immediate playback when ads are loading

event.preventDefault();

console.log("loading ads");

}

5. Create the ad container

In most browsers, the IMA SDK uses a dedicated ad container element for displaying both ads and ad-related UI elements. This container must be sized to overlay the video element from the top-left corner. The height and width of the ads placed in this container are set by the adsManager object, so you don't need to set these values manually.

Note: On desktop environments, in order to prevent accidental clicks, the IMA SDK will not open the click-through URL in the first 2 seconds of the ad playback.

To implement this ad container element, first create a new div within the video-container element. Then, update the CSS to position the element at the top-left corner of the video-element. Finally, define a variable for the container within the initializeIMA() function that runs when the page is loaded.

index.html

...

</video>

</div>

...

style.css

...

#ad-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

}

ads.js

var videoElement;

var adsLoaded = false;

var adContainer;

...

function initializeIMA() {

console.log("initializing IMA");

adContainer = document.getElementById('ad-container');

}

6. Initialize the AdsLoader and make an ads request

In order to request a set of ads, create an ima.AdsLoader instance. This instance takes an AdDisplayContainer object as an input and can be used to process ima.AdsRequest objects associated with a specified ad tag URL. The ad tag used in this example contains a 10-second pre-roll ad. You can test this, or any, ad tag URL using the

IMA Video Suite Inspector⁠

As a best practice, only maintain one instance of ima.AdsLoader for the entire lifecycle of a page. To make additional ad requests, create a new ima.AdsRequest object, but re-use the same ima.AdsLoader. For more information, see the

IMA SDK FAQ⁠

ads.js

var videoElement;

var adsLoaded = false;

var adContainer;

var adDisplayContainer;

var adsLoader;

...

function initializeIMA() {

console.log("initializing IMA");

adContainer = document.getElementById('ad-container');

adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);

adsLoader = new google.ima.AdsLoader(adDisplayContainer);

// Let the AdsLoader know when the video has ended

videoElement.addEventListener('ended', function() {

adsLoader.contentComplete();

});

var adsRequest = new google.ima.AdsRequest();

adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +

'iu=/21775744923/external/single_ad_samples&sz=640x480&' +

'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' +

'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=';

// Specify the linear and nonlinear slot sizes. This helps the SDK to

// select the correct creative if multiple are returned.

adsRequest.linearAdSlotWidth = videoElement.clientWidth;

adsRequest.linearAdSlotHeight = videoElement.clientHeight;

adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth;

adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3;

// Pass the request to the adsLoader to request ads

adsLoader.requestAds(adsRequest);

}

7. Listen for AdsLoader events

When ads are loaded successfully, the ima.AdsLoader emits an ADS_MANAGER_LOADED event. Parse the event passed to the callback to initialize the AdsManager object. The AdsManager loads the individual ads as defined by the response to the ad tag URL.

In addition, be sure to handle any errors that may occur during the loading process. If ads do not load, make sure that media playback continues, without ads, so as to not interfere with the user's experience.

ads.js

var videoElement;

var adsLoaded = false;

var adContainer;

var adDisplayContainer;

var adsLoader;

var adsManager;

...

function initializeIMA() {

console.log("initializing IMA");

adContainer = document.getElementById('ad-container');

adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);

adsLoader = new google.ima.AdsLoader(adDisplayContainer);

adsLoader.addEventListener(

google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,

onAdsManagerLoaded,

false);

adsLoader.addEventListener(

google.ima.AdErrorEvent.Type.AD_ERROR,

onAdError,

false);

...

function onAdsManagerLoaded(adsManagerLoadedEvent) {

// Instantiate the AdsManager from the adsLoader response and pass it the video element

adsManager = adsManagerLoadedEvent.getAdsManager(

videoElement);

}

function onAdError(adErrorEvent) {

// Handle the error logging.

console.log(adErrorEvent.getError());

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.