Ensuring Google Web Designer HTML5 Compatibility With DemandScience

HTML5 General Specs

HTML5 creatives are a type of display creative and must follow the same guidelines as display with some additional recommendations.

• HTML5 Supported File Types: HTML, JS, CSS, JPG, JPEG, GIF, PNG, TTF and SVG
• Supported File Sizes for HTML5 Creatives:

Initial: 200 KB maximum
Max Initial File Load Count: 15 Files
Subsequent/Polite Load: 1 MB maximum
User-Initiated Load: 2.2 MB Recommended

• • • • • 300 x 250
        • 160 x 600
        • 300 x 50
        • 300 x 100
        • 300 x 600
        • 320 x 50
        • 320 x 480
        • 336 x 280
        • 728 x 90
        • 768 x 1024
        • 970 x 250
        • 970 x 90

To ensure Google Web Designer compatibility with Terminus, please complete the below steps for each HTML5 creative you want to upload 

These instructions are current as of Google Web Designer Version: 10.0.1.1204

In Google Web Designer:

Step 1. Set the project's environment to "Non-Google Ad" 

Step 2. Once your ad is completed, go to the components panel and insert the Tap Area component.

Step 3. Rename the "Tap Area" Component ID and the Tap Area Name to "clickTAG"

     - Make sure the clickTAG component is the highest layer on the timeline. Otherwise your ad may lose clicks!

Step 4. Ensure the Tap Area is resized to be overtop the entire ad creative.

Step 5. Click the clickTAG layer, then in the bottom left of the events panel, click the "+" sign. 

Step 6. Choose "Tap Area" and then "Touch / Click"

Step 7. Choose "Custom" Then "Add Custom Action"

Step 8. Add "clickTAG" after gwd. and paste in the the code below:

function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
window.open(getParameterByName("clickTAG"));

Step 9. Switch to Code View and add the size meta tag, replacing the 'W' and 'H' with the dimensions of each creative.

<meta name="ad.size" content="width=W,height=H">

Example - <meta name="ad.size" content="width=160,height=600">

Step 10. Hit "File" then "save as zip" and that zip file can be used to upload to Terminus! 

Step 11. Upload the .zip file to your Terminus campaign and set your landing page URL in the Terminus UI.

• Click on the Uploading Creative section of the How to Launch a Display Advertising Campaign article for step-by-step instructions.

**If updating the HTML file after exporting, please follow the Custom Code Method at the following page: Custom Code Method **

FAQs:

• What tools can I use to open & view .html files?
  • Atom Editor, Brackets

• What tools can I use to zip my files?
  • Keka

• Can I zip my files using the Mac/Windows Zip Tools?
  • We recommend using a specific app such as Keka as it provides the option to remove resource forks.

• What do I do if I am seeing an error after I upload my creative?
  • Please review our HTML5 Troubleshooting article - HTML5 Troubleshooting Article
  • For any other questions, please reach out via our Customer Support Portal at support.terminus.com.