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

Hits: 2766

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(https://www.Google.com) –> 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!!!!!

9 thoughts on “How to create HTML5 Ads in Google Web Designer (GWD)

  • August 10, 2018 at 11:58 pm
    Permalink

    When some one searches for his required thing, therefore he/she wishes to be available that in detail, thus that thing
    is maintained over here.

    Reply
  • November 22, 2018 at 4:02 pm
    Permalink

    Hi I am so thrilled I found your website, I really found you by error, while I was looking on Google for something else, Anyways I am here now and would just like to say many thanks for a fantastic post and a all round entertaining blog (I also love the theme/design), I don’t have time to read through it all at the moment but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the awesome work.

    Reply
  • December 2, 2018 at 11:09 am
    Permalink

    Hi there! I just would like to give a huge thumbs up for the good data you’ve here on this post. I can be coming again to your weblog for more soon.

    Reply
  • January 12, 2019 at 2:41 am
    Permalink

    Good post. I study something more challenging on different blogs everyday. It can all the time be stimulating to read content from other writers and observe a bit one thing from their store. I’d want to use some with the content material on my blog whether you don’t mind. Natually I’ll provide you with a link in your net blog. Thanks for sharing.

    Reply
  • January 12, 2019 at 12:00 pm
    Permalink

    Good post. I study something more difficult on completely different blogs everyday. It’ll all the time be stimulating to read content from different writers and apply a bit one thing from their store. I’d favor to use some with the content on my blog whether you don’t mind. Natually I’ll give you a hyperlink on your web blog. Thanks for sharing.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.