HTML5 Creative Guidelines

 

Suite 66 is able to host HTML5 Creatives through our delivery platform, provided each supplied creative meets AppNexus HTML5 Requirements. Please have your creative team reference the resources below to prepare your HTML5 Creatives.

Use IAB’s HTML5 clickTag Standard on AppNexus
https://wiki.appnexus.com/display/industry/Use+IAB%27s+HTML5+clickTag+Standard+on+AppNexus

Integrating the HTML5 Library with Ads Created in Adobe Edge
https://wiki.appnexus.com/display/industry/Integrating+the+AppNexus+HTML5+Library+with+Ads+Created+in+Adobe+Edge

Integrating the HTML5 Library with Ads Created in Google Web Designer
https://wiki.appnexus.com/display/industry/Integrating+the+AppNexus+HTML5+Library+with+Ads+Created+in+Google+Web+Designer

Build an HTML5 Creative in Google Web Designer
https://wiki.appnexus.com/display/industry/Build+an+HTML5+AppNexus+Creative+in+Google+Web+Designer

Build an HTML5 Creative in Adobe Edge
https://wiki.appnexus.com/display/industry/Build+an+HTML5+AppNexus+Creative+in+Adobe+Edge 

 

What to include in an HTML5 Creative 

HTML5 ads operate on a collection of files (HTML, JS, CSS, JPG, JPEG, GIF, PNG, SVG) packaged into one ZIP archive, each ZIP file should represent one ad.

 

HTML File

  • An HTML file must be located in the root of the ZIP file. If multiple .html files exist for one ad, the first file to load should be index.html.
  • The index.html file must reference the AppNexus HTML5.js Library between the <head></head> tags.
  • Add “APPNEXUS.getClickTag()” to one clickable element. This will retrieve the value of the clickTag parameter set in the ad URL. See **HTML5 clickTag Standard on AppNexus for further implementation steps.
  • All code and assets should be relatively referred by the index.html file.
  • All file requests during initial file load, including tracking files and pixels, are limited to 15.

 

Other files

  • Only include files that are referenced by the index.HTML file in the ZIP archive.
  • Only include file types supported within an HTML5 creative: HTML, JS, CSS, JPG, JPEG, GIF, PNG, SVG.
  • All code and assets should be relatively referred, meaning the index.html file should reference files that are in the same folder or within a folder where the index.html file is.
  • Externally linked files must use secure https:// or the creative will not pass audit.
  • Do not use comment wrappers to comment out code in .JS files, remove unused code entirely.

 

What to include in the ZIP Archive

  • Maximum file size of each compressed HTML5 Creative: 150KB
  • ZIP files must contain no more than 100 files, including at least one HTML file for use as the initiating file for display.
  • The primary HTML file must be located in the root of the ZIP file.
  • All files for displaying the creative (with the exception of commonly used JavaScript and CSS libraries) should be included in the ZIP file.
  • Minimize the number of files within the ZIP as much as possible to reduce browser performance impact.
  • Files may be organized into subfolders or may be present solely within the root folder of the ZIP file.
  • Each ZIP file should represent one ad.
  • Include ad width and height in the ZIP label to distinguish each ad in the ad file name.

 

What not to include in the ZIP archive

  • Do not include any ZIP files within your HTML5 Creative ZIP file.
  • However, if you have several separate HTML5 ZIP files for several separate HTML5 Creatives, you can ZIP these files together and email them to SUITE66 in one file for convenience.
  • No un-referenced files: As noted above, only include files if they referenced by the HTML file.
  • Do not include a percent symbol (%) in the names of any of the files in your assets
  • Do not include backup assets in your HTML5 ZIP file unless they are referenced by the HTML file.
  • Some HTML files may be coded to use their own backup assets when a browser can’t handle all the features. In this case, you’ll need to include a backup image in your ZIP in addition to the file the trafficker must upload separately.