In-View (Spilt) Setup Documentation

Updated: 17/08/2017 Version: 1.5.0

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 player component and without. Please follow instructions below 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

In-View (Split) Ad With Video

To start with In-View (Spilt), you need:
1) to initialize Video Player component in <head></head> tag inside index.html document. To get more details about Video Player component, check documentation below code spinet .

<head>
...
     <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
 ...
 </head>

Video Player Component documentation

2) OPTIONAL STEP. In order to work more flexible with Video Player components, we strongly suggest to use Video Player Container. Video Player Container component needs to loaded in <head></head> tag inside index.html document.To get more details about Video Player Container, check documentation below code spinet .

<head>

...
 <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
...

</head>

Video Container component documentation

3) OPTIONAL STEP. After Video Player Container initialization, please finally setup it as follows:

<script>

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

    player.init();
  ...

</script>

4) Create new Video Player component setup:

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

    player.init();

    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);
    // Initialize In-View
    inview.init();
</script>

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

If you need to setup In-View (Split) Ad with image asset only, then video is not needed and you should:

1)Remove initialized Video Player and Video Container components from the <head></head> tag in your index.html document:

<head>

...
 <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
...

</head>

2) Remove Video Container container setup code from <script></script>:


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

    player.init();

3) Also remove Video Player setting from <script></script>:

        videoPlayer: player

4) Assign image asset file in Additional asset section 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