In-View (Spilt) Component Documentation

Updated: 17/07/2017 Version: 1.5

Example of In-View (Spilt) Ad

Template in Adform HTML STUDIO

Description

The following guidelines describes how to setup In-View (Split) Ad with video component and without. Please follow instructions bellow in order to correctly set up the format and change available parameters.

Attention: In-View (Split) Ad is designed only for desktop browsers. Also format requires additional In-View (Split) Java Script extension

Initialization

To start with In-View (Spilt), you need to initialize Video Player component in <head></head> tag inside index.html document.

<script>

// 1. Initialize video player component in <head></head> tag

        var components = [
            'VideoPlayer'
        ];     

</script>

Then, in order to work more flexible with Video Player components, we strongly suggest to use Video Player Container. To get more details about Video Player Container, check documentation bellow.

Video Container component documentation

Video Player Container component initialization:

 <!-- Components -->
    <script src="scripts/Adf.VideoContainer.min.js"></script>
<!-- Components -->

Video Player Container component setup:

// 2. Setup VideoContainer (optional)
var player = new Adf.VideoContainer({
    container: '#adf-video',
    clicktag: clickTAGvalue,
    target: landingpagetarget
});

player.init();

// 3. Create new setup
var settings = {
    videoPlayer: player, // remove if you don't need video
    closeButton: closeButton,
    clickArea: clickArea,
    videoControls: videoControls,
    inview: 50,
    showClose: true,
    clicktag: clickTAGvalue,
    target: landingpagetarget,

    /* you can set background options if you don't need video */
    background: Adform.getAsset(4), // edit asset number according to uploaded image
    backgroundSize: 'contain',
    backgroundPosition: '50% 50%'
};

var inview = new Adf.InView(settings);
// 4. Initialize In-View
inview.init();

Optional Settings

Name	Type	Default	Description
closeButton	`HTML element`	`#adf-close-button`	Close button element
clickArea	`HTML element`	`#adf-click-area`	Click area element
videoControls	`HTML element`	`#adf-video-controls`	Video controls wrapper element
inview	`integer`	`50`	Threshold to trigger video play/pause (acceptable values 0-100)
showClose	`boolean`	`true`	Show/hide default close button
background	`url`	`none`	Url to background image
backgroundPosition	`string`	`50% 50%`	CSS background-position settings
backgroundSize	`string`	`cover`	CSS background-size settings

Video options can be set inside player variable by passing video object. All available options are listed in Video Player Container Documentation.

In-View (Split) Ad Without Video

In order to produce In-View (Split) Ad with image and video is not needed, then
1.Remove the following lines from index.html:

// 1. in <head> tag

    var components = ['VideoPlayer'];

// 2. in video container initialization

  <!-- Components -->
    <script src="scripts/Adf.VideoContainer.min.js"></script>
  <!-- Components -->

// 3. in setup

        var player = new Adf.VideoContainer({
            container: '#adf-video',
            clicktag: clickTAGvalue,
            target: landingpagetarget
        });

        player.init();

//3. in settings

    videoPlayer: player

2.Assign image file as Additional asset via File Browser panel.

In-View Ad (Split) Script

In-View (Split) Ad requires additional script which should be used when format is loaded into Adform platform and Java Script tag has been generated.

//s1.adform.net/Banners/scripts/extensions/inview_split.js?bn=%%ADFTAGID%%

Note: All scripts here are with “https” protocol. If your tag is “http” based, change script’s protocol to “http” before adding it on the tag.

Note: Adjusted In-View (Split) Ad script URL needs to be placed in the Tags section:
1. Select a tag and click on button.
2. Then, enter the URL in the JavascriptURLS field.
3. Select the Load before banner checkbox.
4. Click on Submit button.

Script should be used only for In-View ad (Split).

For more information about required script and available parameters, please follow additional documentation