Google Web Designer

Google Web Designer is an ad creation tool to create rich and optimized html5 banners.

When sending banners always make sure to mark the Enviroment as Non-Google Ad – otherwise there will be a lenghty delay between when the banner is loaded vs when it is rendered.

How to make Google Web Designer banner responsive

To make Google Web Designer banner responsive make sure that when creating a new banner, the Responsive layout checkbox is checked.

Or if making an existing banner responsive, change the root element width to 100% and height to 100%

Do note that you will also need to change all of the elements size to be defined as percentages not pixels. You can do this by selecting “%” from the dropdown next to the values or by pressing the “Use percentages” button below them – GWD will do the math and convert the values.

How to implement clicktag in Google Web Designer banner

Open Code view, insert DHTML library to head section

<script>
document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>

Create a tap area and add a custom click event action to it. Define function name clickTag and add this code snippet:

var clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
var landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
window.open(clickTAGvalue, landingpagetarget);