Creating an HTML5 animated ad for Adroll or any Ad network can be messy without coding knowledge, in that case, tools like Google Web Designer are there to save you.
Learn more about how AdRoll compares to alternative competitors.
If we talk about the basics of HTML5 Ads and Google Web Designer, HTML5 creatives are a replacement of flash creatives. This shift to HTML5 enhances user experience and compatibility of ads across devices. Google Web Designer is a free HTML5 Animation tool developed by Google. GWD is equipped with a lot of features that make it easy for animators to develop ads quickly.
To upload to Adroll the ad must be a single zip file containing all the assets and an index.html file, here are some of the major requirements of the zip file:
- The animation limit for HTML5 ads should be under 30 seconds without any looping at all.
- HTML document must be well structured
- Ads must be loadable in an iFrame
- Supported JS Libraries: Adobe Edge, CreateJS (Easeljs, Movieclip, TweenJS, SoundJS, and PreloadJS), JQuery, Angular JS, Tumult Hype, Swiffy, GSAP (TweenLite, CSSPlugin, and EasePack)
- The total size of zip should be under 150 Kbs
To make an ad especially compatible for Adroll we must modify some aspects of the code
- <meta> tags must be used to identify the size of an ad:
<meta name="ad.size" content= "width=300, height=250">- Declare a clickTag variable. ClickTag is a click-through URL: a shortcut to set the click-through URL in the platform.
<script type="text/javascript">
// Change the value of this string to your URL
var clickTag = "https://www.adroll.com";
</script>- This must be passed as a parameter to any window.open event in the ad code.
<div id="clickArea" style="width: 300px; height: 250px" onclick="window.open(clickTag ,'_blank');">These things might look a little complicated to a non-coder but these are super easy to implement in Google Web Designer.
Here are the steps to create an Adroll Ad in Google Web Designer:
- Create a New File by Choosing Display and Video 360 as the environment.
Adroll doesn’t ask for choosing Display and Video 360 as an environment but the tool Adroll recommends to test ads after ad creation is Google’s Doubleclick HTML 5 Asset Validator, this tool will check the availability of Display and Video 360 environment in the Ad.
- Create all the Animation by importing all the necessary assets
- Switch to code view and add meta data for ad size,
Go to the head section in top and add this line below or between other meta tags
<meta name="ad.size" content= "width=300, height=250">
- Switch back to design view, drag and drop Tap Area Component
Spread the tap area on the whole ad or the CTA button.
- Right-click on tap area and add event Touch/Click under Tap area
And then choose ‘Exit Ad’ under ‘Google Ad’
- Mention ‘clickTag’ in metrics id
Source: Adroll Help
One Response