Google Web Designer is a free, professional-grade HTML5 authoring tool.
Apart from building banners for "Double Click" it can also be used to create a "Non-Google Ad", which results in a "Non-Studio-Enabler" output.
Note: None of these guides outline how to use the GWD software to make animations. For further information on using the GWD software please visit the official Google Ad Designer page here.
Google web designer components:
In order to keep designers focused on design, we released a suite of drag and drop components you can use to bring Sizmek API and functionalities in to GWD.
- Please note that there is nothing that you need to do in code view in order to get started, as all of that is all handled by components you can drag drop and configure.
- User interactions like clickthrough, expand, collapse, userActionCounter and autoEventCounter are handled with code snippets.
- Videos are tracked automatically.
Native Component Support:
Currently, Sizmek does not fully support all of the components available in GWD.
Supported components include all basic events/gestures:
- Tap Area
- Image Button
- Tap to Call
Sizmek Components Installation guide:
To install any component in Google Web Desinger, you need to:
1.Start a new or open an existing project.
2. Click window on the menu, and make sure that the Components are enabled (visible in tool-set).
3. Then in your components view click the "+" icon to add custom components
4. select your component
5. Once imported you should get a notification that the Element was imported successfully.
And you should see your new component on the Custom Elements list:
We advise installing all components, then restarting Google web designer.
You can download all of the components here:
Individual component usage instructions are documented on Guides Below.
- Polite Universial component with our Creative API and all it's Modules loaded. (Use for Polite and Expandable Formats - supports Dynamic creative)
- Standard Banner Component - Provides only base functionalities - supports Dynamic creative.
adKit Standard Banner
Base config.js files:
Regardless of the format you are aiming to use, you need to have a config file.
- Download an empty config.js:
config.js - non-dynamic ad
- Download Exemplary dynamic config.js file with all possible dynamic item types:
config.js - dynamic ad.
Dynamic Image and Video Components:
Using Sizmek API functionalities & Sizmek GWD components:
- Google Web Designer | Setting Up a Project
- Google Web Designer | Tracking Interactions
- Google Web Designer | Video Component
- Google Web Designer | YouTube Component
- Google Web Designer | Dynamic Creative
Building Sizmek HTML5 base formats with GWD components:
- Google Web Designer | Setting a Default Image
- Google Web Designer | Standard Banner
- Google Web Designer | Polite Banner
- Google Web Designer | Expandable Banner
- Google Web Designer | Converting DoubleClick Ads