JS Tag Integration

Overview

The vi JS tag is intended for publishers that would like to integrate video ads into their desktop and mobile properties. The vi JS tag is a small piece of JavaScript code that runs the vi stories unit or outstream video ads using our proprietary player.

Direct JS tag web page integration

This section describes how to integrate the vi JS tag directly to your web page.

The script tag should be placed directly in the HTML code, in the page body, at the position of the page where the ad should be shown. The ad unit will automatically take up the full width that it’s given by parent element. The ad unit will use up the height needed for showing the ad unit in correct proportions. Hence, the height the ad unit is allowed to take in the page should not be constrained by some parent element.

We only accept medium placement sizes or larger (minimum width 301px for mobile and 336px for desktop).

The script should NOT be put in an iframe.

JS tag integration using DoubleClick for Publishers (DFP)

In DFP, add a creative of type “Third Party” or “Custom”. Paste the vi stories JS tag into the “Code snippet” field. Make sure to uncheck the “Serve into a SafeFrame” option.

Rendering in specific div on the page

By default, the unit will render on the page in the location of the script tag. If you for some reason want to render in a different location, e.g. because tag is placed in a 1x1px iframe or executed by other script, without placing the tag itself on the page, you need to specify where the unit should render. This can be done by specifying a DivID parameter in the tag, referring to an element on the page with the specified id, like:

Text_Color: '',
Font: '',
FontSize: '',
DivID: 'myDiv',

where ‘myDiv’ is an example and should be replaced with the id of the div where the unit should render.

Setting up a custom callback function

There is an option to set up a callback function that will be called when an ad is returned or if no ad at all was returned. For this purpose, add a parameter “CallbackFunction” in the tag parameter list, like:

Text_Color: '',
Font: '',
FontSize: '',
CallbackFunction: myJSCallBack,

The callback function will be called with a  status “SUCCESS” on impression or “ERROR” after all waterfalls come to an end without any impression

Example of a callback function:

function myJSCallBack(status) {
   if (status == "SUCCESS") {
       console.log("SUCCESS from publisherscript")
       // TODO Handle ad available (Option)
   } else if (status == "ERROR") {
       console.log("ERROR from publisherscript")
       // TODO Handle ad not available
   }
};