Ad specifications
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 sizes | 300x250 160x600 728x90 300x600 |
Initial file size | 75-100 KB |
Maximum file size | 200 KB |
Backup .gif/.jpg file size (Mandatory) | 40 KB |
File type | .gif, .jpg, .png, .html, .js, .css., .svg |
Maximum animation time | 15 seconds |
Maximum animation speed | 24 fps |
Looping limitations | 3 loops |
Character limit | N |
Z-index range | 0-4,999 |
Maximum percentage of CPU usage | 20% |
Restrictions | Static - 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 dimensions | 400x300 |
File types | QuickTime (.mov, .mp4, .m4a, .3gp, .3g2, .mj2) Flash Video (FLV ON2 VP6 codec) HTML5 (Note 5) |
Flash versions | VAST 2.0 or hosted video files |
Frames per second | 30 fps |
Maximum initial file load size | 2 MB (15 seconds) 4 MB (30 seconds) |
Maximum additional file load size for OBA self-regulation compliance | 5 KB |
Subsequent maximum polite file load size | 100 KB |
Maximum animation length | 15 seconds or 30 seconds standard video 45 seconds or 60 seconds non-standard video (premium charge applies) |
Minimum required controls | Play Pause Mute/Volume = 0 |
Tracking | Start Click-through 50% completion 100% completion |
Audio initiation | User-initiated (on click: mute/un-mute) Default state must be muted |
Aspect ratio | 4:3 (640x480, 800x600) 16:9 (1280x720) |
Bitrate | 400-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""); } }); |