Self-Serviced VideoBanner Placement

Prerequisites for self-serviced VideoBanner placement:

  • a Blue Billywig VMS publication configured for serving video banners.
  • Basic knowledge of the VMS from a user perspective

Contact Blue Billywig sales to get you set up with your own video banner delivery channel.

To place an InArticle Videobanner the following steps must be taken.

  1. Create a playout with the correct settings.
  2. Create an inarticle mediaclip.
  3. Place the inarticle ad in an article on your website.

1: Creating an InArticle Videobanner playout

In the Blue Billywig VMS, create a playout that uses the Interactivity settings with the desired properties. Adjustable settings are:

Appearance

  • Width: Set to 100%
  • Calculated height: Enable

Control bar

  • Controlbar: Hide

Start- and endscreen

  • Show big play button: Disable
  • Title: Hide
  • Related Items: Hide

Options

In the options screen you can set the "Preferred playmode". Normally the best option is HTML5, but if you use a VAST URL make sure it is CORS enabled, otherwise ads will not show. If your VAST url is not CORS enabled, please use Flash.

Behaviour and placement options

  • Autoplay: Disable
  • Automute: Enable (Can also be disabled if you prefer the ad starting with sound. Note: On most mobile/tablet devices the sound can not be influenced by the player)
  • In View margin: The percentage of the player that must be visible to trigger the "In View" action. Default: 75%
  • In View action: Play
  • Out View action: Pause
  • Mouse in action: Unmute
  • Mouse out action: Mute
  • Start collapsed (If set to yes, the player will be hidden and only expand if the player receives a play command and has a viable Ad to play. Normally the play will be triggered through the ‘In View action’)
  • Wait for approval (Only in combination with "Start collapsed" set to yes. If set to yes, the player will not show until a flag allowing it to show has been set through a javascript call)
  • Collapse on end (If set to yes, the player will be collapse when the ad has finished playing)
  • Text above player: Place text above the player. For example “advertisement”
  • Attempt iFrame breakout: When selected, the videobanner will try to break out of the iFrame it is embedded in. This is usefull when using DfP to place the videobanner. It will only work when the iFrame is on the same domain as the parent window. This setting is on by default for videobanners.
  • Placement options: The videobanner will be placed after the element found by the DOM-selector specified. Options:
    • Default: Place the banner directly after the position of the embed script.
    • afterSelector/first element: Place the banner directly after the first element matching the DOM-Selector
    • halfwaySelectors/halfway elements: Place the banner after the number of items matching the DOM-Selector divided by two, rounded down. Example: When 7 elements match the selector, the banner will be placed after the 3rd element.
    • fold/under fold only: The placement logic will try to place the player below the webpage “fold”. This means it will place the player after the first element that is not completely visible without scrolling. If none of the elements is below the fold, the player will not be placed.
    • foldOrLast/under fold or last element: Same as above, with the exception that it will be placed after the last element found, if none of the matching elements is under the fold.
  • DOM-Selector: This selector uses jQuery and can use anything jQuery can use. See http://api.jquery.com/category/selectors/ for full documentation. Examples:
    • #article-identifier p.paragraph (# is used for the id attribute of dom-elements, . (dot) for the classname. p can be used to select all <p> elements.)
    • div.article p:nth-child(4), div.article p:last (This will select the 4th <p> element within a <div class=”article”> element, and the last <p> element found within the <div class=”article”> element. When used with the Placement option “afterSelector/first element” the player will be placed after the first element found, so if there are less then 4 <p> elements found, it will be placed after the last <p> element.)

2: Creating an Inarticle mediaclip

In the VMS create a new mediaclip with the use type creative and the mediatype mainroll. Add one or more MainRoll positions to the MainRoll mediaclip and fill in a VAST URL or select a creative already uploaded to the VMS.

If you are using a creative, make sure the deeplink of the creative is set. It will be used to navigate to when a user clicks the ad.

You can also configure multiple systems. If the first one does not provide a valid ad, the second system will be used and so on.

3: Placing the InArticle VideoBanner on your website

Click "embed & preview" in the created MainRoll mediaclip, select the Inarticle VideoBanner playout you created earlier and copy the Javascript embed code generated by the VMS. Place the embed code in the desired position in your article.

An example of the embedcode looks like this:

  1. <script src="http://client.bbvms.com/p/playoutname/c/123.js" type="text/javascript"></script>

The embed code can either be placed manually or on a position which is defined by your Content Management System. It is also possible to place the embedcode in an ad slot with your ad management system. If you want to set up bi-directional communication between the VideoBanner and your Ad Management system please contact our support team for more information about the possibilities.

VideoBanner Approval feature

All VideoBanners have a feature which allows them to await approval before they appear. This way you can set up your CMS or Ad Management System to show the VideoBanner on a static position only when it is allowed to. An example of the approval code to be implemented can be found in the Appendix of the document.