PRODUCT
Follow

Overview

Introduction and Screenshots

The YouTube Ad Feature easily allows advertisers to leverage their YouTube hosted videos while continuing to fully track all video events, including play, pause, quartiles and more. Additionally, the YouTube player is fully customizable and supports all YouTube player parameters.

youtube1.jpg    youtube2.jpg

Demos/Downloads

The following table provides links to the template and demo for the YouTube Ad feature.

Template

YouTube_Video_2_0_0.zip

Demo

Preview Demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Edge, Firefox, Chrome

Mac

Firefox, Chrome, Safari

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android

Android 4.4 and later ( including tablets)

Assets

Workspaces Available

The YouTube Ad Feature includes one HTML5 Workspace built using the HTML5 Polite Banner. 

Included Workspace Files

File Name 

Description

config.js

Sizmek Ad Configuration file

images/DefaultImage300x250.gif

Demo Default Backup image

index.html

Demo HTML index file

scripts/youtube.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

video/n-1G9IqylKs.mp4

Ad Feature Video assets

  

Implementing the Ad Feature

Getting Started

Before you begin, make sure you have the following resources available:

  • YouTube Ad Feature files 
  • Your YouTube Video Id

 

Add the YouTube Ad Feature to Your Workspace Code

The following steps illustrate how to add the YouTube Ad Feature to your creative Workspace.

Procedure
  1. Include the YouTube Javascript file in the head of your Workspace index.html file:

    <script type="text/javascript" src="scripts/youtube.js"></script>

  1. Next, add the Sizmek Video Component and Adkit include:
    • Make sure Adkit is loaded after the Video Component
    • Please note: the file path has been shortened for simplification 

    <script type="text/javascript">EBModulesToLoad = ['Video'] </script>
    <script type="text/javascript" src="http://ds.serving-sys.com/…/adkit.js"></script>


  1. Then, add the Ad Feature Stylesheet include: 

    <link type="text/css" rel="stylesheet" href="styles/styles.css"/>

  1. Add an HTML div element to your markup with a unique id
    • This div will be targeted by the creative script to house the YouTube video 

    <div id="youtube-container"></div>

  1. Add and edit the following to the body of your index.html file. Update the parameters within the config object as needed and instantiate the script, passing the config object to your creative script.
    1.  Update the containerId with the div you wish to load the YouTube player
    2. Update the youtubeVideoId with your YouTube Video Id
    3. Update the width and height as needed
    4. Update the youtubePlayerOptions object with YouTube player parameters as needed. You can find a full list of the YouTube parameters at the following link:

    <script>

        var config = {
containerId: 'youtube-container',
youtubeVideoId: 'V8XYiA6il_8',
width: '260',
height: '160',
youtubePlayerOptions: {
html5: 1,
enablejsapi: 1,
fs: 1,
controls: 1,
showinfo: 0
}
};

var youTubeVideo = new youTubeAdFeature(config); </script>
  1. Locate and rename one of the included video files in the videos directory for each YouTube video you wish to load so that the file name matches the YouTube video id.
    • ex: if your YouTube video id is 'n-1G9IqylKs', rename one of the video files in the videos directory to 'n-1G9IqylKs.mp4'
    • note: you need to do this for each YouTube video you wish to include

YouTube Parameters

Parameter

Type

Description

containerId

String

The unique id of the div you wish to place the YouTube video.

youtubeVideoId

String

The unique id of your YouTube hosted video. This is the value of the ‘v’ parameter found in the YouTube video URL. EX = v=XXXXXXXXXXX

width

Number

The desired width of the YouTube video

height

Number

The desired height of the YouTube video

youtubePlayerOptions

Object

An object listing any of the existing YouTube player parameters. A full list of parameters can be found here:

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

YouTube Public Methods

Method Name

Description

pauseVideo

Pauses the currently playing YouTube video.

playVideo

 Plays the currently cued/loaded YouTube video.

seekTo(seconds: Number, allowSeekAhead: Boolean)

Seeks to a specified time in the video.

  • The seconds parameter identifies the time to which the player should advance.

The allowSeekAhead parameter determines whether the player will make a new request to the server if the seconds parameter specifies a time outside of the currently buffered video data.

setSize(width:Number, height:Number)

Sets the size in pixels of the <iframe> that contains the YouTube player.

stopVideo

Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching an additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function.

Setting up the YouTube Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

Archive the YouTube Ad Feature workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip the Workspace folder.
  2. Log in to the MDX2.0 platform.
  3. Click ManageCreative Assets, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the format type list.
  8. Choose the HTML5 Workspace Folder you uploaded to the platform.
  9. Click Save

Sizmek Sizmek Advertising Suite Setup

  1. Zip the Workspace folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click Creative > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative > Ads. Then, click New Ad and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format list.
  8. Under Main Assets select the Workspace folder and default image.
  9. Click Save

Known Issues

  • Not supported in Standard Banners
  • Not supported in APP
  • Youtube player Full screen button does not track on clickthrough
  • YouTube icon in the YouTube player does not track on clickthrough.

Change Log 

February 18, 2018

  • Added the ability to support and track multiple YouTube videos
  • Updated to new Feature Template
  • Migrated to SAS  

February 29, 2016

  • Added Ad Feature Tracking
  • Updated to use AdKit 

September 23, 2014

Initial Release

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments