How to create HTML5 Ads in Google Web Designer (GWD)

What is Google Web Designer?

It’s a online tool developed by Google to create HTML5 ads. It’s a simple drag and drop tool, anyone can learn easily.
Please follow the below steps to create HTML5 ads and adding ClickTag for the creative.

  1. Open GWD and select ‘Create New File’

2.Add creative name in the Name Field

3.Must choose “Environment” as “DoubleClick”.(Then only creative will support DFP)

4.Provide required dimension. Eg: 728×90. In addition, you can provide Custom dimension which available on the dropdown.

5.Finally Click ‘OK’

6.Then Import (Ctrl + Shift + I) assets to the GWD or Go to file and import the assets,

7.Once you imported file will appear on the stage,

8.If it is not aligned correctly, use properties on the right pane to adjust position Left and Top

9.Next Step to add click area/Tap area to define click layer on the creative

10.Drag “Tap area” from the “Component tab” on the right panel.

11.Once you placed ‘Tap area” need to define click function where you want click through on the banner. (eg: Some time you need click, only for the specific area or entire banner). In addition, multiple tap area can be defined for the same banner by dragging from component.

12.If click layers works based on the layout which we assigned. Eg, Top layer first and then next layer and so on. For eg: If you add two click URL ,one with specific area on banner and remaining area with another URL. Area with specific part need to be dragged on top layer of the time line.

13.Provide exact dimension Width and Height  for the tap area and also align position accordingly on the Properties.

14.Add Click Add event for the Tap Area as below,

15.Mouse –> Click à Google Ad –> Exit Ad –> gwd-ad –> Metric id (eg: ClickTag) –> URL( –> OK

16.Click Preview on the Top right corner,

17.Finally Export the creative by click the button next to preview.

18.File will be saved in the desire location and which you specified.

19.Upload the zip file and traffic it in DFP using “HTML5” uploading option.

20. Successfully Completed your Work!!!!!