Follow these ad specifications and best practices to ensure that your Bazaarvoice Advertising campaign runs smoothly:

HTML5

Expand the following sections for HTML5 ad specifications, notes, and best practices.

Unit sizes300x250
160x600
728x90
300x600
Initial file size75-100 KB
Maximum file size200 KB
Backup .gif/.jpg file size (Mandatory)40 KB
File type.gif, .jpg, .png, .html, .js, .css., .svg
Maximum animation time15 seconds
Maximum animation speed24 fps
Looping limitations3 loops
Character limitN
Z-index range0-4,999
Maximum percentage of CPU usage20%
RestrictionsStatic - provide a standard image file
Clicktag code"clickTag" if single clickthrough
"clickTag0," "clickTag1," etc. if multiple clickthroughs

Adhere to the following best practices to ensure your ad assets are properly delivered:

  • Submit a .zip file including all referenced code and assets including Javascript libraries. Once the .zip file is uncompressed, the ad .html file must be viewable without a network connection.
  • To format click through URLs, use the clickTag variable for storing the click destination as shown in the following example:
    var clickTag = “www.example.com”;
  • Place the clickTag variable in the .html file without minification or obfuscation. This helps the ad server find the variable and substitute the correct value. When you include multiple .html files, ensure that the variable is present in the first .html file that loads.
  • Ensure that ads use the clickTag variable as the destination of the click event, whether handled by anchor tags (<a>), window.location, window.open, or any other method of navigating the user.

Adhere to the following best practices to improve the initial display of your ad assets:

  • Provide inline CSS and use HTML to deliver initial display resources as much as possible.
  • Limit initial dependencies on any render-blocking .js or .css.
  • Load interactive elements as a deferred or secondary subload, but keep them efficient using techniques such as caching or minification.
  • Defer heavy file weights until the user initiates interaction.
  • Use techniques such as byte serving to download partial content and to optimize for auto-play video.
  • Avoid unnecessary downloads.
  • Use feature detection to determine if a browser has the features needed to render the assets.

Adhere to the following best practices to improve time-to-visual start and complete download:

  • Combine all supporting files, such as JavaScript toolkits, libraries, HTML, and CSS whenever possible.
  • Use well-distributed, cached libraries to provide supporting files instead of providing them with the ad.
  • Tailor supporting files and other elements to the environment and experience by checking the device and bandwidth for each viewer.
  • Minimize the use of JQuery. Javascript libraries such as JQuery are unnecessarily resource intensive.

Adhere to the following best practices to improve the efficiency of your image assets:

  • Compress images when possible. Use .svg or compressed .jpg. Only use .gif and .png if transparency or high quality images are necessary.
  • Consolidate images wherever possible.
  • Use sprite sheets for multiple display assets and animation to improve rendering times.
  • Cache all reusable objects.

Adhere to the following best practices to improve asset and resource delivery:

  • Avoid duplicate downloads for each asset by ensuring that ad servers maintain a persistent connection. Package assets in a way to facilitate this.
  • Deliver all assets and files using Gzip and use relative paths during delivery.
  • Use minification and/or compression where applicable to minimize the file load size.

    Note: Do not use minification for the clickTag variable.

Adhere to the following best practice to improve caching performance:

  • Use content delivery network (CDN) hosted files and caching of static objects as much as possible.

Video pre-roll

Expand the following sections for video pre-roll ad specifications, notes, and best practices.

Initial dimensions400x300
File typesQuickTime (.mov, .mp4, .m4a, .3gp, .3g2, .mj2)
Flash Video (FLV ON2 VP6 codec)
HTML5 (Note 5)
Flash versionsVAST 2.0 or hosted video files
Frames per second30 fps
Maximum initial file load size2 MB (15 seconds)
4 MB (30 seconds)
Maximum additional file load size for OBA self-regulation compliance5 KB
Subsequent maximum polite file load size100 KB
Maximum animation length15 seconds or 30 seconds standard video
45 seconds or 60 seconds non-standard video (premium charge applies)
Minimum required controlsPlay
Pause
Mute/Volume = 0
TrackingStart
Click-through
50% completion
100% completion
Audio initiationUser-initiated (on click: mute/un-mute)
Default state must be muted
Aspect ratio4:3 (640x480, 800x600)
16:9 (1280x720)
Bitrate400-600 kbps
Note: The standard default bitrate is 512 kbps. Include the bitrate in your XML file.

Adhere to the following best practices to ensure proper delivery of video assets:

  • HTML5 does not support streaming video, but it can simulate a streaming experience using adaptive bitrate streaming technologies such as HLS and MPEG-DASH.
  • Use MPEG-4 (MP4) file formats for H.264-encoded video for a more seamless delivery across devices. The H.264 codec should use a Baseline profile to allow for more diverse execution in systems that range from a cellular connection on a mobile screen to a high-speed cable connection on an HTTP-connect TV screen. For audio, AAC is more widely supported. PCM audio is unsupported in Flash players.
  • At a minimum, provide files in MP4/H.264 file format. You may also submit alternate files using formats such as WebM and VP8.
  • Use the web-optimized setting when encoding the MP4 file, which sets the MOOV (movie) atom at the start of the file.
  • Format files for adaptive bitrate streaming to enable a smoother viewer experience. Adaptive bitrate streaming uses short fragments (2-3 seconds) of the video at different quality levels and stores them in a playlist file such as M3U8. During playback, the player detects bandwidth at the start of each fragment and plays the fragment at the quality level best suited to the bandwidth and player environment. Common protocols for adaptive bitrate streaming include HTTP Live Streaming (HLS) in the US and MPEG-DASH in the EU.

Adhere to the following best practices to improve the performance of video assets:

  • Defer heavy payload until user interaction.
  • Use techniques such as byte-serving to download partial content and to optimize for auto-play video.
  • Avoid unnecessary downloads.

ClickTag examples

Expand this section to see examples that use the ClickTag variable in different environments.

Flash 10

MyClickTagButton.addEventListener(
  MouseEvent.CLICK,
  function():void {
    if (root.loaderInfo.parameters.clickTAG.substr(0,5) == ""http:"" ||
    root.loaderInfo.parameters.clickTAG.substr(0,6) == ""https:"") {
      navigateToURL(
      new URLRequest(root.loaderInfo.parameters.clickTAG), ""_blank""
      );
    }
  }
);
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;

click_btn.addEventListener(MouseEvent.MOUSE_UP, onClick);
function onClick(e:MouseEvent):void {
  var click_url:String = root.loaderInfo.parameters.clickTAG;
  if(click_url) {
    navigateToURL(new URLRequest(click_url), '_blank');
  }
}

Flash 8, 9

on (release) {
  if (_root.clickTAG.substr(0,5) == ""http:"" ||
  _root.clickTAG.substr(0,6) == ""https:"") {
    getURL(_root.clickTAG, ""_blank"");
  }
}
on (release) {
  getURL(_root.clickTAG, '_blank');
}
click_btn_name.onRelease = function(){
  getURL(_root.clickTAG, '_blank');
}

AS2 Standard

on (release) {
  getURL (_root.clickTAG, ""_blank"");
}

AS2 Google Network

on (release) {       
  if (clickTAG.substr(0,5) == ""http:"" || 
  clickTAG.substr(0, 6) == ""https:""){
    getURL(clickTAG, ""_blank"");}
}

AS3 Google Network

Link_1.addEventListener(MouseEvent.MOUSE_UP, 
                        function(event: MouseEvent): void {
  var sURL: String;
  if ((sURL = root.loaderInfo.parameters.clickTAG)) {
    navigateToURL(new URLRequest(sURL), ""_blank""); 
  }
});