This article should be used as a resource when creating HTML5 banners in house. Clients should refer to this document when learning how to build these assets in accordance with Google’s latest requirements, along with Cendyn’s advice based on industry best practices and company preferences.  

Technical Requirements: Design

Please check here for Google’s latest requirements:

• https://support.google.com/campaignmanager/answer/4558923
• https://support.google.com/richmedia/answer/2672542?hl=en

Technical Requirements: Serving

• https://support.google.com/admanager/answer/7046799?hl=en
• https://support.google.com/campaignmanager/answer/3145300?hl=en

Cendyn Specific recommendations

• HTML5 must have working ClickTag/Exit with proper cursor pointer and working URL
• We recommend using Google Web Designer for HTML5 banners
  https://webdesigner.withgoogle.com/
• Fonts recommendation is web safe fonts such as Google Fonts or Adobe Fonts
  https://fonts.adobe.com/
  https://fonts.google.com/
• Supported file types: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF, WOFF2
• HTML5 file should be previewed in all browsers to test for performance prior to submitting (Chrome, Edge, Firefox, Safari)
• Beware of CSS filters that are not supported in all browsers
  https://www.w3schools.com/cssref/css3_browsersupport.asp
• HTML5 file must have a back-up image of the final frame, file size not to exceed 40k.
• All links need to be https (fonts, js libraries, etc.). Check final html file for http links.
• Do not include the back-up jpg image in each individual zipped banner
• Each zipped banner needs to be under 10mb
• Remove any Thumbs.db from the zipped file before submitting
• Combine all banner zips and back-up images into one final zip for submitting

You can reference more tips on this subject here: https://support.google.com/campaignmanager/answer/4558694

Exporting Files at 2x

Campaign Manager 360 can scale images down depending on where it serves, therefore we recommend saving images out at twice the dimension, 2x, so it looks the best it can. 

When exporting HTML5 assets at 2x please add @2x to the end of the file name.

Naming Example:

PropertyName_2021Q1_SummerFun_300x250@2x.gif

You can reference more tips on this subject here: https://support.google.com/campaignmanager/answer/4558694

Naming Conventions

Please visit our article HERE to learn about our naming convention setup preferences